@charset "UTF-8";
/* MAYIM新デザイン用フォント（コピーライト・カート数字など） */
@import url('https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400;0,500;0,600;1,400&display=swap');
/*-----------------------

         変数

-----------------------*/ :root {
  --baseColor: #5a5a5a;
  --mainColor: #68b8c6;
  --subColor: #2f6f7a;
  --accentColor: #f39c3d;
  --colorW: #ffffff;
  --base50Color: #adadad;
  --main50Color: #b4dce3;
  --sub50Color: #97b7bd;
  --accent50Color: #f9cfa3;
  --base10Color: #f0f0f0;
  --main10Color: #f0f8fa;
  --sub10Color: #eef4f5;
  --accent10Color: #fef6ed;
  /* いいね（ハート）専用のピンク。既存の4色はいずれも青緑〜紺〜グレーで
     「いいね」に必要な暖色がなく、既存トークンでは表現できないため追加（20260816カンプ準拠） */
  --likeColor: #e8709b;
  --like10Color: #fceef3;
}
/*-----------------------

         COMMON

-----------------------*/
body {
  width: 100%;
  color: var(--baseColor);
  font-size: 1.8rem;
  font-weight: 500;
  line-height: 1.75;
  letter-spacing: 0.05em;
  font-feature-settings: "palt";
  /* 読みやすくモダンなゴシック体 */
  font-family: "Cormorant Garamond", "Shippori Mincho B1", serif;
  /* 明朝体。落ち着いた印象 */
  /* font-family: 'Noto Serif JP', serif; */
  /* 丸みのある親しみやすいゴシック体 */
  /* font-family: 'Zen Maru Gothic', sans-serif; */
}
/* タイトル：コンパクト・中央寄せ（旧：左寄せ＋イラスト付きの大型ヘッダー）
   サーバー側 style.css に .page-detail-page .content-header { padding-top: clamp(...) } 等の
   旧デザイン（2クラス詳細度）が残っているため、同等以上の詳細度のセレクタを併記して上書きする */
.content-header,
.detail-page .content-header,
.page-detail-page .content-header,
.detail-page.page-detail-page .content-header {
  background: transparent;
  background-color: transparent;
  width: 100%;
  left: auto;
  transform: none;
  padding: 4rem 0 0;
  margin-bottom: clamp(3rem, 1.5rem + 4vw, 6rem);
  position: relative;
}
/* タイトル背後のイラスト（ill-mv.webp）は出さない */
.content-header::after,
.detail-page .content-header::after,
.page-detail-page .content-header::after,
.detail-page.page-detail-page .content-header::after {
  content: none;
}
.content-header .page-header,
.detail-page .content-header .page-header,
.page-detail-page .content-header .page-header,
.detail-page.page-detail-page .content-header .page-header {
  /* ページ見出し（「学ぶ / Search」等）。大きすぎたので一段小さくした（旧: 2.6rem〜4.8rem） */
  font-size: clamp(2.1rem, 1.7669902913rem + 0.8880129589vw, 3.5rem);
  font-weight: 600;
  letter-spacing: 0.3em;
  line-height: 1.5;
  text-align: center;
  color: var(--mainColor);
  font-family: "Shippori Mincho B1", serif;
  padding-left: 0;
}
@media only screen and (max-width: 559px) {
  .content-header .page-header,
  .detail-page .content-header .page-header,
  .page-detail-page .content-header .page-header,
  .detail-page.page-detail-page .content-header .page-header {
    letter-spacing: 0.3em;
    line-height: 2.3076923077;
  }
}
/* 英字（span）は日本語に続けてインライン表示 */
.content-header .page-header span,
.detail-page .content-header .page-header span,
.page-detail-page .content-header .page-header span,
.detail-page.page-detail-page .content-header .page-header span {
  display: inline;
  font-size: inherit;
  letter-spacing: inherit;
  font-family: "EB Garamond", serif;
  font-weight: 500;
  color: var(--main50Color);
}
/* 会員種別の状態バッジ（入会済など）は赤地なので文字は白にする */
.content-header .page-header span.badge,
.detail-page .content-header .page-header span.badge,
.page-detail-page .content-header .page-header span.badge,
.detail-page.page-detail-page .content-header .page-header span.badge {
  color: #fff;
}
.content-header figure {
  margin-left: auto;
  margin-right: auto;
  margin-top: clamp(4rem, 3.1504854369rem + 2.2653721683vw, 7.5rem);
  width: clamp(27rem, 22.6310679612rem + 11.6504854369vw, 45rem);
}
body.skin-staging nav {
  background-color: transparent;
}
/* コンテンツ紹介 */
.cat-Area ul {
  display: flex;
  gap: 1.5rem;
  gap: 4rem 1.5rem;
  flex-wrap: wrap;
}
.page-list-contents .col-lg-12.detail.fr-element.fr-view .cat-Area ul li a {
  color: var(--mainColor);
  background: #fff;
  border: solid 2px var(--mainColor);
  font-weight: 500;
  font-size: clamp(1.4rem, 1.206rem + 0.518vw, 2.2rem);
  padding: 1rem 2rem;
  border-radius: 3rem;
  letter-spacing: 0.05em;
}
.page-list-contents .col-lg-12.detail.fr-element.fr-view .cat-Area ul li.current a {
  color: #fff;
  background: var(--mainColor);
  border: solid 2px var(--mainColor);
  white-space: nowrap;
}
.cat-Area dl {
  margin: clamp(1.5rem, 1.015rem + 1.294vw, 3.5rem) 0 clamp(2rem, 1.515rem + 1.294vw, 4rem);
  align-items: center;
}
.cat-Area dt, .cat-Area dd {
  font-size: clamp(1.8rem, 1.46rem + 0.906vw, 3.2rem);
  font-weight: 700;
}
.cat-Area dd {
  color: var(--mainColor);
  position: relative;
  font-size: clamp(2.2rem, 1.86rem + 0.906vw, 3.6rem);
}
.cat-Area dd::before {
  content: "：";
  padding: 0 0.1em;
  color: var(--baseColor);
}
.contents_Wrap .box {
  background: var(--sub10Color);
  padding: 4rem;
  border-radius: 1.5rem;
  text-align: center;
  display: flex;
  flex-direction: column;
}
.contents_Wrap .box .cat {
  display: flex;
  gap: 1rem;
  align-items: center;
  margin-bottom: 1.5rem;
}
.contents_Wrap .box .cat p {
  font-size: clamp(1.2rem, 0.957rem + 0.647vw, 2.2rem);
  font-weight: 500;
  color: #fff;
  background: var(--mainColor);
  white-space: nowrap;
  padding: 0.3rem 1.5rem;
  border-radius: 3rem;
}
.contents_Wrap .box .contents-ttl {
  font-weight: 700;
  letter-spacing: 0.025em;
  font-size: clamp(2.6rem, 2.066rem + 1.424vw, 4.8rem);
  text-align: justify;
}
.contents_Wrap .box .contents-ttl2 {
  font-weight: 700;
  letter-spacing: 0.025em;
  font-size: clamp(1.8rem, 1.606rem + 0.518vw, 2.6rem);
  position: relative;
  margin: 3.5rem 0 1.5rem;
  text-align: justify;
}
.contents_Wrap .box .contents-ttl2::before {
  content: "\025a0";
  margin-right: 0.5rem;
}
.contents_Wrap .box figure {
  overflow: hidden;
  aspect-ratio: 7/4;
  border-radius: 1rem;
  margin: 2rem 0;
}
.contents_Wrap .box figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.contents_Wrap .box .text-area p {
  font-size: clamp(1.4rem, 1.351rem + 0.129vw, 1.6rem);
  letter-spacing: 0.025em;
  line-height: 1.5;
}
.contents_Wrap .box .photoWrap {
  gap: 1rem;
  flex-wrap: wrap;
}
.contents_Wrap .box .photoWrap .box2 {
  width: calc((100% - 3rem) / 4);
}
.contents_Wrap .box .photoWrap .box2 a .flex {
  flex-direction: column;
  justify-content: center;
}
.contents_Wrap .box .photoWrap .box2 .name {
  font-size: clamp(1.4rem, 1.351rem + 0.129vw, 1.6rem);
  letter-spacing: 0.025em;
  line-height: 1.5;
  width: 8em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: center;
  color: var(--baseColor);
}
.contents_Wrap .box .photoWrap .box2 p.photo {
  border-radius: 50%;
  overflow: hidden;
  aspect-ratio: 1/1;
}
.contents_Wrap .box .photoWrap .box2 p.photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.contents_Wrap .box .text-area p:not(:last-child) {
  margin-bottom: 1.5em;
}
.contents_Wrap .box .navigatorWrap {
  margin-bottom: 8rem;
}
.contents_Wrap .box .btnG {
  width: 100%;
  gap: 2rem;
  margin-top: 1rem;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: -3.4rem;
  align-items: flex-end;
}
.contents_Wrap .box .btnG .flex-c {
  flex-direction: column;
  width: 55%;
}
.contents_Wrap .box .btnG p.arrow_box2 {
  margin-bottom: 1rem;
}
.archive-btn, .live-btn {
  display: inline-block;
  color: #fff;
  font-weight: bold;
  letter-spacing: 0.025em;
  border-radius: 1rem;
  border: solid 3px #fff;
}
.archive-btn a, .live-btn a {
  padding: 0 2.8rem;
  display: block;
  width: 100%;
  height: 100%;
}
.archive-btn {
  background: #F0C465;
  font-size: clamp(1.6rem, 1.551rem + 0.129vw, 1.8rem);
}
.archive-btn {
  display: flex;
  align-items: center;
  height: 6.8rem;
}
.archive-btn a {
  padding-top: 0.3rem;
}
.archive-btn img {
  vertical-align: sub;
}
.live-btn {
  background: var(--mainColor);
  width: 100%;
  font-size: clamp(1.6rem, 1.503rem + 0.259vw, 2rem);
  height: 6.8rem;
}
.live-btn a {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 6rem;
  /* padding: 0 4rem; */
  padding: 0 1rem;
}
.live-btn a::after {
  content: "";
  display: block;
  position: absolute;
  right: 1em;
  top: 50%;
  transform: translateY(-50%);
  background: url("../img/arrow-r3.webp") no-repeat center center/cover;
  width: 1.1rem;
  height: 1.8rem;
}
.live-btn.disabled {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  /* padding: 0 4rem; */
  padding: 0 1rem;
}
/*吹き出し*/
.arrow_box {
  position: relative;
  width: 100%;
  height: 4rem;
  padding: 0 2rem;
  text-align: center;
  border: 3px solid #fff;
  color: #fff;
  font-size: clamp(1.4rem, 1.303rem + 0.259vw, 1.6rem);
  font-weight: bold;
  border-radius: 2rem;
  -webkit-border-radius: 2rem;
  -moz-border-radius: 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 3px 3px 3px rgba(77, 77, 77, 0.3);
  z-index: 5;
  white-space: nowrap;
  background: var(--mainColor);
  margin-bottom: 0.7rem;
}
.arrow_box:after, .arrow_box:before {
  border: solid transparent;
  content: '';
  height: 0;
  width: 0;
  pointer-events: none;
  position: absolute;
  top: 100%;
  left: 50%;
}
.arrow_box:after {
  border-color: rgba(247, 221, 51, 0);
  border-top-width: 20px;
  border-bottom-width: 20px;
  border-left-width: 12px;
  border-right-width: 12px;
  margin-left: -12px;
  margin-top: -4px;
  border-top-color: var(--mainColor);
}
.arrow_box:before {
  border-color: rgba(30, 144, 255, 0);
  border-top-width: 20px;
  border-bottom-width: 14px;
  border-left-width: 14px;
  border-right-width: 14px;
  margin-left: -14px;
  margin-top: 1px;
  margin-top: 0;
  border-top-color: #fff;
}
.page-list-contents .col-lg-12.detail.fr-element.fr-view a {
  text-decoration: none;
  color: #fff;
}
@media screen and (max-width:559px) {
  .contents2Wrap > li, .contents2Wrap > div {
    width: 100%;
  }
  .page-list-contents .flex, .page-list-contents .flex-c, .page-list-contents .flex-e {
    flex-direction: row;
  }
  .archive-div {
    text-align: center;
  }
  .arrow_box {
    position: relative;
    width: 100%;
    height: 4rem;
    padding: 0 2rem;
    text-align: center;
    border: 3px solid #fff;
    color: #fff;
    font-size: clamp(0.8rem, 1.303rem + 0.259vw, 1.0rem);
    font-weight: bold;
    border-radius: 2rem;
    -webkit-border-radius: 2rem;
    -moz-border-radius: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 3px 3px 3px rgba(77, 77, 77, 0.3);
    z-index: 5;
    white-space: nowrap;
    background: var(--mainColor);
    margin-bottom: 0.7rem;
  }
  .contents_Wrap .box .photoWrap .box2 .name {
    width: 5.2em;
  }
}
/*====================================================================
　モーダル
====================================================================*/
.modalG .modal {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  display: none;
  width: 100%;
  height: 100vh;
  transition: none !important;
}
.modal__bg {
  position: absolute;
  width: 100%;
  height: 100vh;
  background: var(--mainColor);
}
.modal__content {
  background: #fff;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.modal__contentInner {
  background: #fff;
  border-radius: 1rem;
  width: 75vw;
  height: 75vh;
  padding: 4vw;
  position: relative;
  overflow-y: auto;
}
.modal__content::-webkit-scrollbar {
  display: none;
}
/*modal中*/
.modal__contentInner .flex {
  gap: 4rem;
  align-items: flex-start;
  justify-content: center;
}
.modal__contentInner .flex figure {
  overflow: hidden;
  aspect-ratio: 1/1;
  border-radius: 50%;
  /* padding: 4rem; */
}
.modal__contentInner .flex figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.modal__contentInner .modal-ttl ruby {
  color: var(--mainColor);
  font-weight: 700;
  letter-spacing: 0.2em;
  margin-bottom: 4rem;
  font-size: clamp(2.8rem, 2.315rem + 1.294vw, 4.8rem);
  display: block;
}
.modal__contentInner .textArea-Wrap .textArea {
  line-height: 1.75;
}
.modal__contentInner .textArea-Wrap .link-btn {
  margin: 4rem 0;
  display: flex;
  justify-content: flex-end;
}
.modal__contentInner .degree {
  font-size: 2.4rem;
  font-weight: 700;
  margin-bottom: 2.5rem;
  letter-spacing: 0.1em;
}
.modal__contentInner .textArea-Wrap .snsG {
  margin: 4rem 0;
}
.modal__contentInner .textArea-Wrap .snsG ul {
  gap: 2rem;
  justify-content: flex-start;
  flex-wrap: wrap;
}
.modal__contentInner .textArea-Wrap .snsG ul li {
  text-align: center;
}
.top-close {
  position: fixed;
  width: 5vw;
  height: 5vw;
  top: 2.5641025641vw;
  right: 2.5641025641vw;
  z-index: 4;
  cursor: pointer;
}
.top-close img {
  transform: rotate(-90deg);
  transition: transform 2s;
}
.top-close:hover img {
  transition: transform 2s;
  transform: rotate(90deg);
}
/* ライブ配信のリンク表示 */
.body-live-detail .div_fixed_live_join a {
  text-decoration: underline;
  color: var(--mainColor);
}
/* サブメニュー調整 */
.l-hdr__menu__arrow {
  color: inherit;
}
.l-hdr__submenu__item .l-hdr__menu__link::after {
  content: none !important;
}
.l-hdr__submenu__item .l-hdr__menu__link {
  color: var(--colorW);
}
.l-hdr__submenu {
  padding: 0 0 0 0;
}
.l-hdr__submenu__item {
  padding: 1rem 8% 1rem;
}
/* 二重スクロールを削除 */
body {
  overflow-x: visible;
}
/* いいねには下線を表示しない */
.col-lg-12.detail.fr-element.fr-view a[data-event="good"], .col-lg-12.detail.fr-element.fr-view a[data-event="good-list"] {
  text-decoration: none;
  color: inherit;
}
.drawer--right .drawer-nav .drawer-menu .o-drawer__submenu__item a {
  font-size: 1.6rem;
  font-weight: 500;
  color: var(--colorW);
  padding: 2.5rem 0 1rem;
}
.o-drawer__submenu {
  padding: 1rem 8% 1rem;
  border-radius: 1.2rem;
}
.drawer--right .drawer-nav .drawer-menu .o-drawer__submenu__item a {
  padding: 1rem 0 1rem;
}
.login-page .panel {
  margin-top: 160px;
}
.l-hdr__menu {
  margin-top: 5.5rem;
  padding-top: 0rem;
}
/*サブメニュー*/
header .l-hdr__navi li {
  position: relative;
}
header .l-hdr__navi li ul.sub-menu {
  display: none;
  position: absolute;
  /* top: 3.4rem; */ /* 隙間を埋めるため */
  top: 2.8rem;
  left: 50%;
  transform: translateX(-50%);
  font-size: 1em;
  padding: 0rem 1.8rem 1rem;
  border-radius: 0.8rem;
  z-index: 9999;
  background: transparent;
  white-space: nowrap;
  width: max-content;
  overflow: visible;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s ease, visibility 0.4s ease;
  min-width: 30rem;
}
header .l-hdr__navi li:hover ul.sub-menu {
  display: block;
  opacity: 1;
  visibility: visible;
}
/* 背景の半透明ボックス */
header .l-hdr__navi li ul.sub-menu::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: var(--mainColor);
  opacity: 0.9;
  z-index: -1;
  border-radius: 0.8rem;
}
header .l-hdr__navi li ul.sub-menu li {
  border-bottom: 1px dashed #fff;
  padding: 0 0.5rem;
  width: 100%;
}
header .l-hdr__navi li ul.sub-menu li:last-child {
  border-bottom: none;
}
header .l-hdr__navi li ul.sub-menu li a {
  display: block;
  padding: 1.8rem 0 1rem;
  color: #fff;
  letter-spacing: 0.05em;
  font-weight: 500;
  font-size: 1.6rem;
  text-align: center;
}
/* 不要な装飾を無効化 */
header .l-hdr__navi li ul li:first-child {
  border-left: none;
}
header .l-hdr__navi li ul.sub-menu li a::after {
  display: none;
}
header .l-hdr__navi li.current-menu-item ul li::after {
  border-bottom: none;
}
.mypage-list::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--mainColor);
  opacity: 0.9;
  z-index: -1;
  border-radius: 0.8rem;
}
.l-hdr__right {
  display: flex;
  gap: 2.5rem;
  margin-top: 1rem;
  cursor: pointer; /* マウスカーソル */
}
.c_headline_h2_02 {
  letter-spacing: 0.1em;
}
.l-hdr__cart__link {
  position: relative;
  top: 0.4rem;
  display: inline-flex;
  align-items: flex-start;
}
.l-hdr__cart__count {
  position: absolute;
  top: -8px;
  right: -14px;
  margin-left: 0;
  border-radius: 2rem;
  padding: 0.4rem 0.45rem;
  line-height: 1;
  font-size: 1.1rem;
  letter-spacing: 0.05em;
  background: var(--mainColor);
  color: #fff;
}
/*====================================================================
　お問い合わせフローティングボタン
====================================================================*/
.floating-contact {
  position: fixed;
  right: 1vw;
  bottom: 1vw;
  z-index: 9999;
  width: 10vw;
  height: 10vw;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  color: #fff;
  overflow: hidden;
  box-shadow:
    0 12px 30px rgba(0, 0, 0, 0.25), 0 4px 10px rgba(0, 0, 0, 0.12);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  background: url("../img/contact-bg-circle.png") no-repeat center / cover;
}
.floating-contact:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.22);
}
.floating-contact {
  color: #fff !important;
}
.floating-contact:hover {
  color: #fff !important;
}
.floating-contact__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  line-height: 1.2;
  text-align: center;
}
.floating-contact__text-ja {
  font-size: 1.1vw;
  padding-top: 0.6vw;
  font-weight: 500;
  letter-spacing: 0.08em;
}
.floating-contact__text-en {
  margin-top: 3px;
  font-size: 0.8vw;
  letter-spacing: 0.12em;
  opacity: 0.6;
}
.page-detail-page.page-detail-top .content-header .page-header {
  text-indent: 0.12em;
}
.page-detail-page.page-detail-top .content-header .page-header span {
  text-indent: -0.12em;
}
@media screen and (max-width:1440px) {}
@media screen and (max-width:1368px) {}
@media screen and (max-width:1280px) {}
@media screen and (max-width:1024px) {}
@media screen and (max-width:559px) {
  .floating-contact {
    right: 8px;
    left: 8px;
    bottom: 14px;
    width: auto;
    height: 68px;
    border-radius: 15px;
    justify-content: center;
    background: url("../img/contact-bg-wide.png") no-repeat center / cover;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);
  }
  .floating-contact__text-ja {
    font-size: 1.9rem;
    letter-spacing: 0.08em;
  }
  .floating-contact__text-en {
    margin-top: 4px;
    font-size: 1.1rem;
    letter-spacing: 0.12em;
  }
  .l-hdr__right {
    gap: 2.8rem;
  }
  .l-hdr__cart__count {
    top: -2px;
    right: -10px;
    font-size: 0.95rem;
    padding: 0.35rem 0.4rem;
  }
  .login_name, .login_arrow {
    display: none;
  }
  header .mypage.loginBtn {
    border: none;
  }
  .mypage-list {
    top: 3.5rem;
  }
  header h1 img {
    width: 38vw;
  }
  .l-hdr__login__icon {
    width: 3rem;
  }
  .l-hdr__cart {
    width: 2.5rem;
  }
  .page-detail-page.page-detail-top .content-header .page-header {
    font-size: 3.5rem;
    letter-spacing: 0.3em;
  }
  @media screen and (max-width:375px) {}
  @media screen and (max-width:361px) {}
  @media screen and (max-width:1440px) {}
  @media screen and (max-width:1368px) {}
  @media screen and (max-width:1280px) {}
  @media screen and (max-width:1024px) {}
  @media screen and (max-width:559px) {}
  @media screen and (max-width:375px) {}
  @media screen and (max-width:361px) {}
}
/*====================================================================
　運営からのお知らせ（circle_news）
====================================================================*/
.l_circle_news {
  margin-top: 6rem;
}
.circle_news_heading {
  margin-bottom: 3rem;
  position: relative;
  z-index: 1;
}
.circle_news_body {
  background-color: var(--base10Color);
  padding: 6rem 0;
  width: 100vw;
  position: relative;
  left: 50%;
  margin-left: -50vw;
  margin-top: -4rem;
  padding-top: 4rem;
}
.circle_news_heading {
  font-size: clamp(2.2rem, 1.86rem + 0.906vw, 3.6rem);
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--baseColor);
  margin-bottom: 0.5rem;
}
.circle_news_heading__sub {
  display: block;
  font-size: clamp(1.2rem, 0.957rem + 0.647vw, 2.2rem);
  font-weight: 400;
  letter-spacing: 0.2em;
  color: var(--mainColor);
  margin-top: 0.3rem;
}
.circle_news_list {
  margin-top: 4rem;
  list-style: none;
  padding: 0;
}
.circle_news_item {
  padding: 2.5rem 0;
  border-bottom: 1px dashed var(--base50Color);
}
.circle_news_item:first-child {
  border-top: 1px dashed var(--base50Color);
}
.circle_news_item__head {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  margin-bottom: 1rem;
}
.circle_news_item__tag {
  display: inline-block;
  background: var(--mainColor);
  color: #fff;
  font-size: 1.4rem;
  font-weight: 500;
  padding: 0.3rem 1.5rem;
  border-radius: 3rem;
  white-space: nowrap;
}
.circle_news_item__date {
  font-size: 1.4rem;
  color: var(--base50Color);
  letter-spacing: 0.05em;
}
.circle_news_item__text {
  font-size: clamp(1.4rem, 1.351rem + 0.129vw, 1.6rem);
  line-height: 1.75;
  margin: 0;
}
.o_btn_area._circle_news {
  width: 33rem;
  margin-top: 4rem;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}
@media only screen and (max-width: 559px) {
  .o_btn_area._circle_news {
    width: 100%;
  }
}
@media only screen and (max-width: 559px) {
  .circle_news_body {
    padding: 4rem 0;
    margin-top: -2.5rem;
  }
  .circle_news_item__head {
    gap: 1rem;
  }
}
/*-----------------------------データムIDログイン画面スタイル---------------------------*/
.body-login .btn-lg {
  text-decoration: none !important;
  min-width: 40rem;
  min-height: 6rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.8rem;
  margin: 2rem auto 7rem;
}
.body-login a.btn-lg:hover {
  opacity: 0.8;
}
.login-page .panel {
  margin-top: 8rem;
}
@media only screen and (max-width: 559px) {
  .body-login .btn-lg {
    min-width: 100%;
    font-size: 1.6rem;
  }
  .login-page .panel {
    margin-top: 5rem;
    font-size: 1.6rem;
  }
}

/*-----------------------------お知らせ一覧---------------------------*/
.body-info-list .catArea li a {
  font-size: 1em;
  color: var(--mainColor);
  padding: 0.2em 1em;
  border: 1px solid var(--mainColor);
  display: inline-block;
  margin-right: 0.7em;
  margin-bottom: 0.7em;
}

.body-info-list .catArea li a.active {
  color: var(--colorW);
  border: none;
  background-color: var(--mainColor);
}

.body-info-list .color-w {
  color: var(--colorW);
}

.body-info-list .bg-main {
  background: var(--mainColor);
}

/*-----------------------------インジケータ制御---------------------------*/
/* PC（4件未満は非表示） */
@media (min-width: 560px) {
  .swiper-nav.hide-on-pc {
    display: none;
  }
}

/*-----------------------------shelf-listのborder削除---------------------------*/
#shelf_list .fr-view table td,
#shelf_list .fr-view table th {
  border: none;
}

/* 「学ぶ」詳細（/learn/detail）の本文も同じ扱い。
   メルマガ等はテーブルで組まれたHTMLをそのまま貼っているため、
   共通CSSの罫線が出て枠だらけに見える。資料室一覧と同様に消す。 */
.body-archive-detail .archive-body table,
.body-archive-detail .archive-body table td,
.body-archive-detail .archive-body table th {
  border: none;
}

/*-----------------------------以下、ステージングのCSSを元に追加 2026.4.8---------------------------*/
.body-news .card-text a {
  color: var(--mainColor);
}
/* コンテンツ紹介 */
.cat-Area ul {
  display: flex;
  gap: 1.5rem;
  gap: 4rem 1.5rem;
  flex-wrap: wrap;
}
.body-news .cat-Area ul li a {
  color: var(--mainColor);
  background: #fff;
  border: solid 2px var(--mainColor);
  font-weight: 500;
  font-size: clamp(1.4rem, 1.206rem + 0.518vw, 2.2rem);
  padding: 1rem 2rem;
  border-radius: 3rem;
  letter-spacing: 0.05em;
}
.body-news .cat-Area ul li.current a {
  color: #fff;
  background: var(--mainColor);
  border: solid 2px var(--mainColor);
  white-space: nowrap;
}
.cat-Area dl {
  margin: clamp(1.5rem, 1.015rem + 1.294vw, 3.5rem) 0 clamp(2rem, 1.515rem + 1.294vw, 4rem);
  align-items: center;
}
.cat-Area dt, .cat-Area dd {
  font-size: clamp(1.8rem, 1.46rem + 0.906vw, 3.2rem);
  font-weight: 700;
}
.cat-Area dd {
  color: var(--mainColor);
  position: relative;
  font-size: clamp(2.2rem, 1.86rem + 0.906vw, 3.6rem);
}
.cat-Area dd::before {
  content: "：";
  padding: 0 0.1em;
  color: var(--baseColor);
}
.body-news .card-row {
  margin-top: 5rem;
}
.content-header::after {
  z-index: -1;
}
.portfolio-item .card {
  border-radius: 12px;
  overflow: hidden;
}
.body-news .single-pager a {
  color: var(--mainColor);
}

/*=======================================================================

   MAYIM 新ヘッダ・フッタ（layout-mayim 刷新分）
   top.html / sub.html のデザインに合わせて追記

=======================================================================*/

/*-----------------------

      HEADER

-----------------------*/
.mayim-header {
  padding: 0 !important;
  position: relative;
}
/* PC上部バー（ロゴ＋カート＋ログイン） */
.mayim-header .pc > .hdr-inner {
  padding: 2.2rem 13rem 1.6rem 3.5rem;
  align-items: center;
}
.mayim-header .site-logo {
  margin: 0;
}
.mayim-header .site-logo img,
.mayim-header .drawer-nav p.logo img {
  width: auto;
  height: 6.2rem;
  max-width: none;
}
.mayim-header .right-Area {
  align-items: center;
  gap: 2.4rem;
}
/* カート */
.mayim-header .cart-area {
  position: relative;
  display: inline-flex;
  align-items: center;
  color: var(--mainColor);
}
.mayim-header .cart-area i {
  font-size: 2.4rem;
}
.mayim-header .cart-area .cart-count {
  position: absolute;
  top: -0.8rem;
  right: -1rem;
  min-width: 1.8rem;
  height: 1.8rem;
  padding: 0 0.4rem;
  background: var(--mainColor);
  color: #fff;
  border-radius: 1rem;
  font-size: 1.1rem;
  line-height: 1.8rem;
  text-align: center;
  font-family: "EB Garamond", serif;
}
/* Makeshopカート(SVGアイコン+件数バッジ) */
.mayim-header .cart-area.js-makeshop-cart {
  gap: 0.6rem;
  font-size: 1.4rem;
}
.mayim-header .cart-area.js-makeshop-cart svg {
  width: 2.4rem;
  height: 2.4rem;
  display: block;
}
.mayim-header .cart-area.js-makeshop-cart .cart-icon {
  position: relative;
  display: inline-flex;
}
/* ログイン */
.mayim-header p.login {
  margin: 0;
}
.mayim-header p.login a {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 1.5rem;
  color: var(--baseColor);
}
.mayim-header p.login img {
  width: 28px;
  height: 28px;
  border-radius: 50%;
}
/* ログイン時：ユーザーメニュー */
.mayim-header .mypage.loginBtn p {
  font-size: 1.5rem;
  color: var(--baseColor);
}
.mayim-header .mypage.loginBtn p span {
  margin-left: 0.4rem;
  color: var(--mainColor);
}
/* 名前部分はクリック可能なのでポインターに */
.mayim-header .linkG,
.mayim-header .mypage.loginBtn {
  cursor: pointer;
}
/* マイページメニュー：表示幅をコンテンツ幅に収め、背景をmainColorに */
.mayim-header .mypage-list {
  min-width: 0;
  width: max-content;
  max-width: 26rem;
}
.mayim-header .mypage-list::before {
  background: var(--mainColor);
  opacity: 0.95;
}

/* 検索＆カテゴリーバンド */
.mayim-header .search-band {
  width: 100%;
  left: auto;
  transform: none;
  position: relative;
  background: var(--main10Color);
  padding: 2.2rem 0 1.8rem;
}
.mayim-header .search-band-inner {
  max-width: 128rem;
  margin: 0 auto;
  padding: 0 3.5rem;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 2.4rem;
}
.mayim-header .search-col {
  flex: 0 1 46rem;
}
/* 検索フォーム */
.mayim-header .site-search.flex {
  flex-direction: row;
}
.mayim-header .site-search {
  align-items: center;
  background: #fff;
  border: 1px solid var(--main50Color);
  border-radius: 3rem;
  padding: 0.4rem 0.4rem 0.4rem 1.8rem;
  width: 100%;
}
.mayim-header .site-search .search-icon {
  display: flex;
  align-items: center;
  margin-right: 1rem;
}
.mayim-header .site-search .search-icon img {
  width: 2.2rem;
  height: 2.2rem;
}
.mayim-header .site-search input {
  flex: 1 1 auto;
  min-width: 0;
  border: none;
  background: transparent;
  font-size: 1.6rem;
  padding: 0.6rem 0;
  outline: none;
  color: var(--baseColor);
}
.mayim-header .site-search input::placeholder {
  color: var(--base50Color);
}
.mayim-header .site-search .search-btn {
  flex-shrink: 0;
  background: var(--mainColor);
  color: #fff;
  border: none;
  border-radius: 2.4rem;
  padding: 0.8rem 2.6rem;
  font-size: 1.5rem;
  letter-spacing: 0.1em;
  cursor: pointer;
}
.mayim-header .site-search .search-btn:hover {
  opacity: 0.85;
}
/* 人気ワード */
.mayim-header .popular-words {
  margin-top: 1rem;
  font-size: 1.3rem;
  line-height: 1.6;
  color: var(--baseColor);
}
.mayim-header .popular-words .label {
  font-weight: 600;
  margin-right: 0.5rem;
  color: var(--baseColor);
}
.mayim-header .popular-words a {
  color: var(--mainColor);
  margin-right: 1rem;
}
.mayim-header .popular-words a:hover {
  color: var(--mainColor);
}
/* PCカテゴリーボタン（学ぶ・繋がる・買う） */
.mayim-header .category-btns {
  flex: 0 0 auto;
  gap: 1.2rem;
  align-items: center;
}
.mayim-header .category-btns li a {
  display: block;
}
.mayim-header .category-btns li a img {
  height: 6.6rem;
  width: auto;
  display: block;
  transition: opacity 0.3s;
}
.mayim-header .category-btns li a:hover img {
  opacity: 0.85;
}
/* MENUハンバーガー（文字色のみ。サイズ・位置・線は末尾のメディアクエリで指定） */
.mayim-header .drawer-hamburger .text {
  color: var(--mainColor);
  letter-spacing: 0.1em;
}

/*-----------------------

      SP HEADER

-----------------------*/
@media screen and (max-width:559px) {
  .mayim-header .sp .hdr-inner.flex {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    min-height: 6.4rem;
    padding: 0 6.4rem 0 1.6rem;
  }
  .mayim-header .sp .site-logo img {
    height: 4.4rem;
  }
  .mayim-header .sp .right-Area.flex {
    flex-direction: row;
    align-items: center;
    gap: 1.8rem;
    margin: 0;
  }
  .mayim-header .sp .cart-area {
    flex-direction: row;
    position: relative;
    top: 3px;
  }
  .mayim-header .sp .cart-area i {
    font-size: 2rem;
  }
  .mayim-header .sp p.login {
    display: flex;
    align-items: center;
  }
  .mayim-header .sp p.login a {
    display: flex;
    align-items: center;
  }
  .mayim-header .sp p.login img {
    width: 26px;
    height: 26px;
  }
  /* MENU：3本線をカート/アバターと縦中央で揃える */
  .mayim-header .sp .drawer-hamburger {
    top: 1.5rem !important;
  }
  /* SP：ログイン時アバター（マイページアイコン）の不要な枠線・余白を除去し中央寄せ */
  .mayim-header .sp .right-Area .linkG {
    align-items: center;
  }
  .mayim-header .sp .right-Area .mypage.loginBtn {
    border: none;
    margin: 0;
    padding: 0;
  }
  .mayim-header .sp .right-Area .mypage.loginBtn img {
    margin: 0;
  }
  /* SP上部バー：アバター直下に右寄せ表示（画面外にはみ出さない） */
  .mayim-header .sp .right-Area .mypage-list {
    top: 3.8rem;
    left: auto;
    right: 0;
  }
  /* SPドロワー：名前の直下に左寄せ表示（名前と位置を揃える） */
  .mayim-header .sp .drawer-nav .mypage-list {
    top: 3.8rem;
    left: 0;
    right: auto;
  }
  /* ドロワー内の名前ブロック：全幅・左寄せ。区切り線は全幅で表示 */
  .mayim-header .sp .drawer-nav .linkG {
    justify-content: flex-start;
    width: 100%;
    border-bottom: solid 1px #323232;
    padding-bottom: 1rem;
    margin-bottom: 2rem;
  }
  /* 名前自体の短い区切り線・余白は除去（線はlinkG側で全幅表示） */
  .mayim-header .sp .drawer-nav .mypage.loginBtn {
    border: none;
    margin: 0;
  }
  /* SPカテゴリータブ */
  .mayim-header .sp-category-tabs.flex {
    flex-direction: row;
    gap: 0;
  }
  .mayim-header .sp-category-tabs li {
    flex: 1 1 0;
  }
  .mayim-header .sp-category-tabs li a {
    display: block;
  }
  .mayim-header .sp-category-tabs li a img {
    width: 100%;
    height: auto;
    display: block;
  }
  /* SP検索 */
  .mayim-header .sp-search {
    padding: 1.4rem 4% 1.6rem;
    background: var(--main10Color);
  }
  .mayim-header .sp-search .popular-words {
    margin-top: 0.8rem;
  }
  .mayim-header .sp-search .popular-words a {
    margin-right: 0.8rem;
  }
}

/* ドロワー内サブメニュー（PC/SP共通）
   色はmainColorに統一（PC既定のグレー半透明::beforeは無効化）。
   ドロップダウン式のまま、表示位置を「親項目の直下・左揃え」に統一する */
header.mayim-header .drawer-nav .drawer-menu li {
  position: relative;
}
header.mayim-header .drawer-nav .drawer-menu li ul.sub-menu {
  display: none;
  position: absolute;
  top: calc(100% + 0.4rem);
  left: 0;
  transform: none;
  z-index: 10;
  width: max-content;
  min-width: 100%;
  margin: 0;
  padding: 0.4rem 2.4rem 1rem;
  background: var(--mainColor);
  border-radius: 0.8rem;
  white-space: nowrap;
}
/* PC(.navi)のグレー半透明ボックスは無効化（背景は出さない）しつつ、
   親リンクとサブメニューの間の隙間(top: 100% + 0.4rem)でホバーが切れて
   閉じてしまうのを防ぐ「透明ホバーブリッジ」に転用する。 */
header.mayim-header .drawer-nav .navi li ul.sub-menu::before {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  right: 0;
  top: -0.8rem;
  height: 0.8rem;
  background: transparent;
}
/* 開いた状態（クリックで a.on が付く。PCはhoverでも開く既存挙動を踏襲） */
header.mayim-header .drawer-nav .drawer-menu li a.on + ul.sub-menu,
header.mayim-header .drawer-nav .navi li:hover ul.sub-menu {
  display: block;
  visibility: visible;
  opacity: 1;
}
header.mayim-header .drawer-nav .drawer-menu li ul.sub-menu li a {
  display: block;
  padding: 1.4rem 0 1.2rem;
  color: #fff;
  letter-spacing: 0.05em;
  font-size: 1.6rem;
  text-align: center;
}
header.mayim-header .drawer-nav .drawer-menu li ul.sub-menu li {
  border-bottom: 1px dashed #fff;
}
header.mayim-header .drawer-nav .drawer-menu li ul.sub-menu li:last-child {
  border-bottom: none;
}
/* SPはliがドロワー全幅のため、min-width:100%だと巨大化する。内容サイズに抑える */
@media screen and (max-width:559px) {
  header.mayim-header .drawer-nav .drawer-menu li ul.sub-menu {
    min-width: 0;
    padding: 0.4rem 3rem 1rem;
  }
}
/* PC：子メニュー持ちli(.hover)はli自体にもpadding(2.5rem 0 1rem)が入り
   aのpaddingと二重になって行間が広がるため打ち消す */
header.mayim-header .pc .drawer-nav .drawer-menu li.hover {
  padding: 0;
}

/* SP下部固定ナビ */
.sp-fixed-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  /* staging の body.skin-staging nav { background-color: transparent } に勝つため !important */
  background: var(--mainColor) !important;
  border-top: none;
  z-index: 999;
  box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.1);
}
.sp-fixed-nav ul.flex {
  flex-direction: row;
  justify-content: space-around;
  margin: 0;
  padding: 0;
}
.sp-fixed-nav li {
  flex: 1 1 0;
}
.sp-fixed-nav li a {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 1.3rem 0 1.2rem;
  color: var(--main50Color);
}
.sp-fixed-nav li.active a {
  color: #fff;
}
/* 現在ページのアイコンを白く（HTMLのactiveはホーム固定のため、bodyクラスでページ判別して上書き）
   ナビの並び順依存: 1=ホーム 2=チャット 3=アーカイブ 4=カレンダー 5=ショップ */
body.body-school-list .sp-fixed-nav li.active a,
body.body-shelf-list .sp-fixed-nav li.active a,
body.body-calendar .sp-fixed-nav li.active a,
body.body-shop .sp-fixed-nav li.active a {
  color: var(--main50Color);
}
body.body-school-list .sp-fixed-nav li:nth-child(2) a, /* チャット(/mypage/group/chat) */
body.body-shelf-list .sp-fixed-nav li:nth-child(3) a,  /* アーカイブ(/shelf/list/archive) */
body.body-calendar .sp-fixed-nav li:nth-child(4) a,    /* カレンダー(/calendar) */
body.body-shop .sp-fixed-nav li:nth-child(5) a {       /* ショップ(/shop/...) */
  color: #fff;
}
.sp-fixed-nav li a i {
  font-size: 2.3rem;
}
.sp-fixed-nav li a span {
  font-size: 1.05rem;
  letter-spacing: 0;
  line-height: 1;
}
/* 共通navの区切り「/」を下部固定ナビでは無効化 */
.sp-fixed-nav ul > li a::after {
  content: none !important;
  display: none !important;
  padding: 0 !important;
}
@media screen and (max-width:559px) {
  /* 下部固定ナビ(.sp-fixed-nav 高さ約6.4rem)に隠れないよう、本文末尾に余白を確保 */
  body {
    padding-bottom: 8rem !important;
  }
}

/*-----------------------

      FOOTER

-----------------------*/
.mayim-footer {
  padding: 5rem 0 0;
  margin-top: 6rem;
  border-top: none;
}
.mayim-footer .ftr-jar {
  margin-bottom: 2.5rem;
}
.mayim-footer .ftr-jar img {
  width: 15rem;
  height: auto;
}
.mayim-footer .ftr-navi ul {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0;
  padding: 0;
  margin: 0 0 0.6rem;
  list-style: none;
}
.mayim-footer .ftr-navi li {
  position: relative;
  display: inline-block;
  padding: 0 1.6rem;
  margin: 0.3rem 0;
}
.mayim-footer .ftr-navi li:not(:last-child)::after {
  content: "|";
  position: absolute;
  right: 0;
  top: 0;
  color: var(--base50Color);
}
.mayim-footer .ftr-navi a {
  font-size: 1.4rem;
  color: var(--baseColor);
}
.mayim-footer .ftr-navi a:hover {
  color: var(--mainColor);
}
footer.mayim-footer p.copy {
  padding: 0.4rem 0 2rem;
}
.mayim-footer .copy small {
  font-family: "EB Garamond", serif;
  font-size: 1.4rem;
  font-weight: 400;
  letter-spacing: 0.12em;
  color: var(--main50Color);
}
.mayim-footer .copylight {
  color: var(--main50Color) !important;
}

/* ヘッダ・フッタ レスポンシブ */
@media screen and (max-width:1024px) {
  .mayim-header .pc > .hdr-inner {
    padding: 1.6rem 9rem 1.4rem 2rem;
  }
  .mayim-header .category-btns li a img {
    height: 5.2rem;
  }
  .mayim-header .search-col {
    max-width: 36rem;
  }
}
@media screen and (max-width:559px) {
  .mayim-footer .ftr-jar img {
    width: 17rem;
  }
  .mayim-footer .ftr-navi ul {
    display: flex;
  }
  .mayim-footer .ftr-navi li {
    display: inline-block;
  }
  .mayim-footer .copy small {
    font-size: 1.2rem;
  }
  footer.mayim-footer p.copy {
    padding-bottom: 0;
  }
}

/* ===== ハンバーガー：モック(top.html)の見た目に合わせる =====
   配信 style.css の旧ブロック(block2)が 色/太さ/幅/位置/装飾 を旧デザインに上書き
   している（モックには無い）ため、ここで打ち消す。
   SP・タブレットは sp.css（配信＝モックで内容同一）に委譲し、
   ここでは「全幅共通の打ち消し」＋「PC/タブレット固有値」だけを指定する。 */

/* 背面のティール四角（旧装飾）を消す ― 全幅 */
.mayim-header button.drawer-toggle.drawer-hamburger::after {
  content: none !important;
  display: none !important;
}
/* 線：中央線は非表示（上下2本）、アイコン幅100%・左右上下のずれを解除
   （block2 の width:80%/60%・margin auto・SPの top/left ずれを打ち消す）― 全幅 */
.mayim-header .drawer-hamburger-icon {
  background-color: transparent !important;
  width: 100% !important;
  left: 0 !important;
  top: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}
/* 上下線はティール ― 全幅 */
.mayim-header .drawer-hamburger-icon::before,
.mayim-header .drawer-hamburger-icon::after {
  background-color: var(--mainColor) !important;
}
/* 下線は閉じている時のみ80%幅（開いた時のXは style.css のアニメに任せる）― 全幅 */
body:not(.drawer-open) .mayim-header .drawer-hamburger-icon::after {
  width: 80% !important;
}

/* PC・タブレット(560px〜)：線の太さ0.5rem＋アイコン上マージン（モック=drawer既定）。
   SP(〜559px)は sp.css の 0.3rem / margin-top:0 をそのまま使う */
@media screen and (min-width:560px) {
  .mayim-header .drawer-hamburger-icon,
  .mayim-header .drawer-hamburger-icon::before,
  .mayim-header .drawer-hamburger-icon::after {
    height: 0.5rem !important;
  }
  .mayim-header .drawer-hamburger-icon {
    margin-top: 1rem !important;
  }
}

/* PC(>1024px)：モックのボタンサイズ・位置（右端の見切れ防止 right:4rem 含む）、
   MENU文字位置、開いた時の右余白（ログイン名と×の重なり防止） */
@media screen and (min-width:1025px) {
  .mayim-header .drawer-hamburger {
    width: 6rem !important;
    height: 2rem !important;
    right: 4rem !important;
    top: 1.7rem !important;
  }
  .mayim-header .drawer-hamburger .text {
    margin-top: 1.6rem !important;
  }
  .drawer-open .mayim-header .drawer-nav {
    padding-right: 14rem !important;
  }
}
/* タブレット(560〜1024px)：右端の見切れ防止（style.css の right:0 打ち消し） */
@media screen and (min-width:560px) and (max-width:1024px) {
  .mayim-header .drawer-hamburger {
    right: 2rem !important;
  }
}
/* SP(〜559px)：サイズ・太さは sp.css（モックと同一）に委譲。
   右位置だけ、×が右端に寄りすぎないよう少し左へ寄せる（数値は調整可） */
@media screen and (max-width:559px) {
  .mayim-header .drawer-hamburger {
    right: 1.5rem !important;
  }
}

/*-----------------------

      トップ メインスライダー（page-list 動的・Swiper）
      モックの slick（centerMode / centerPadding:22% / 矢印は両脇 / ドット下）を再現

-----------------------*/
.l_top_slider {
  margin-top: 3rem;
  padding-bottom: 6rem;   /* スライダー下のドット(bottom:-3.5rem)分の余白 */
}
.l_top_slider .top_slider_wrap {
  position: relative;
}
.l_top_slider .swiper {
  position: relative;     /* 矢印・ドットの絶対配置の基準 */
  overflow: hidden;
}
.l_top_slider .swiper-slide a {
  display: block;
}
/* スライド画像：全て同じ高さに固定（フォールバック比率差でドットがズレるのを防ぐ） */
.l_top_slider .swiper-slide img {
  width: 100%;
  aspect-ratio: 700 / 400;
  height: auto;
  object-fit: cover;
  border-radius: 0.8rem;
  display: block;
}
/* センター以外のスライドは少し控えめに */
.l_top_slider .swiper-slide {
  opacity: 0.45;
  transition: opacity 0.4s ease;
}
.l_top_slider .swiper-slide-active {
  opacity: 1;
}
/* 矢印：両脇(18%)・メインカラーの丸ボタン。FontAwesomeで矢印を描き、swiper既定CSSに依存しない */
.l_top_slider .swiper-button-prev,
.l_top_slider .swiper-button-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  margin: 0;
  width: 5rem;
  height: 5rem;
  border-radius: 50%;
  background: var(--mainColor);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 20;
  cursor: pointer;
}
.l_top_slider .swiper-button-prev { left: 18%; }
.l_top_slider .swiper-button-next { right: 18%; }
/* 矢印アイコンはCSSの境界線で描画（フォント依存なしで確実に白い ‹ › を表示） */
.l_top_slider .swiper-button-prev::after,
.l_top_slider .swiper-button-next::after {
  content: "";
  display: block;
  width: 1.3rem;
  height: 1.3rem;
  border-top: 0.3rem solid #fff;
  border-right: 0.3rem solid #fff;
}
.l_top_slider .swiper-button-prev::after {
  transform: rotate(-135deg);
  margin-left: 0.5rem;
}
.l_top_slider .swiper-button-next::after {
  transform: rotate(45deg);
  margin-right: 0.5rem;
}
/* ドット：スライダーのすぐ下・中央・小さめ（モックの slick-dots bottom:-3.5rem 相当） */
.l_top_slider .swiper-pagination {
  position: absolute;
  bottom: -3.5rem;
  left: 0;
  width: 100%;
  text-align: center;
  line-height: 1;
}
.l_top_slider .swiper-pagination-bullet {
  display: inline-block;
  width: 0.8rem;
  height: 0.8rem;
  margin: 0 0.5rem;
  border-radius: 50%;
  opacity: 0.4;
  background: var(--mainColor);
}
.l_top_slider .swiper-pagination-bullet-active {
  opacity: 1;
  background: var(--mainColor);
}
@media screen and (max-width:559px) {
  .l_top_slider {
    margin-top: 0;
    padding-bottom: 5rem;
  }
  /* SPは1枚ぴったり・両脇の減光なし・角丸なし・矢印なし */
  .l_top_slider .swiper-slide {
    opacity: 1;
  }
  .l_top_slider .swiper-slide img {
    border-radius: 0;
  }
  .l_top_slider .swiper-button-prev,
  .l_top_slider .swiper-button-next {
    display: none;
  }
}

/*-----------------------

      カレンダー（l_calender）

-----------------------*/
/* 見出し（カレンダー）の上下の余白を揃える。
   下側＝.calender_area の margin-top: clamp(3rem … 6rem) と同じ値を上の padding-top に入れる。
   style.css の .l_calender { padding-top: clamp(8rem … 16rem) } を上書き（後勝ち） */
.l_calender {
  padding-top: clamp(3rem, 2.2718446602rem + 1.9417475728vw, 6rem);
}
/* SP：style.css の .container / .container,.wrapper の padding:0 6% を、
   カレンダーのコンテナだけ打ち消して全幅にする（.container は共通クラスのためスコープ必須）。
   .container は親ページと iframe 内で二重にネストしているため padding が2回効いている。
   ・親ページ側 ........ .l_calender > .container
       └ あわせて .l_calender 自体を負マージンで画面端まで広げる。PCは横長になりすぎるためSP限定。
   ・iframe(カレンダー)内 .iframe-calendar-body .container
       └ iframe内の中身は <div class="container iframe-container">（layout-iframe）。
         common.css の .iframe-container{padding:0} は style.css より先に読まれて負けるため打ち消しが必要。
         overwrite.css は iframe側でも読み込み済み(mayim header_css)。iframe内に .l_calender は無いので
         html.iframe-calendar-body でスコープする。 */
@media screen and (max-width: 559px) {
  .l_calender {
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
  }
  .l_calender > .container {
    max-width: none;
    width: 100%;
    padding: 0;
    margin: 0;
  }
  .iframe-calendar-body .container {
    padding: 0;
  }
}
/* PCのみ：カレンダーiframeの下に余白が多く出る対策。
   iframe高さはJS(iframe/calendar.html の listSetting)で「内容のscrollHeight + 50px」に設定されるが、
   インラインの min-height:600px が下限になり、PCは月グリッドが横長＝低くなるため
   「内容+50 < 600px」となり差分がそのまま下余白になる。PCは min-height を解除して内容にフィットさせる。
   SP(≤559px)はグリッドが縦長で600pxを超えるため、従来どおり600pxの下限を維持する。 */
@media screen and (min-width: 560px) {
  .l_calender .iframe-calendar {
    min-height: 0 !important;
  }
}

/* mayim カレンダー(iframe)：Googleカレンダー風のゴシック体にし、文字を少し小さめに。
   overwrite.css は iframe側でも読み込み済み(mayim header_css)。iframeのhtmlに .iframe-calendar-body。
   本文がShippori Mincho(明朝)になるため、カレンダーだけゴシックへ上書き(!important)。 */
.iframe-calendar-body,
.iframe-calendar-body *:not(.fa):not(.fas):not(.far):not(.fab):not(.glyphicon):not([class*="fa-"]):not([class*="glyphicon-"]) {
  font-family: "Roboto", "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", "Meiryo", sans-serif !important;
}
/* 少し小さめ（FullCalendar の基準フォントを縮小＝タイトル/日付/予定に波及） */
.iframe-calendar-body .fc {
  font-size: 12px;
}
.iframe-calendar-body .fc-list-item-title,
.iframe-calendar-body .fc-list-item-title a,
.iframe-calendar-body .fc-list-item-time,
.iframe-calendar-body .fc-content,
.iframe-calendar-body .fc-title {
  font-size: 12px;
}

/* イベントの表示行数を固定する。時刻と残数バッジ（受付終了など）は
   calendar-common.html 側で mayim のみ非表示にしているため、講座名だけが入る。
   はみ出しは「…」を出さずに切りたいので -webkit-line-clamp は使わず max/height で切る。
   line-height を em 指定にしているのでフォントサイズを変えても2行分の高さは追従する。
   font-feature-settings: normal は body の palt を解除するための指定。
   palt はかな・カタカナだけを詰めるため、解除しないと文字種で1行に入る文字数が変わる。 */
.iframe-calendar-body .fc-day-grid-event .fc-content {
  line-height: 1.35em;
  height: 2.7em;
  overflow: hidden;
  font-feature-settings: normal;
  letter-spacing: 0;
}

/* 受付終了などのイベントは薄く表示する。
   calendar-events-zan は calendar-common.html の eventRender で付与している。 */
.iframe-calendar-body .calendar-events-zan {
  opacity: 0.5;
}

/*-----------------------

      お知らせ（news-section・page-list 動的）

-----------------------*/
/* カテゴリー色（タブ・バッジ共通）。CMS本文のリンク色に負けないよう !important */
.cat-news  { background: #8E7CC4; color: #fff !important; }            /* お知らせ */
.cat-live  { background: #E8412E; color: #fff !important; }            /* Live */
.cat-event { background: #F2C200; color: var(--baseColor) !important; }/* イベント */
.cat-new   { background: var(--mainColor); color: #fff !important; }   /* 新商品 */
.cat-talk  { background: #45AE5F; color: #fff !important; }            /* たいへんトーク */

.news-section {
  max-width: 92rem;
  margin: 2rem auto 0;
}
.cat-tabs {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: 0.6rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.cat-tabs li {
  flex: 0 1 auto;
}
.cat-tab {
  display: block;
  padding: 1.1rem 1.6rem 1rem;
  border-radius: 0.8rem 0.8rem 0 0;
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-align: center;
  white-space: nowrap;
  color: #fff !important;             /* 背景はデータのcolorをインライン指定。文字は白 */
  text-decoration: none !important;   /* CMS本文のリンク下線を除去 */
  transition: opacity 0.3s;
}
/* hover：文字色は変えず、わずかに濃く */
.cat-tab:hover { color: #fff !important; filter: brightness(0.94); }
.cat-event.cat-tab:hover { color: var(--baseColor) !important; }
/* アクティブタブは一段高くして目立たせる */
.cat-tab.is-active {
  padding-top: 1.9rem;
  box-shadow: 0 -3px 8px rgba(0, 0, 0, 0.12);
}

.news-list {
  list-style: none;
  margin: 0 0 4rem;
  padding: 0;
  border-top: 1px solid var(--base10Color);
}
.news-item {
  border-bottom: 1px solid var(--base10Color);
}
/* 行全体をアンカーに。リンク色・下線はCMS本文に負けないよう打ち消す */
.news-item > a {
  display: flex;
  align-items: center;
  gap: 2rem;
  padding: 1.6rem 1rem;
  color: var(--baseColor) !important;
  text-decoration: none !important;
}
.news-item > a:hover {
  opacity: 0.8;
}
/* データなし時も通常1行分（サムネ7rem＋上下padding）の高さを確保 */
.news-item--empty {
  display: flex;
  align-items: center;
  padding: 1.6rem 1rem;
  min-height: 10.2rem;
}
.news-thumb {
  flex: 0 0 auto;
  width: 11rem;
  height: 7rem;
  border-radius: 0.6rem;
  overflow: hidden;
}
.news-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.news-body {
  flex: 1 1 auto;
  min-width: 0;
}
.news-title {
  display: block;
  color: var(--baseColor) !important;
  font-size: 1.6rem;
  line-height: 1.6;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.news-date {
  display: block;
  margin-top: 0.6rem;
  font-size: 1.3rem;
  letter-spacing: 0.08em;
  color: var(--mainColor);
  font-family: "EB Garamond", serif;
}

/* すべて見るボタン */
.more-btn-wrap {
  text-align: center;
  margin: 4rem 0 0;
}
.more-btn {
  display: inline-flex;
  align-items: center;
  gap: 1.4rem;
  background: var(--mainColor);
  color: #fff !important;             /* CMS本文のリンク色に負けないよう強制 */
  padding: 1.4rem 4rem;
  border-radius: 3rem;
  font-size: 1.6rem;
  letter-spacing: 0.05em;
  text-decoration: none !important;   /* 下線除去 */
  transition: opacity 0.3s;
}
.more-btn:hover { color: #fff !important; filter: brightness(0.94); }
.more-btn i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 50%;
  background: #fff;
  color: var(--mainColor);
  font-size: 1.2rem;
}

@media screen and (max-width:559px) {
  .news-section { margin-top: 0.5rem; }
  /* カテゴリータブ：横スクロールできる帯状に */
  .cat-tabs {
    justify-content: flex-start;
    gap: 0;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: 0 -6%;
  }
  .cat-tabs::-webkit-scrollbar { display: none; }
  .cat-tabs li { flex: 1 0 auto; }
  .cat-tab { border-radius: 0; padding: 1.2rem 1.8rem; }
  .cat-tab.is-active { box-shadow: none; }
  /* お知らせリスト：タイトルは2行表示 */
  .news-thumb { width: 9rem; height: 6.4rem; }
  .news-item > a { gap: 1.4rem; padding: 1.4rem 0.2rem; }
  .news-item--empty { min-height: 9.2rem; padding: 1.4rem 0.2rem; }
  .news-title {
    white-space: normal;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    font-size: 1.5rem;
  }
}

/*-----------------------------タグ検索結果一覧（/tag/search/result, body-search）専用---------------------------*/
/* 見出しをモック(sub.html)準拠の中央寄せ・コンパクト表示にする。
   基底 .content-header の旧デザイン（左寄せ＋イラスト）を body-search 限定で打ち消す。
   ※ pickup-info の .page-list-pickup-info .content-header と同等の内容 */
.body-search .content-header {
  background: transparent;
  width: 100%;
  left: auto;
  transform: none;
  padding: 4rem 0 0;
  margin-bottom: clamp(3rem, 1.5rem + 4vw, 6rem);
}
/* タイトル背後のイラストは出さない */
.body-search .content-header::after {
  content: none;
}
.body-search .content-header .page-header {
  color: var(--mainColor);
  text-align: center;
  font-weight: 600;
  font-family: "Shippori Mincho B1", serif;
  padding-left: 0;
}
/* 英字（span.en）はモック同様、日本語に続けてインライン表示 */
.body-search .content-header .page-header span.en {
  display: inline;
  font-size: inherit;
  letter-spacing: inherit;
  font-family: "EB Garamond", serif;
  font-weight: 500;
  color: var(--main50Color);
}

/*-----------------------

      記事カードグリッド（page一覧 カスタムテンプレート mayim-info-list）

-----------------------*/
/* タイトル（content-header）のコンパクト表示は全ページ共通ルール側（COMMON）で対応 */
/* PC4列・Z字（左上から右へ、行ごとに折り返し）で並べる。
   「学ぶ」一覧／タグ検索結果／お知らせ一覧／イベント一覧／ライブ配信一覧で共通。
   タブレット幅（〜959px）は4列だと1枚が狭くなりすぎるので3列に落とす */
.card-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 3.2rem 2.4rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
@media screen and (max-width:959px) {
  .card-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}
.card-grid > li {
  min-width: 0;
}
/* カード全体をアンカーに。リンク色・下線は共通CSSに負けないよう打ち消す */
.article-card > a {
  display: block;
  color: var(--baseColor) !important;
  text-decoration: none !important;
}
.article-card > a:hover {
  opacity: 0.85;
}
.card-thumb {
  position: relative;
  display: block;
  aspect-ratio: 16 / 9;
  border-radius: 0.8rem;
  overflow: hidden;
}
.card-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* バッジ背景は管理画面のカテゴリー色をインライン指定（テンプレート側）。
   文字色はTOPのタブと同じカテゴリー色クラス（.cat-news / .cat-live / .cat-event / .cat-new / .cat-talk）に委ねる */
.cat-badge {
  position: absolute;
  top: 1rem;
  left: 1rem;
  padding: 0.4rem 1.4rem;
  border-radius: 0.4rem;
  background: #8E7CC4;
  color: #fff;
  font-size: 1.3rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  line-height: 1.4;
}
.card-title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-top: 1.2rem;
  font-size: 1.5rem;
  line-height: 1.6;
}
.card-date {
  display: block;
  margin-top: 0.6rem;
  font-size: 1.3rem;
  letter-spacing: 0.08em;
  color: var(--mainColor);
  font-family: "EB Garamond", serif;
}
@media screen and (max-width:559px) {
  /* カードグリッド：2カラム。SPは1枚あたりの幅が狭いので全体的に一段小さくする */
  .card-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 2.4rem 1.4rem;
  }
  .card-title {
    margin-top: 0.9rem;
    font-size: 1.2rem;
    line-height: 1.5;
  }
  .card-date {
    margin-top: 0.4rem;
    font-size: 1.1rem;
    letter-spacing: 0.04em;
  }
  .cat-badge {
    top: 0.6rem;
    left: 0.6rem;
    font-size: 1rem;
    padding: 0.2rem 0.8rem;
  }
  /* SPも右端まで来たら折り返す（1行に詰めて省略はしない） */
  .body-search .m-tagList__body {
    margin-top: 0.6rem;
  }
  .body-search .m-tagList__item {
    margin-right: 0.8rem;
  }
  .body-search .a-tag {
    font-size: 1rem;
  }
}

/*-----------------------

      ページネーション（page一覧 共通フラグメント cj-pagination）

-----------------------*/
.cj-pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 2rem;
  margin: 5rem 0 0;
  font-size: 1.5rem;
}
.cj-pagination__list {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.cj-pagination__list li a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.6rem;
  height: 3.6rem;
  border: 1px solid var(--main50Color);
  border-radius: 50%;
  background: #fff;
  color: var(--baseColor) !important;
  text-decoration: none !important;
  font-family: "EB Garamond", serif;
  font-size: 1.5rem;
  line-height: 1;
  transition: background 0.3s;
}
.cj-pagination__list li a:hover {
  background: var(--main10Color);
}
.cj-pagination__list li.is-current a {
  background: var(--mainColor);
  border-color: var(--mainColor);
  color: #fff !important;
  pointer-events: none;
}
.cj-pagination__list li.is-ellipsis span {
  display: inline-block;
  padding: 0 0.2rem;
  color: var(--base50Color);
  font-family: "EB Garamond", serif;
}
.cj-pagination__prev,
.cj-pagination__next {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--mainColor) !important;
  text-decoration: none !important;
  transition: opacity 0.3s;
}
.cj-pagination__prev:hover,
.cj-pagination__next:hover {
  opacity: 0.7;
}
.cj-pagination__prev.disabled,
.cj-pagination__next.disabled {
  color: var(--base50Color) !important;
  pointer-events: none;
}
@media screen and (max-width:559px) {
  .cj-pagination {
    gap: 1.2rem;
    margin-top: 3.6rem;
    font-size: 1.4rem;
  }
  .cj-pagination__list {
    gap: 0.6rem;
  }
  .cj-pagination__list li a {
    width: 3.2rem;
    height: 3.2rem;
    font-size: 1.4rem;
  }
}

/*-----------------------------タグ検索結果 バッジ絞り込みバー（.tag-filter）---------------------------*/
/* ジャンル絞り込み（.cat-Area li a / li.current a）と見た目を統一。
   未選択＝白地＋mainColor枠（アウトライン）／選択中（.is-active）＝mainColor塗り＋白文字。
   バッジ（.body-search .cat-badge）も同色・ピル型に揃える。 */
.tag-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin: 1.2rem 0 2.4rem;
}

/* サイズはカンプ（MAYIM様対応_20260817.xlsx）に合わせた小さめのピル。
   数値は他ページの絞り込み（.filter-btn）と揃えてUIを統一する。 */
.tag-filter__item {
  color: var(--mainColor);
  background: #fff;
  border: solid 1px var(--mainColor);
  border-radius: 3rem;
  font-weight: 500;
  font-size: 1.3rem;
  padding: 0.5rem 1.4rem;
  letter-spacing: 0.05em;
  line-height: 1.2;
  white-space: nowrap;
  cursor: pointer;
  text-decoration: none !important;
  transition: background-color .2s, color .2s;
}

/* 未選択hover：薄く色を載せる。文字色はグローバルの a:hover に負けないよう明示固定 */
.tag-filter__item:hover {
  background: var(--main10Color);
  color: var(--mainColor) !important;
}

.tag-filter__item.is-active {
  color: #fff !important;
  background: var(--mainColor);
  border-color: var(--mainColor);
}

/* 選択中hover：塗り（mainColor）＋白文字を維持 */
.tag-filter__item.is-active:hover {
  background: var(--mainColor);
  color: #fff !important;
}

/* タグ検索結果のバッジは mainColor・ピル型に（絞り込みフィルター／.cat-Area と統一）。
   お知らせ一覧(mayim-info-list)のバッジはジャンル色インライン指定のため .body-search で限定 */
.body-search .cat-badge {
  background: var(--mainColor);
  border-radius: 3rem;
}

/* カード下部のハッシュタグ（.m-tagList__body）はサムネ左上のバッジ（.cat-badge）と同じ配色に統一。
   カードリンク（.article-card > a）の外側に置かれているため、上に間隔を空けて別領域だと分かるようにする */
/* flexで並べるとカード幅に収まらないタグが1つずつ改行されて縦に伸びるため、
   「学ぶ」の一覧（.card-tags）と同じく文章と同じインラインの流れにして、右端で折り返す */
.body-search .m-tagList__body {
  display: block;
  margin-top: 1.2rem;
  line-height: 1.6;
}
.body-search .m-tagList__item {
  display: inline;
  margin: 0 1rem 0 0;
}
.body-search .a-tag__link {
  display: inline;
}
/* カード下部のタグは塗りつぶしのバッジだと主張が強すぎるので、文字だけのシンプルな見た目にする。
   サムネ左上の区分バッジ（.cat-badge）と役割が違うことが分かるようにする狙い。 */
.body-search .a-tag {
  display: inline;
  background: none;
  border: none;
  border-radius: 0;
  padding: 0;
  font-size: 1.2rem;
}
/* 共通CSS（common.css）の .a-tag / .a-tag__label は white-space: nowrap のため、
   長いタグがカード幅で折り返されずに隣のカードへはみ出す。カード幅で折り返させる */
.body-search .a-tag,
.body-search .a-tag__label {
  white-space: normal;
  word-break: break-word;
  overflow-wrap: anywhere;
}
.body-search .a-tag__label {
  display: inline;
  color: var(--mainColor);
}
.body-search .a-tag__link:hover .a-tag__label {
  color: var(--subColor);
}

@media screen and (max-width:559px) {
  .tag-filter {
    gap: 0.6rem;
  }
  /* SPは幅が狭くチップが折り返しだらけになるので、PCより一段小さくする */
  .tag-filter__item {
    font-size: 1.2rem;
    padding: 0.4rem 1.2rem;
  }
  .body-search .a-tag {
    font-size: 1.1rem;
    padding: 0;
  }
}

.news-badge {
  display: inline-block;
  margin-right: .4em;
  padding: .1em .5em;
  border-radius: 3px;
  background: #e8412e;
  color: #fff;
  font-size: .7em;
  font-weight: bold;
  vertical-align: middle;
}

.news-badge--thumb {
  position: absolute;
  top: 6px;
  left: 6px;
  margin: 0;
  z-index: 1;
}

/*========================================================
  ナビゲーター／メンバー画面（mayim専用・新規追加）
  対象: /navigator, /members （navigator.html / member.html）
  ※ .nav-modal 配下にスコープした独自モーダルスタイル（既存 .modalG 等とは別系統）
========================================================*/
/*-----------------------

      ナビゲーター一覧

-----------------------*/
.nav-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 4rem 2rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav-card {
  width: calc((100% - 6rem) / 4);
}
.nav-card > a {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.4rem;
  color: var(--baseColor);
  text-align: center;
  transition: opacity 0.3s;
}
.nav-card > a:hover { opacity: 0.82; }
.nav-photo {
  width: 100%;
  max-width: 16rem;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  overflow: hidden;
  background: var(--main10Color);
}
.nav-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.nav-name {
  font-size: 1.6rem;
  font-weight: 600;
  letter-spacing: 0.05em;
}

/*-----------------------

      プロフィールモーダル

-----------------------*/
body.nav-modal-open {
  position: fixed;
  left: 0;
  right: 0;
  width: 100%;
  overflow: hidden;
}
.nav-modal { display: none; }
.nav-modal.is-open { display: block; }
.nav-modal .modal__bg {
  background: var(--mainColor);
  opacity: 0.97;
  cursor: pointer;
}
.nav-modal .modal__content {
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 92%;
  max-width: 96rem;
  height: auto;
  max-height: 88vh;
  padding: 5rem;
  background: #fff;
  border-radius: 1.6rem;
  overflow-y: auto;
}
/* 既存（会員系デザイン）のモーダル用ルール（.modal__contentInner / .flex / .textArea-Wrap 等）が
   nav-modal のマークアップにも漏れて当たるため、nav-modal 配下だけ打ち消してモック準拠に戻す。
   既存ルール自体は他ページ（コラム/お知らせ等）のモーダルが使うため変更しない。 */
.nav-modal .modal__contentInner {
  width: auto;
  height: auto;
  padding: 0;
  border-radius: 0;
  overflow-y: visible;
}
.nav-modal .textArea-Wrap .textArea {
  line-height: 1.9;
}
.nav-modal .textArea-Wrap .link-btn {
  display: block;
  justify-content: flex-start;
  margin: 2.6rem 0 0;
}
.nav-modal .textArea-Wrap .snsG {
  margin: 2.6rem 0 0;
}
.nav-modal .textArea-Wrap .snsG ul {
  gap: 1.6rem;
}
.nav-modal .top-close {
  position: absolute;
  top: 1.6rem;
  right: 1.6rem;
  width: auto;
  height: auto;
  margin: 0;
  z-index: 2;
}
.nav-modal .top-close a { display: inline-block; }
.nav-modal .top-close img {
  width: 4.2rem;
  height: 4.2rem;
}
.nav-modal .modal-cont > .flex {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 4.5rem;
}
.nav-modal figure {
  flex: 0 0 auto;
  width: 34%;
  max-width: 32rem;
  margin: 0;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  overflow: hidden;
  background: var(--main10Color);
}
.nav-modal figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.nav-modal .textArea-Wrap {
  flex: 1 1 auto;
  min-width: 0;
}
.nav-modal .modal-ttl {
  font-family: "Shippori Mincho B1", serif;
  font-size: clamp(2.4rem, 1.7rem + 1.6vw, 3.6rem);
  font-weight: 600;
  letter-spacing: 0.1em;
  margin-bottom: 2rem;
}
.nav-modal .textArea {
  font-size: 1.5rem;
  line-height: 1.9;
  max-height: 42vh;
  overflow-y: auto;
}
.nav-modal .textArea p + p { margin-top: 1.5rem; }
.nav-modal .snsG ul {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 1.6rem;
  list-style: none;
  margin: 2.6rem 0 0;
  padding: 0;
}
.nav-modal .snsG img {
  width: 4.6rem;
  height: 4.6rem;
}
.nav-modal .link-btn {
  margin: 2.6rem 0 0;
}
.nav-modal .link-btn a {
  display: inline-block;
  padding: 1.2rem 3.2rem;
  border-radius: 3rem;
  color: #fff;
  font-size: 1.5rem;
  letter-spacing: 0.05em;
  transition: filter 0.3s;
}
.nav-modal .link-btn a:hover {
  color: #fff;
  filter: brightness(0.94);
}

/*-----------------------

      講師プロフィール（実データ）モーダル本文
      ※ ナビゲーター／イベント詳細で共通利用。プロフィールは Froala(.fr-view) を
        そのまま表示し中央寄せ。ホームページ導線（本文内の .link-btn）も中央に配置。

-----------------------*/
/* プロフィール本文（Froala）を中央寄せで表示 */
.teacher-modal .textArea.fr-view {
  text-align: center;
}
.teacher-modal .textArea.fr-view img {
  max-width: 100%;
  height: auto;
}
.teacher-modal .textArea.fr-view a {
  color: var(--mainColor);
}
/* 「ホームページはこちら」ボタン（本文内 .link-btn。.bg-main が無くてもボタン体裁になるよう既定色を付与） */
.teacher-modal .textArea.fr-view .link-btn {
  margin: 2.6rem 0 0;
  text-align: center;
}
.teacher-modal .textArea.fr-view .link-btn a {
  display: inline-block;
  padding: 1.2rem 3.2rem;
  border-radius: 3rem;
  background: var(--mainColor);
  color: #fff;
  font-size: 1.5rem;
  letter-spacing: 0.05em;
}
.teacher-modal .textArea.fr-view .link-btn a:hover {
  color: #fff;
  filter: brightness(0.94);
}

/*-----------------------

      メンバー（バッジ／コミュニティ情報）

-----------------------*/
.member-badge {
  display: inline-block;
  background: var(--mainColor);
  color: #fff;
  border-radius: 2rem;
  padding: 0.3rem 1.4rem;
  font-size: 1.2rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  line-height: 1.5;
}
.member-card > a {
  gap: 1rem;
}
.nav-modal.member-modal .member-badge {
  margin-bottom: 1rem;
}

/* ----- ナビゲーター／メンバー：SP（max-width:559px） ----- */
@media screen and (max-width:559px) {
  /* ナビゲーター一覧：SP 2カラム */
  .nav-grid {
    gap: 3rem 1.5rem;
  }
  .nav-card {
    width: calc((100% - 1.5rem) / 2);
  }
  .nav-name {
    font-size: 1.4rem;
  }
  /* プロフィールモーダル：SPは縦積み */
  .nav-modal .modal__content {
    width: 90%;
    padding: 4.5rem 2rem 3rem;
    max-height: 86vh;
  }
  .nav-modal .modal-cont > .flex {
    flex-direction: column;
    gap: 2rem;
    text-align: center;
  }
  .nav-modal figure {
    width: 17rem;
  }
  .nav-modal .textArea-Wrap {
    width: 100%;
    text-align: left;
  }
  .nav-modal .modal-ttl {
    text-align: center;
  }
  .nav-modal.member-modal .member-badge {
    display: table;
    margin-left: auto;
    margin-right: auto;
  }
  .nav-modal .snsG ul {
    justify-content: center;
  }
  .nav-modal .link-btn {
    text-align: center;
  }
  .nav-modal .top-close img {
    width: 3.4rem;
    height: 3.4rem;
  }
}

/* ----- メンバー：地域フィルター（member.html） ----- */
/* 地域フィルター */
.member-filter {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.6rem;
  list-style: none;
  margin: 0 0 4rem;
  padding: 0;
}
.filter-btn {
  border: 1px solid var(--main50Color);
  background: #fff;
  color: var(--mainColor);
  border-radius: 2.4rem;
  padding: 0.5rem 1.2rem;
  font-size: 1.3rem;
  font-weight: 600;
  letter-spacing: 0;
  white-space: nowrap;
  cursor: pointer;
  transition: background 0.3s, color 0.3s, border-color 0.3s;
}
.filter-btn:hover {
  background: var(--main10Color);
}
.filter-btn.is-active {
  background: var(--mainColor);
  color: #fff;
  border-color: var(--mainColor);
}

/* ----- メンバー：地域フィルター SP（max-width:559px） ----- */
@media screen and (max-width:559px) {
  /* 地域フィルター：SP */
  .member-filter {
    gap: 0.7rem;
    margin-bottom: 3rem;
  }
  .filter-btn {
    padding: 0.6rem 1.4rem;
    font-size: 1.2rem;
  }
}

/* ----- TOP：ナビゲーターバナー（page/top の「マイムのナビゲーターたち」ボタン） ----- */
.nav-more-wrap {
  margin-top: 3rem;
  text-align: center;
}
.nav-banner-link {
  display: inline-block;
  width: 100%;
  max-width: 60rem;
  transition: opacity 0.3s;
}
.nav-banner-link:hover {
  opacity: 0.85;
}
.nav-banner-link img {
  width: 100%;
  height: auto;
}

/* ----- メンバーマップ（member-map.html）：地図コンテナ／注記／顔写真ピン ----- */
/* メンバーマップ */
#member-map {
  width: 100%;
  height: 60rem;
  border-radius: 1rem;
  overflow: hidden;
  background: var(--main10Color);
}
#member-map img {
  max-width: none;
}
.member-map-note {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: 2rem;
  text-align: center;
  font-size: 1.5rem;
  line-height: 1.8;
  color: var(--base50Color);
}
.member-map-note code {
  font-family: monospace;
  color: var(--mainColor);
}
/* マップ上の丸枠 顔写真ピン */
.map-photo-pin {
  position: absolute;
  width: 44px;
  height: 44px;
  cursor: pointer;
}
.map-photo-pin img {
  width: 44px;
  height: 44px;
  max-width: none;
  border-radius: 50%;
  border: 3px solid var(--mainColor);
  object-fit: cover;
  background: #fff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
  display: block;
}
.map-photo-pin:hover img {
  border-color: var(--subColor);
}
/* マップ上の 数字（人数）ピン：同一都道府県に4名以上いる場合に写真の代わりに表示 */
.map-count-pin {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--mainColor);
  color: #fff;
  border: 3px solid #fff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
  font-size: 1.7rem;
  font-weight: bold;
  line-height: 1;
  cursor: pointer;
}
.map-count-pin:hover {
  background: var(--subColor);
}
/* 数字ピンタップで開く「その都道府県のメンバー一覧」ポップアップ（アイコン＋名前） */
.member-cluster-modal .cluster-ttl {
  text-align: center;
  margin-bottom: 2rem;
}
.member-cluster-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2rem 1.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.member-cluster-item {
  width: 9rem;
}
.member-cluster-item a {
  display: block;
  text-align: center;
  text-decoration: none;
  color: inherit;
}
.member-cluster-item .cluster-photo img {
  width: 7rem;
  height: 7rem;
  border-radius: 50%;
  border: 2px solid var(--mainColor);
  object-fit: cover;
  background: #fff;
  display: block;
  margin: 0 auto 0.6rem;
}
.member-cluster-item a:hover .cluster-photo img {
  border-color: var(--subColor);
}
.member-cluster-item .cluster-name {
  display: block;
  font-size: 1.3rem;
  line-height: 1.4;
}
/* 数字ピンで開く「一覧」パネル（完全自前・共有モーダル非依存）。JSで style.display を block/none 制御。
   この上に既存の詳細モーダル(.nav-modal z-index:9999)が重なる（＝一覧より前面に出る）。 */
.mm-list {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  z-index: 9000;
}
.mm-list__bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--mainColor);
  opacity: 0.97;
  cursor: pointer;
}
.mm-list__box {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 92%;
  max-width: 96rem;
  max-height: 88vh;
  overflow-y: auto;
  padding: 5rem;
  background: #fff;
  border-radius: 1.6rem;
}
.mm-list__close {
  position: absolute;
  top: 1.5rem;
  right: 1.5rem;
  margin: 0;
}
.mm-list__close a {
  display: inline-block;
}
.mm-list__close img {
  width: 44px;
  height: 44px;
  display: block;
}
.mm-list__ttl {
  text-align: center;
  margin-bottom: 2rem;
}

/* ----- メンバーマップ：SP（max-width:559px） ----- */
@media screen and (max-width:559px) {
  /* メンバーマップ：SP */
  #member-map {
    height: 46rem;
  }
}

/* mock地図：ピンを絶対配置するための基準（Google Maps非使用） */
#member-map { position: relative; }

/*====================================================================
  ライブ視聴（Zoom Web SDK / /live/join）フッタ崩れ対策
  --------------------------------------------------------------------
  Zoom Meeting SDK は #zmmtg-root 配下にツールバーを
    <footer class="footer main-footer">
  として描画する。これがサイト共通クラス main-footer を持つため、
  配信側 style.css の
    footer.main-footer { position: relative; padding: 5.5rem 0 3rem;
                         margin-top: clamp(9rem … 18rem); }
  （詳細度 0,1,1）が Zoom 既定の「画面下 position:fixed」に勝ってしまい、
  フッタが通常フローへ落ちてヘッダ直下（画面上部）に出る。
  overwrite.css は最後に読まれるので #zmmtg-root にスコープ（詳細度 1,1,1）
  して Zoom 既定の下部固定ツールバーへ戻す。
  ※ 余白は Zoom 内側(.footer__inner)が持つため footer 自体は 0 にする。
==================================================================== */
#zmmtg-root footer.main-footer {
  position: fixed !important;
  top: auto !important;
  bottom: 0 !important;
  left: 0 !important;
  right: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* メンバー画面・ナビゲーター・講師モーダル：no-image を円/枠内にフィット（画像全体を表示・切り取らない） */
.body-member .nav-photo,
.body-member .member-modal figure,
.body-navigator .nav-photo,
.teacher-modal figure {
  background-color: #23a8c4;
  /* no-img の teal と同色。上下の帯を画像に馴染ませる */
}

.body-member .nav-photo img.is-noimg,
.body-member .member-modal figure img.is-noimg,
.body-navigator .nav-photo img.is-noimg,
.teacher-modal figure img.is-noimg {
  object-fit: contain;
  /* 横長全体を表示（左右を切らない） */
}

/* ===== タグ検索結果：件数表示 ===== */
.body-search .search-count {
  margin: 6px 0 0;
  text-align: center;
  color: #68b8c6;
  font-size: 14px;
  letter-spacing: .04em;
}

.body-search .search-count__num {
  font-size: 18px;
  font-weight: 700;
  margin: 0 2px;
}

/* ===== 検索結果へ戻るフローティングボタン（右下・ホバーでラベル展開・白文字） ===== */
.search-back-fab {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 1000;
  display: inline-flex;
  align-items: center;
  height: 52px;
  padding: 0 14px;
  border-radius: 999px;
  background: #68b8c6;
  text-decoration: none;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .18);
  transition: padding .25s ease, background .2s ease;
  white-space: nowrap;
}

/* リンク色に負けないよう文字色を白で明示 */
.search-back-fab,
.search-back-fab:link,
.search-back-fab:visited,
.search-back-fab:hover,
.search-back-fab:active {
  color: #fff;
}
/* 申込フォーム(form.css の .body-form-detail a:not(header a, footer a, .sns-detail a))の
   下線・リンク色は詳細度が上のため、IDで打ち消す */
#searchBackFab {
  color: #fff;
  text-decoration: none;
}

.search-back-fab:hover {
  background: #57a9b9;
  padding-right: 22px;
}

.search-back-fab__icon {
  display: inline-flex;
  width: 24px;
  height: 24px;
  flex: 0 0 auto;
  color: #fff;
}

.search-back-fab__icon svg {
  width: 24px;
  height: 24px;
  display: block;
}

.search-back-fab__label {
  color: #fff;
  max-width: 0;
  overflow: hidden;
  opacity: 0;
  font-size: 14px;
  letter-spacing: .04em;
  transition: max-width .25s ease, opacity .25s ease, margin .25s ease;
}

.search-back-fab:hover .search-back-fab__label {
  max-width: 180px;
  opacity: 1;
  margin-left: 8px;
}

/* スマホは矢印のみの丸ボタン（横幅を取らない）。ボトムナビに被らないよう上げる */
@media (max-width:559px) {
  .search-back-fab {
    right: 16px;
    bottom: 76px;
    width: 48px;
    height: 48px;
    padding: 0;
    justify-content: center;
  }

  .search-back-fab:hover {
    padding: 0;
    background: #68b8c6;
  }

  /* SPはラベルを出さず矢印のみ */
  .search-back-fab__label,
  .search-back-fab:hover .search-back-fab__label {
    max-width: 0;
    opacity: 0;
    margin-left: 0;
  }
}

/* メンバー一覧：件数 */
.body-member .search-count {
  margin: 6px 0 0;
  text-align: center;
  color: #68b8c6;
  font-size: 14px;
  letter-spacing: .04em;
}

.body-member .search-count__num {
  font-size: 18px;
  font-weight: 700;
  margin: 0 2px;
}

/* メンバー：所在地（都道府県＋市区町村） */
.body-member .member-loc {
  display: block;
  margin-top: 4px;
  color: #888;
  font-size: 12px;
  letter-spacing: .02em;
}

.body-member .member-modal .member-loc {
  margin: 2px 0 8px;
  text-align: left;
  color: #777;
}

/* メンバー詳細：フリースペース内リンクをメインカラーに（/members・/member-map 共通） */
.body-member .member-modal .textArea a,
.body-member .member-modal .textArea a:link,
.body-member .member-modal .textArea a:visited,
.body-member-map .member-modal .textArea a,
.body-member-map .member-modal .textArea a:link,
.body-member-map .member-modal .textArea a:visited {
  color: #68b8c6;
}

.body-member .member-modal .textArea a:hover,
.body-member-map .member-modal .textArea a:hover {
  color: #57a9b9;
}

/* ==================================================================
   サロン詳細（閲覧専用レイアウト / salon-detail-mayim）
   ================================================================== */

.body-salon-detail .salon-mayim {
  max-width: 880px;
  margin: 0 auto;
  padding: 0 16px;
}

/* 詳細本文 */
.body-salon-detail .salon-mayim__detail {
  color: #444;
  font-size: 15px;
  line-height: 2;
  letter-spacing: .04em;
}

.body-salon-detail .salon-mayim__detail img,
.body-salon-detail .salon-mayim__detail iframe,
.body-salon-detail .salon-mayim__detail video {
  max-width: 100%;
}

.body-salon-detail .salon-mayim__detail img {
  height: auto;
}

/* 参加導線ブロック */
.body-salon-detail .salon-mayim__join {
  margin-top: 48px;
  padding: 32px 24px;
  border-radius: 16px;
  background: linear-gradient(180deg, #f6fcfd 0%, #e9f5f8 100%);
  text-align: center;
}

.body-salon-detail .salon-mayim__detail:empty + .salon-mayim__join,
.body-salon-detail .salon-mayim__join:first-child {
  margin-top: 0;
}

/* 参加ボタン */
.body-salon-detail .salon-join-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 360px;
  min-height: 62px;
  padding: 0 56px;
  border-radius: 999px;
  background: #68b8c6;
  box-shadow: 0 8px 20px rgba(104, 184, 198, .35);
  text-decoration: none;
  transition: background .2s ease, box-shadow .2s ease, transform .2s ease;
}

/* リンク色に負けないよう文字色を白で明示 */
.body-salon-detail .salon-join-btn,
.body-salon-detail .salon-join-btn:link,
.body-salon-detail .salon-join-btn:visited,
.body-salon-detail .salon-join-btn:hover,
.body-salon-detail .salon-join-btn:active {
  color: #fff;
  text-decoration: none;
}

.body-salon-detail .salon-join-btn:hover {
  background: #57a9b9;
  box-shadow: 0 12px 26px rgba(104, 184, 198, .45);
  transform: translateY(-2px);
}

.body-salon-detail .salon-join-btn:active {
  transform: translateY(0);
  box-shadow: 0 6px 14px rgba(104, 184, 198, .35);
}

.body-salon-detail .salon-join-btn__icon {
  position: absolute;
  left: 24px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 20px;
  line-height: 1;
  opacity: .9;
}

.body-salon-detail .salon-join-btn__label {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: .08em;
  line-height: 1.4;
}

.body-salon-detail .salon-join-btn__arrow {
  position: absolute;
  right: 24px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 20px;
  line-height: 1;
  transition: transform .2s ease;
}

.body-salon-detail .salon-join-btn:hover .salon-join-btn__arrow {
  transform: translate(4px, -50%);
}

/* 非活性（同じ地域のタグを持たない会員） */
.body-salon-detail .salon-join-btn.is-disabled,
.body-salon-detail .salon-join-btn.is-disabled:hover {
  background: #cfdcdf;
  box-shadow: none;
  color: #fff;
  cursor: not-allowed;
  transform: none;
}

.body-salon-detail .salon-join-btn.is-disabled .salon-join-btn__icon {
  font-size: 17px;
  opacity: .8;
}

.body-salon-detail .salon-join-locked {
  margin: 14px 0 0;
  color: #8fa5a9;
  font-size: 12px;
  line-height: 1.8;
  letter-spacing: .04em;
  text-align: center;
}

/* 入会済み会員向けフッタ（コンテンツ棚・退会） */
.body-salon-detail .salon-member-footer {
  max-width: 880px;
  margin: 0 auto;
  padding: 32px 16px 0;
  border-top: none;
  text-align: center;
}

@media screen and (max-width: 767px) {
  .body-salon-detail .salon-mayim {
    padding: 0 12px;
  }

  .body-salon-detail .salon-mayim__detail {
    font-size: 14px;
    line-height: 1.9;
  }

  .body-salon-detail .salon-mayim__join {
    margin-top: 32px;
    padding: 28px 16px 24px;
    border-radius: 12px;
  }

  .body-salon-detail .salon-join-btn {
    max-width: 100%;
    min-height: 56px;
    padding: 0 48px;
  }

  .body-salon-detail .salon-join-btn__icon,
  .body-salon-detail .salon-join-btn__arrow {
    left: 18px;
    font-size: 18px;
  }

  .body-salon-detail .salon-join-btn__arrow {
    left: auto;
    right: 18px;
  }

  .body-salon-detail .salon-join-btn__label {
    font-size: 15px;
    letter-spacing: .04em;
  }
}

/*========================================================
  イベント詳細（mayim専用・カスタムテンプレ）
  対象: event/template/event-detail-mayim.html
  ※上部サムネ＋タイトルすっきり。講師プロフィールは .nav-modal
    （ナビゲーター／メンバー画面と同系統）を流用して表示。
========================================================*/
/* 上部（バナー・タイトル・日程・概要）は「学ぶ」詳細と同じ archive-detail 系のクラスを流用するため、
   イベント専用の .event-mayim-thumb / .event-mayim-header は廃止した。
   幅だけは申込フォームと並びを揃えたいので、ここで .archive-detail の最大幅に合わせる。
   position/z-index: 後続の section.content（position:relative; z-index:1）が上に食い込んで
   透明な箱がタグ（.archive-tags）のクリックを奪うため、ヘッド側を前面に出す。
   （概要が無いイベントでタグが押せない・カーソルが指にならない対策） */
.body-event-detail-mayim .event-mayim-head {
  position: relative;
  z-index: 2;
  padding: 0 1.6rem;
}

/* 講師プロフィールを開くリンク（モーダルトリガー） */
.body-event-detail-mayim .js-modal-open {
  cursor: pointer;
}

/* SNS共有ボタン（common/sns-share の .sns-detail）は全体で非表示 */
.sns-detail {
  display: none;
}

/* ==================================================================
   コミュニティ系サブナビ（layout-mayim の .community-nav）
   繋がる帯の直下に表示する横並びの吹き出しバー。ボタンは webp 画像をやめ、
   CSS（水彩テクスチャ）＋インラインSVGアイコン＋文字で描いている。
   対象5ページでのみJSが表示し、自ページのボタンには .is-current（選択中の配色）が付く。
   ================================================================== */

/* 全幅の薄紫バー。JSで display を戻して表示（初期は inline style で none）。
   ※ staging限定の `body.skin-staging nav { background-color: transparent }`（nav全体リセット・詳細度が上）に
     負けて背景が消えるため、背景は !important で明示する。 */
.community-nav {
  position: relative;
  display: block;
  width: 100%;
  padding: 16px 16px;
  background: #d1c2ec !important;
}

/* PCはSP同様、カテゴリ帯の直下に寄せる。検索帯(.search-band)の下パディング分を
   負マージンで詰める（-1.8rem で密着、少し下げたいので -1.2rem） */
.mayim-header .pc .community-nav {
  margin-top: -1.2rem;
}

/* 三角：繋がるボタンの真下から上向きに、繋がるへ重なるように出す
   （PC=繋がるの位置≒62% / SP=中央タブ=50%） */
/* 三角：SPは従来どおりバー側の疑似要素で出す（left:50%＝中央タブ）。
   PCは「繋がる」ボタンに紐付けて中央に出す（下記）。 */
.community-nav::before {
  content: "";
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  border-left: 12px solid transparent;
  border-right: 12px solid transparent;
  border-bottom: 12px solid #d1c2ec;
}
/* PCはボタン紐付けの三角を使うので、バー側の三角は隠す */
.mayim-header .pc .community-nav::before {
  display: none;
}

/* PC：繋がるボタン（category-btns の2番目）の真下中央に、バーと同色の三角。
   コミュニティ5ページのときだけ表示（body.community-nav-on）。 */
.community-nav-on .mayim-header .pc .category-btns li:nth-child(2) {
  position: relative;
  z-index: 3;
}
.community-nav-on .mayim-header .pc .category-btns li:nth-child(2)::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border-left: 14px solid transparent;
  border-right: 14px solid transparent;
  border-bottom: 14px solid #d1c2ec;
  z-index: 3;
}
/* モーダル表示中は 繋がるボタン／三角の z-index リフトを解除する。
   モーダル本体(.nav-modal z-index:9999)は祖先 section.content(position:relative; z-index:1)の
   stacking context に閉じ込められるため、ルート直下で z-index:3 を持つこのボタン／三角が
   モーダルより前面に飛び出してしまう。開いている間だけ auto に戻して .content 配下（＝モーダル）より背面へ。 */
body.nav-modal-open.community-nav-on .mayim-header .pc .category-btns li:nth-child(2),
body.nav-modal-open.community-nav-on .mayim-header .pc .category-btns li:nth-child(2)::after {
  z-index: auto;
}

/* ボタン行：コンテンツ幅で中央寄せ・均等配置（背景バーは全幅、ボタンは中央） */
.community-nav__bubble {
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-evenly;
  align-items: center;
  gap: 12px;
  max-width: 1040px;
  margin: 0 auto;
}

/* ボタン本体（旧：webp画像 → CSSで再現）。
   構成は「水彩テクスチャ背景 ＋ 透かしアイコン(インラインSVG) ＋ 文字」の3層。
   サイズは旧画像に合わせる（PC=497x141 を高さ52pxで表示＝幅183px相当 / 角丸は実測18px相当≒7px）。
   --cn-sp-fs は SP時の文字サイズ（文字数が多いボタンだけ小さくするためのフック）。 */
.community-nav__item {
  --cn-sp-fs: 2.7vw;
  position: relative;
  isolation: isolate; /* テクスチャの mix-blend-mode をボタン内に閉じ込める */
  overflow: hidden;
  flex: 0 1 183px;
  height: 52px;
  border-radius: 7px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  /* 地色＋大きめのにじみ（明るい紫の抜けと、濃い紫のたまり） */
  background-color: #9c86d6;
  background-image:
    radial-gradient(62% 90% at 10% 82%, rgba(255,255,255,.19), rgba(255,255,255,0) 62%),
    radial-gradient(48% 72% at 86% 16%, rgba(255,255,255,.13), rgba(255,255,255,0) 66%),
    radial-gradient(40% 66% at 66% 92%, rgba(86,56,164,.16), rgba(86,56,164,0) 70%),
    radial-gradient(44% 70% at 26% 10%, rgba(86,56,164,.12), rgba(86,56,164,0) 72%),
    radial-gradient(30% 55% at 46% 40%, rgba(255,255,255,.09), rgba(255,255,255,0) 70%);
  box-shadow: 0 1px 2px rgba(70,45,130,.18);
  transition: opacity .2s ease, transform .2s ease;
}

/* 水彩のムラ：低周波フラクタルノイズを soft-light で重ねる（外部画像なしのデータURI） */
.community-nav__item::before {
  content: "";
  position: absolute;
  inset: -20%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='120'%3E%3Cfilter id='c'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.022 0.05' numOctaves='3' seed='7' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='240' height='120' filter='url(%23c)'/%3E%3C/svg%3E");
  background-size: 240px 120px;
  mix-blend-mode: soft-light;
  opacity: .45;
  pointer-events: none;
}

/* 紙のざらつき：高周波ノイズを overlay で薄く重ねる（アイコンの上にも掛ける） */
.community-nav__item::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' seed='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23g)'/%3E%3C/svg%3E");
  background-size: 120px 120px;
  mix-blend-mode: overlay;
  opacity: .07;
  pointer-events: none;
}

.community-nav__item:hover {
  opacity: .85;
  transform: translateY(-1px);
}

/* 現在地のボタン（JSが .is-current を付与）。以前は非表示にしていたが、
   「いまどこを見ているか」が分かるよう地色を一段濃くする（縁取りは無し）。
   にじみ・ざらつきのレイヤーはそのまま乗るのでテクスチャの質感は共通。 */
.community-nav__item.is-current {
  background-color: #6b4fbd;
  box-shadow: 0 2px 6px rgba(60,36,120,.30);
}

/* 濃い地色に負けないようアイコンと文字を少し強める */
.community-nav__item.is-current .community-nav__icon svg {
  opacity: .34;
}

.community-nav__item.is-current .community-nav__label {
  text-shadow: 0 1px 3px rgba(48,28,104,.45);
}

/* 現在地は移動しないので、ホバーの浮き上がり・薄まりは効かせない */
.community-nav__item.is-current:hover {
  opacity: 1;
  transform: none;
}

/* 透かしアイコン：文字の背面・中央。白の27%は旧画像の実測値に合わせている */
.community-nav__icon {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.community-nav__icon svg {
  display: block;
  height: 70%;
  width: auto;
  fill: #fff;
  opacity: .27;
}

/* 文字：ざらつき・アイコンより前面 */
.community-nav__label {
  position: relative;
  z-index: 1;
  color: #fff;
  font-family: "Shippori Mincho B1", serif;
  font-weight: 700;
  font-size: 13px;
  line-height: 1;
  letter-spacing: .28em;
  text-indent: .28em; /* letter-spacing の末尾アキ分を戻して中央に見せる */
  white-space: nowrap;
  text-shadow: 0 1px 2px rgba(84,56,158,.28);
}

@media screen and (max-width: 767px) {
  .community-nav {
    padding: 12px 8px;
  }

  /* SPはカテゴリタブが平坦（はみ出さない）ので下げない */
  .mayim-header .sp .community-nav {
    margin-top: 0;
  }

  .community-nav::before {
    left: 50%;
    top: -10px;
    border-left-width: 11px;
    border-right-width: 11px;
    border-bottom-width: 11px;
  }

  /* ボタンを大きめに・端まで詰めてモックの比率に寄せる。
     旧画像は横に潰れて表示されていたが、CSSボタンは5等分で敷き詰める（高さ54pxは据え置き）。
     文字が入る幅を稼ぐため bubble の左右パディングは無くし gap を詰める */
  .community-nav__bubble {
    gap: 5px;
    justify-content: space-between;
    padding: 0;
  }

  .community-nav__item {
    flex: 1 1 0;
    min-width: 0;
    height: 54px;
  }

  .community-nav__icon svg {
    height: 62%;
  }

  /* 375px幅で5枚並べても収まるよう vw 連動。文字数の多い「メンバーマップ」だけ更に小さく */
  .community-nav__label {
    font-size: clamp(7px, var(--cn-sp-fs), 12px);
    letter-spacing: 0;
    text-indent: 0;
  }

  .community-nav__item--map {
    --cn-sp-fs: 2.35vw;
  }
}

/* ==================================================================
   学ぶカテゴリナビ（layout-mayim の .learn-nav）
   「#学ぶ」配下のカテゴリを横一列に並べる帯。タグ検索結果ページでのみJSが表示し、
   選択中(.is-current)のカテゴリが「学ぶ」ボタンの真下に来るまで自動でスクロールする。
   はみ出す分は PC=ドラッグ／送りボタン、SP=スワイプ で送る。
   ================================================================== */

/* 全幅の薄いアクア帯。繋がるの薄紫バー（.community-nav）と同じ「吹き出し」の作りに揃えている。
   帯色 #c2e5ec は「学ぶ」ボタンの色を、繋がるのボタン→バー(#a892d8→#d1c2ec)と同じ比率で
   白に寄せた値。JSで display を戻して表示（初期は inline style で none）。
   PCはカテゴリボタンが青帯より下へはみ出す設計なので、負マージンで詰めつつ
   上パディングでボタンをかわす（.community-nav と同値）。
   ※ staging限定の `body.skin-staging nav { background-color: transparent }`（nav全体リセット・詳細度が上）に
     負けて背景が消えるため、背景は !important で明示する（.community-nav と同じ理由）。
   ※ 帯色は下のマスクと「学ぶ」ボタン下の三角にも直書きしている。変えるときは3箇所そろえること。 */
.learn-nav {
  position: relative;
  display: block;
  width: 100%;
  background: #c2e5ec !important;
  /* 上下の余白は .learn-nav__viewport 側に持たせている。
     scroll-hint の吹き出しはスクロール要素の中に差し込まれて外にはみ出せないため、
     余白ぶんだけスクロール要素を高くして吹き出しが切れないようにする狙い。
     帯全体の高さは .community-nav（16+52+16）と同じ。 */
  padding: 0;
}

.mayim-header .pc .learn-nav {
  margin-top: -1.2rem;
}

/* 「学ぶ」ボタンの下に、帯と同色の三角。
   PCは .community-nav の三角（category-btns の2つ目に付けているもの）と同じ指定にそろえる。
   SPはタブが平坦なので、タブの下端へ食い込ませる（translateの-100%）。 */
.learn-nav-on .mayim-header .pc .category-btns li:nth-child(1),
.learn-nav-on .mayim-header .sp .sp-category-tabs li:nth-child(1) {
  position: relative;
  z-index: 3;
}

.learn-nav-on .mayim-header .pc .category-btns li:nth-child(1)::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border-left: 14px solid transparent;
  border-right: 14px solid transparent;
  border-bottom: 14px solid #c2e5ec; /* 帯と同色。.learn-nav の背景を変えるときはここも直す */
  z-index: 3;
}

.learn-nav-on .mayim-header .sp .sp-category-tabs li:nth-child(1)::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translate(-50%, -100%);
  border-left: 11px solid transparent;
  border-right: 11px solid transparent;
  border-bottom: 11px solid #c2e5ec;
  z-index: 3;
}

/* スクロール面。スクロールバーは隠し、PCは掴めるカーソルにする。
   横幅は画面いっぱい（繋がるのように 1040px には絞らない）。
   端のフェードは重ねる疑似要素ではなくマスクで行う。
   マスクは要素のボーダーボックス基準なので、中身がスクロールしても端に留まる。 */
.learn-nav__viewport {
  position: relative;
  /* 帯の上下余白はここで取る（.learn-nav 側のコメント参照） */
  padding: 16px 0;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
  cursor: grab;
  /* ドラッグ中に文字が選択されるのを防ぐ */
  user-select: none;
  -webkit-user-select: none;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 16px, #000 calc(100% - 16px), transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 16px, #000 calc(100% - 16px), transparent 100%);
}

.learn-nav__viewport::-webkit-scrollbar {
  display: none;
}

/* ドラッグ中は smooth を切る（追従が鈍るため） */
.learn-nav__viewport.is-dragging {
  cursor: grabbing;
  scroll-behavior: auto;
}

/* 左右のパディングはマスクが不透明になりきる位置に合わせる（端のボタンが半端に薄くならないように） */
.learn-nav__track {
  display: flex;
  flex-wrap: nowrap;
  gap: 10px;
  padding: 0 16px;
  width: max-content;
}

/* カテゴリボタン。高さ・角丸・透かしアイコン・文字の作りは .community-nav__item に合わせ、
   色だけティール系にしている。幅は文字数がまちまちなのでパディング基準の可変。 */
.learn-nav__item {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 52px;
  padding: 0 24px;
  border-radius: 7px;
  text-decoration: none;
  background-color: #2f9fbb;
  background-image:
    radial-gradient(62% 90% at 10% 82%, rgba(255,255,255,.19), rgba(255,255,255,0) 62%),
    radial-gradient(48% 72% at 86% 16%, rgba(255,255,255,.13), rgba(255,255,255,0) 66%),
    radial-gradient(40% 66% at 66% 92%, rgba(12,78,116,.16), rgba(12,78,116,0) 70%),
    radial-gradient(44% 70% at 26% 10%, rgba(12,78,116,.12), rgba(12,78,116,0) 72%);
  box-shadow: 0 1px 2px rgba(20,80,110,.18);
  transition: opacity .2s ease;
}

.learn-nav__item::before {
  content: "";
  position: absolute;
  inset: -20%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='120'%3E%3Cfilter id='c'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.022 0.05' numOctaves='3' seed='7' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='240' height='120' filter='url(%23c)'/%3E%3C/svg%3E");
  background-size: 240px 120px;
  mix-blend-mode: soft-light;
  opacity: .45;
  pointer-events: none;
}

.learn-nav__item::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' seed='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23g)'/%3E%3C/svg%3E");
  background-size: 120px 120px;
  mix-blend-mode: overlay;
  opacity: .07;
  pointer-events: none;
}

.learn-nav__item:hover {
  opacity: .88;
}

/* 透かしアイコン：文字の背面・中央（.community-nav__icon と同じ作り） */
.learn-nav__icon {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.learn-nav__icon svg {
  display: block;
  height: 70%;
  width: auto;
  fill: #fff;
  opacity: .27;
}

/* 文字：ざらつき・アイコンより前面。
   共通CSSの a:hover の文字色を拾って読めなくなるので、色は span 側で持たせて hover でも固定する。 */
.learn-nav__label {
  position: relative;
  z-index: 1;
  color: #fff;
  font-family: "Shippori Mincho B1", serif;
  font-weight: 700;
  font-size: 13px;
  line-height: 1;
  letter-spacing: .16em;
  text-indent: .16em; /* letter-spacing の末尾アキ分を戻して中央に見せる */
  white-space: nowrap;
  text-shadow: 0 1px 2px rgba(10,60,90,.3);
}

.learn-nav__item:hover .learn-nav__label,
.learn-nav__item:focus .learn-nav__label {
  color: #fff;
}

/* 選択中：濃紺に沈める */
.learn-nav__item.is-current {
  background-color: #175f96;
  box-shadow: 0 2px 6px rgba(8,50,86,.3);
}

.learn-nav__item.is-current:hover {
  opacity: 1;
}

/* 選択中の右上の「×」（テンプレート側で選択中のボタンにだけ出す）。
   もう一度押すと解除できることを示す印で、押すのはボタン全体（×自体はクリックを拾わない）。
   角に重ねて少しはみ出させるため、選択中だけ overflow:hidden を外す。
   外すとざらつき（::before の inset:-20%）がはみ出すので、選択中は内側に収めて角丸で切る。
   はみ出し量は帯の上下余白（.learn-nav__viewport の padding）とボタン間隔（gap）に収まる範囲にする。 */
.learn-nav__item.is-current {
  overflow: visible;
  z-index: 1;
}

.learn-nav__item.is-current::before {
  inset: 0;
  border-radius: inherit;
}

.learn-nav__item.is-current::after {
  border-radius: inherit;
}

.learn-nav__clear {
  position: absolute;
  top: -8px;
  right: -8px;
  z-index: 2;
  width: 22px;
  height: 22px;
  border: 2px solid #175f96;
  border-radius: 50%;
  box-sizing: border-box;
  background: #fff;
  color: #175f96;
  font-family: Arial, sans-serif;
  font-size: 15px;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
  box-shadow: 0 1px 3px rgba(8,50,86,.35);
  pointer-events: none;
}

/* スワイプ案内は マイページのタブと同じ scroll-hint（/css/scroll-hint.css・/js/scroll-hint.js）を使う。
   ここではこの帯に合わせた寸法の調整だけを行う。
   ・素の吹き出しは 120x80px で、52pxのボタン行に対して大きすぎて切れるので縮める
   ・端の内側シャドウはマスクのフェードと二重になるので消す */
.learn-nav__viewport.scroll-hint,
.learn-nav__viewport.scroll-hint.is-left-scrollable,
.learn-nav__viewport.scroll-hint.is-right-scrollable,
.learn-nav__viewport.scroll-hint.is-right-scrollable.is-left-scrollable {
  background: none;
}

/* 手と矢印はマイページと同じ既定サイズのまま。文字を出さないぶんだけ縦を詰めて中央に置く
   （既定の height:80px / top:calc(50% - 25px) は文字ありきの寸法） */
.learn-nav__viewport .scroll-hint-icon {
  height: 68px;
  top: calc(50% - 34px);
  padding: 20px 10px 8px;
}

/* 「スワイプして他のテーマを見る」は120px幅に収まらず折り返すので、この帯では文字を出さない */
.learn-nav__viewport .scroll-hint-text {
  display: none;
}

@media screen and (max-width: 767px) {
  /* SPはカテゴリタブが平坦（はみ出さない）ので下げない */
  .learn-nav {
    padding: 0;
  }

  .mayim-header .sp .learn-nav {
    margin-top: 0;
  }

  /* SPは上下の余白を詰め、端のフェードも狭く */
  .learn-nav__viewport {
    padding: 12px 0;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 14px, #000 calc(100% - 14px), transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 14px, #000 calc(100% - 14px), transparent 100%);
  }

  .learn-nav__track {
    gap: 8px;
    padding: 0 14px;
  }

  .learn-nav__item {
    height: 54px;
    padding: 0 18px;
  }

  .learn-nav__icon svg {
    height: 62%;
  }

  .learn-nav__label {
    font-size: 12px;
    letter-spacing: .1em;
    text-indent: .1em;
  }

  /* SPは帯の上下余白が12px・ボタン間隔が8pxなので、はみ出しを少し控える */
  .learn-nav__clear {
    top: -7px;
    right: -6px;
    width: 20px;
    height: 20px;
    font-size: 14px;
    line-height: 16px;
  }

  .learn-nav__viewport .scroll-hint-icon {
    height: 64px;
    top: calc(50% - 32px);
    padding: 18px 10px 6px;
  }
}

/* ===== ドロワーメニューの初期チラつき（FOUC）防止 =====
   drawer プラグインは初期化時に祖先へ .drawer コンテナ（＋方向クラス）を付与し、
   その時点で .drawer-nav が画面外へ退避する。初期化までは position:fixed の
   .drawer-nav が画面左上に一瞬見えてしまうため、.drawer 付与前は非表示にしておく。
   MENUボタン（.drawer-hamburger）も同様で、右寄せは .drawer--right 付与後に効くため
   初期化前は画面左端に一瞬出る。あわせて .drawer 付与前は非表示にする。
   ※方向（左右）に依存しないよう「祖先に .drawer が付いたら表示」で判定する。 */
.drawer-nav,
.drawer-hamburger {
  display: none;
}

.drawer .drawer-nav,
.drawer .drawer-hamburger {
  display: block;
}

/* ===== 掲示板：カテゴリ絞り込みを メンバー（.member-filter / .filter-btn）に合わせる =====
   掲示板（news-mayim の .cat-Area）は文字サイズ・余白がメンバーより大きいため、
   サイズ／間隔だけ .filter-btn と同じ値に揃える（配置＝左寄せは従来どおり）。
   前方の「.cat-Area ul」「.body-news .cat-Area ul li a」より後方＆同等以上の
   詳細度で上書きしている。 */
.body-news .cat-Area ul {
  gap: 0.6rem;
  margin: 0 0 4rem;
  padding: 0;
}

.body-news .cat-Area ul li a {
  border: 1px solid var(--main50Color);
  border-radius: 2.4rem;
  padding: 0.5rem 1.2rem;
  font-size: 1.3rem;
  font-weight: 600;
  letter-spacing: 0;
  white-space: nowrap;
  transition: background 0.3s, color 0.3s, border-color 0.3s;
}

.body-news .cat-Area ul li a:hover {
  background: var(--main10Color);
}

.body-news .cat-Area ul li.current a {
  border: 1px solid var(--mainColor);
}

/* ----- 掲示板：カテゴリ絞り込み SP（max-width:559px） ----- */
@media screen and (max-width:559px) {
  .body-news .cat-Area ul {
    gap: 0.7rem;
    margin-bottom: 3rem;
  }
  .body-news .cat-Area ul li a {
    padding: 0.6rem 1.4rem;
    font-size: 1.2rem;
  }
}

label>.icon-checkbox-icon,
label>.icon-radio-icon {
  font-family: inherit;
  line-height: inherit;
}

/* ============================================================
   「学ぶ」詳細（アーカイブ詳細）: 20260816カンプ(html/archive-detail.html)より取り込み
   ============================================================ */
/*-----------------------

      アーカイブ詳細

-----------------------*/
/* ページ見出し（content-header）を置かないため、上余白はここで確保する */
.archive-detail {
  max-width: 84rem;
  margin: clamp(3rem, 2rem + 2vw, 5rem) auto 0;
}
/* サムネイル（700×400）＋ いいねボタン */
.archive-thumb {
  position: relative;
  width: 100%;
  max-width: 70rem;
  margin: 0 auto;
  aspect-ratio: 16 / 9;
  border-radius: 1rem;
  overflow: hidden;
  background: var(--main10Color);
}
.archive-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.like-btn {
  position: absolute;
  top: 1.4rem;
  right: 1.4rem;
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.7rem 1.6rem;
  border: none;
  border-radius: 3rem;
  background: rgba(255, 255, 255, 0.92);
  color: var(--baseColor);
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
  transition: background 0.3s;
}
.like-btn:hover {
  background: #fff;
}
.like-btn .fa {
  font-size: 1.8rem;
  color: var(--likeColor);
  transition: transform 0.3s;
}
/* いいね済みは塗りつぶしのハート（fa-heart）に切り替わる。少し大きく見せる */
.like-btn.is-liked {
  background: var(--like10Color);
}
.like-btn.is-liked .fa {
  transform: scale(1.12);
}
.like-btn .like-count {
  font-family: "EB Garamond", serif;
  letter-spacing: 0.04em;
}
/* タイトル */
.archive-title {
  margin: 3.2rem 0 0;
  color: var(--mainColor);
  text-align: center;
  font-family: "Shippori Mincho B1", serif;
  font-size: clamp(2.2rem, 1.6rem + 1.4vw, 3.2rem);
  font-weight: 600;
  line-height: 1.6;
  letter-spacing: 0.06em;
}
/* 配信日 */
.archive-date {
  margin: 1.4rem 0 0;
  color: var(--mainColor);
  text-align: center;
  font-size: 1.4rem;
  letter-spacing: 0.06em;
}
.archive-date time {
  margin-right: 0.4rem;
  font-family: "EB Garamond", serif;
  font-size: 1.6rem;
  letter-spacing: 0.08em;
}
/* タグ一覧 */
/* 一覧（.card-tags）と同じく、文章と同じインラインの流れにして右端で折り返す */
.archive-tags {
  display: block;
  text-align: center;
  list-style: none;
  margin: 1.8rem 0 0;
  padding: 0;
}
.archive-tags > li {
  display: inline;
  margin: 0 1rem 0 0;
  padding: 0;
}
/* タグは一覧のカード（.card-tags）と同じく、枠や塗りを持たない文字だけの表現に揃える */
.archive-tags a {
  display: inline;
  padding: 0;
  border: none;
  border-radius: 0;
  color: var(--mainColor);
  font-size: 1.3rem;
  line-height: 1.6;
  letter-spacing: 0.04em;
}
/* タグ名の頭に # を付ける（HTML側のタグ名は素のまま出力できるようCSSで付与） */
.archive-tags a::before {
  content: "#";
  font-family: "EB Garamond", serif;
}
.archive-tags a:hover {
  background: none;
  color: var(--subColor);
}
/* 概要 */
.archive-summary {
  margin-top: 2.6rem;
  padding: 2.4rem 2.8rem;
  border-radius: 1rem;
  background: var(--main10Color);
  font-size: 1.6rem;
  line-height: 1.9;
}
.archive-summary p + p {
  margin-top: 1.5rem;
}
/* 視聴ボタン */
.watch-btn-wrap {
  margin: 3.5rem 0 0;
  text-align: center;
}
.watch-btn {
  display: inline-flex;
  align-items: center;
  gap: 1.4rem;
  padding: 1.6rem 5rem;
  border-radius: 3.4rem;
  background: var(--mainColor);
  color: #fff;
  font-size: 1.8rem;
  letter-spacing: 0.08em;
  transition: filter 0.3s;
}
.watch-btn:hover {
  color: #fff;
  filter: brightness(0.94);
}
.watch-btn .fa {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  background: #fff;
  color: var(--mainColor);
  font-size: 1.3rem;
  padding-left: 0.3rem;
}
/* ブロック見出し */
.archive-block {
  margin-top: clamp(4rem, 2.5rem + 3vw, 7rem);
}
.archive-block-ttl {
  margin: 0 0 2.6rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--main50Color);
  color: var(--mainColor);
  font-family: "Shippori Mincho B1", serif;
  font-size: 2.2rem;
  font-weight: 600;
  letter-spacing: 0.08em;
}
.archive-block-ttl .en {
  font-family: "EB Garamond", serif;
  font-size: 1.6rem;
  font-weight: 500;
  color: var(--main50Color);
}
/* 詳細本文 */
.archive-body {
  font-size: 1.6rem;
  line-height: 1.9;
}
.archive-body p + p {
  margin-top: 1.5rem;
}
.archive-body h4 {
  margin: 3rem 0 1.2rem;
  padding-left: 1.2rem;
  border-left: 4px solid var(--main50Color);
  color: var(--mainColor);
  font-family: "Shippori Mincho B1", serif;
  font-size: 1.8rem;
  font-weight: 600;
  line-height: 1.5;
}
.archive-body ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.archive-body ul li {
  position: relative;
  padding-left: 1.8rem;
  margin: 0.6rem 0;
}
.archive-body ul li::before {
  content: "";
  position: absolute;
  top: 1.2rem;
  left: 0.2rem;
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 50%;
  background: var(--main50Color);
}
.archive-body ul + p {
  margin-top: 2rem;
}

/*-----------------------

      コメント欄

-----------------------*/
/* 件数と並び替えの行（投稿フォームと一覧の間） */
.comment-list-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1.2rem 2rem;
  margin-top: 3.5rem;
}
.comment-count {
  margin: 0;
  font-size: 1.5rem;
  color: var(--base50Color);
}
.comment-count .fa {
  margin-right: 0.8rem;
  color: var(--mainColor);
}
/* 並び替えボタンは地域フィルターと同じ .filter-btn を流用 */
.comment-sort {
  display: flex;
  gap: 0.6rem;
}
.comment-list {
  list-style: none;
  margin: 1.6rem 0 0;
  padding: 0;
  border-top: 1px solid var(--base10Color);
}
.comment-item {
  display: flex;
  gap: 1.6rem;
  padding: 2rem 0.5rem;
  border-bottom: 1px solid var(--base10Color);
}
.comment-avatar {
  flex: 0 0 auto;
  width: 5.6rem;
  height: 5.6rem;
  border-radius: 50%;
  overflow: hidden;
  background: var(--main10Color);
}
.comment-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.comment-body {
  flex: 1 1 auto;
  min-width: 0;
}
.comment-head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.6rem 1rem;
  margin: 0 0 0.6rem;
}
.comment-name {
  font-size: 1.5rem;
  font-weight: 600;
}
.comment-badge {
  display: inline-block;
  padding: 0.2rem 1.2rem;
  border-radius: 2rem;
  background: var(--mainColor);
  color: #fff;
  font-size: 1.2rem;
  font-weight: 600;
  line-height: 1.6;
  letter-spacing: 0.04em;
}
.comment-date {
  color: var(--base50Color);
  font-family: "EB Garamond", serif;
  font-size: 1.3rem;
  letter-spacing: 0.08em;
}
.comment-text {
  margin: 0;
  font-size: 1.5rem;
  line-height: 1.85;
}
.comment-actions {
  display: flex;
  align-items: center;
  gap: 2rem;
  margin: 1rem 0 0;
}
.comment-like {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--base50Color);
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
  transition: color 0.3s;
}
.comment-like .fa {
  font-size: 1.6rem;
  color: var(--likeColor);
}
.comment-like:hover,
.comment-like.is-liked {
  color: var(--likeColor);
}
.comment-like .like-count {
  font-family: "EB Garamond", serif;
}
/* 返信ボタン */
.comment-reply-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--base50Color);
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
  transition: color 0.3s;
}
.comment-reply-btn .fa {
  font-size: 1.5rem;
}
.comment-reply-btn:hover,
.comment-reply-btn[aria-expanded="true"] {
  color: var(--mainColor);
}
/* 返信一覧（1階層のみ。この中に .comment-replies は入らない） */
.comment-replies {
  list-style: none;
  margin: 1.6rem 0 0;
  padding: 0 0 0 2.2rem;
  border-left: 2px solid var(--main10Color);
}
.comment-replies .comment-item {
  gap: 1.2rem;
  padding: 1.2rem 0;
  border-bottom: none;
}
.comment-replies .comment-item + .comment-item {
  border-top: 1px solid var(--base10Color);
}
.comment-replies .comment-avatar {
  width: 4.4rem;
  height: 4.4rem;
}
.comment-replies .comment-name {
  font-size: 1.4rem;
}
.comment-replies .comment-text {
  font-size: 1.4rem;
}
/* 返信フォーム（「返信」ボタンで開閉） */
.reply-form {
  display: none;
  margin-top: 1.6rem;
  padding: 1.6rem;
  border-radius: 0.8rem;
  background: var(--main10Color);
}
.reply-form.is-open {
  display: block;
}
.reply-form textarea {
  width: 100%;
  padding: 1.2rem;
  border: 1px solid var(--main50Color);
  border-radius: 0.8rem;
  background: #fff;
  color: var(--baseColor);
  font-size: 1.4rem;
  line-height: 1.8;
  resize: vertical;
}
.reply-form textarea::placeholder {
  color: var(--base50Color);
}
/* 既定の黒いフォーカスリングはサイトの色調から浮くため、mainColorのトーンに置き換える */
.reply-form textarea:focus,
.comment-form textarea:focus {
  outline: 2px solid var(--main50Color);
  outline-offset: 1px;
}
.reply-form-btn {
  display: flex;
  justify-content: flex-end;
  gap: 1rem;
  margin: 1.2rem 0 0;
}
.reply-form .cancel-btn {
  padding: 0.9rem 2.4rem;
  border: 1px solid var(--main50Color);
  border-radius: 3rem;
  background: #fff;
  color: var(--mainColor);
  font-size: 1.4rem;
  letter-spacing: 0.08em;
  cursor: pointer;
  transition: background 0.3s;
}
.reply-form .cancel-btn:hover {
  background: var(--main10Color);
}
/* 投稿フォーム（一覧の上に置く。初期は畳んだ状態） */
.comment-form {
  margin-top: 0;
  padding: 2.6rem;
  border-radius: 1rem;
  background: var(--main10Color);
}
.comment-form-ttl {
  margin: 0 0 1.2rem;
  font-size: 1.6rem;
  font-weight: 600;
}
.comment-form textarea {
  width: 100%;
  padding: 1.4rem;
  border: 1px solid var(--main50Color);
  border-radius: 0.8rem;
  background: #fff;
  color: var(--baseColor);
  font-size: 1.5rem;
  line-height: 1.8;
  resize: vertical;
}
.comment-form textarea::placeholder {
  color: var(--base50Color);
}
/* 入力欄にフォーカスするまでは高さを抑え、注意書き・ボタンも出さない */
.comment-form textarea {
  min-height: 6rem;
}
.comment-form.is-active textarea {
  min-height: 12rem;
}
.comment-form-foot {
  display: none;
}
.comment-form.is-active .comment-form-foot {
  display: block;
}
.comment-form-note {
  margin: 0.8rem 0 0;
  font-size: 1.3rem;
  color: var(--base50Color);
}
.comment-form-btn {
  display: flex;
  justify-content: flex-end;
  gap: 1rem;
  margin: 1.6rem 0 0;
}
.comment-form .cancel-btn {
  padding: 1.2rem 3rem;
  border: 1px solid var(--main50Color);
  border-radius: 3rem;
  background: #fff;
  color: var(--mainColor);
  font-size: 1.6rem;
  letter-spacing: 0.08em;
  cursor: pointer;
  transition: background 0.3s;
}
.comment-form .cancel-btn:hover {
  background: var(--main10Color);
}
.comment-form .submit-btn,
.reply-form .submit-btn {
  padding: 1.2rem 4rem;
  border: none;
  border-radius: 3rem;
  background: var(--mainColor);
  color: #fff;
  font-size: 1.6rem;
  letter-spacing: 0.08em;
  cursor: pointer;
  transition: filter 0.3s;
}
.comment-form .submit-btn:hover,
.reply-form .submit-btn:hover {
  filter: brightness(0.94);
}
/* 返信フォームの送信ボタンは、親コメントより一段小さく見せる */
.reply-form .submit-btn {
  padding: 0.9rem 2.8rem;
  font-size: 1.4rem;
}

/*-----------------------

      視聴モーダル（Vimeo）

-----------------------*/
.video-modal { display: none; }
.video-modal.is-open { display: block; }
.video-modal .modal__bg {
  background: var(--baseColor);
  opacity: 0.92;
  cursor: pointer;
}
.video-modal .modal__content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 92%;
  max-width: 108rem;
  /* 既存（会員系デザイン）の .modal__content は 白背景・高さ100%・flex中央寄せ。
     そのままだと画面全体が白く塗られて背景の暗幕も閉じるボタンも隠れるため、
     nav-modal と同じように video-modal 配下だけ打ち消す。既存ルール自体は他ページが使うので変更しない。 */
  display: block;
  height: auto;
  background: transparent;
}
.video-modal .top-close {
  position: absolute;
  top: -5.6rem;
  right: 0;
  /* 既存の .top-close は width/height:5vw の固定枠。この枠が画像のサイズと合わず、
     PCでは右端からずれ、SPでは潰れて表示される。nav-modal と同じく枠の指定を解除し、
     絶対配置の shrink-to-fit で画像サイズぴったりにする */
  width: auto;
  height: auto;
  margin: 0;
  z-index: 2;
}
.video-modal .top-close a { display: inline-block; }
.video-modal .top-close img {
  width: 4.2rem;
  height: 4.2rem;
}
.video-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 1rem;
  overflow: hidden;
  background: #000;
}
.video-frame iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}


@media screen and (max-width:559px) {
  /* アーカイブ詳細：SP */
  .archive-thumb {
    border-radius: 0.8rem;
  }
  /* いいねは右上、お気に入りは右下で右端を揃える */
  .like-btn {
    top: 1rem;
    bottom: auto;
    right: 1rem;
    padding: 0.6rem 1.3rem;
    font-size: 1.3rem;
  }
  .archive-title {
    margin-top: 2.4rem;
  }
  .archive-summary {
    padding: 1.8rem;
    font-size: 1.5rem;
  }
  .watch-btn {
    display: flex;
    justify-content: center;
    padding: 1.5rem 2rem;
    font-size: 1.6rem;
  }
  .archive-block-ttl {
    margin-bottom: 2rem;
    font-size: 2rem;
  }
  .archive-block-ttl .en {
    font-size: 1.4rem;
  }
  .archive-body {
    font-size: 1.5rem;
  }
  .archive-body h4 {
    font-size: 1.7rem;
  }
  /* コメント欄：SP */
  .comment-item {
    gap: 1.2rem;
    padding: 1.8rem 0.2rem;
  }
  .comment-avatar {
    width: 4.4rem;
    height: 4.4rem;
  }
  .comment-actions {
    gap: 1.6rem;
  }
  /* 返信：SPは字下げを浅くしてテキスト幅を確保する */
  .comment-replies {
    padding-left: 1.2rem;
  }
  .comment-replies .comment-item {
    gap: 1rem;
  }
  .comment-replies .comment-avatar {
    width: 3.6rem;
    height: 3.6rem;
  }
  .reply-form {
    padding: 1.4rem;
  }
  /* 返信欄は字下げの分だけ幅が狭い。ボタンは等分にして横並びを崩さない */
  .reply-form-btn {
    justify-content: center;
    gap: 0.8rem;
  }
  .reply-form .cancel-btn,
  .reply-form .submit-btn {
    flex: 1 1 0;
    padding-left: 1rem;
    padding-right: 1rem;
    white-space: nowrap;
  }
  .comment-list-head {
    margin-top: 2.6rem;
  }
  .comment-form {
    padding: 1.8rem;
  }
  .comment-form-btn {
    justify-content: center;
    gap: 0.8rem;
  }
  .comment-form .cancel-btn,
  .comment-form .submit-btn {
    flex: 1 1 0;
    padding-left: 1rem;
    padding-right: 1rem;
    white-space: nowrap;
  }
  /* 視聴モーダル：SP */
  .video-modal .modal__content {
    width: 94%;
  }
  .video-modal .top-close {
    top: -4.6rem;
  }
  .video-modal .top-close img {
    width: 3.4rem;
    height: 3.4rem;
  }
}

/* カンプはVimeoのiframe前提だが、実装は資料室のファイルを video / audio で再生する。
   iframeと同じ収まりにし、音声・その他ファイルはフレーム中央に置く。 */
.video-frame video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
  background: #000;
}
.video-frame audio,
.video-frame .watch-file-link {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 90%;
  margin: 0;
  text-align: center;
}
.video-frame .watch-file-link a {
  color: #fff;
}

/* コメントの「もっと見る」。コメントが増えても初期表示が重くならないよう10件ずつ継ぎ足す。
   意匠は並び替えの .filter-btn（アウトラインのピル）に合わせ、一覧の下で中央に置く。 */
.comment-more {
  margin: 2.4rem 0 0;
  text-align: center;
}
.comment-more-btn {
  border: 1px solid var(--main50Color);
  background: #fff;
  color: var(--mainColor);
  border-radius: 2.4rem;
  padding: 0.9rem 3.2rem;
  font-size: 1.4rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  cursor: pointer;
  transition: background 0.3s, color 0.3s, border-color 0.3s;
}
.comment-more-btn:hover {
  background: var(--main10Color);
}
.video-frame .watch-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* モーダル表示中は「検索結果に戻る」フローティングボタンを隠す。
   暗幕より手前に出て押せてしまい、モーダルを閉じずに一覧へ戻れてしまうため。
   body.nav-modal-open はモーダルを開いたときに JS（common/teacher-modal:: script）が付ける。 */
body.nav-modal-open .search-back-fab {
  display: none;
}

/*========================================================
  ライブ配信詳細（mayim専用・カスタムテンプレ）
  対象: live/template/live-detail-mayim.html
  ※上部（バナー・タイトル・日程・概要）と本文・ナビゲーターは
    「学ぶ」詳細と同じ archive-detail 系クラスを流用。ここは差分のみ。
========================================================*/
.body-live-detail-mayim .live-mayim-head {
  padding: 0 1.6rem;
}

/* 「ライブ配信は終了しました」等のお知らせ（赤枠）が概要にくっつくので間を空ける */
.body-live-detail-mayim .live-mayim-head .alert {
  margin-top: 2rem;
}

/* 配信中バッジ（サムネ左上）。いいねが無いので反対側に置く */
.body-live-detail-mayim .archive-thumb .live-badge {
  position: absolute;
  top: 1.4rem;
  left: 1.4rem;
  padding: 0.5rem 1.4rem;
  border-radius: 3rem;
  background: var(--likeColor);
  color: #fff;
  font-size: 1.3rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  line-height: 1;
}

/* お名前・メールの入力欄は中央に寄せ、幅を本文と揃える */
.body-live-detail-mayim .live-mayim-entry {
  max-width: 36rem;
  margin: 3.2rem auto 0;
}
/* 既存の .form-control は管理画面寄りの大きさなので、この画面だけ小さめに整える */
.body-live-detail-mayim .live-mayim-entry .form-control {
  height: auto;
  margin-bottom: 1rem;
  padding: 0.9rem 1.4rem;
  border: 1px solid var(--main50Color);
  border-radius: 0.8rem;
  box-shadow: none;
  font-size: 1.4rem;
  line-height: 1.5;
}
.body-live-detail-mayim .live-mayim-entry .form-control:focus {
  border-color: var(--mainColor);
  box-shadow: none;
}
.body-live-detail-mayim .live-mayim-note {
  margin: 1.6rem 0 0;
  text-align: center;
  font-size: 1.3rem;
  line-height: 1.9;
}

/* 「学ぶ」詳細の .watch-btn は <a> 前提。ここは <button> なので、
   ブラウザ既定の枠線・背景・フォントが残って浮くため打ち消す。 */
.body-live-detail-mayim button.watch-btn {
  border: none;
  font-family: inherit;
  line-height: 1;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  /* SPでは .watch-btn が display:flex（ブロックレベル）になる。ボタンは内容幅のまま残るので
     親の text-align:center では中央に寄らない。marginで中央に寄せる（PCのinline-flexでは無害）。 */
  margin-left: auto;
  margin-right: auto;
}

/* 視聴予約中・準備中はボタンの色を変える（.watch-btn の塗りを踏襲） */
.body-live-detail-mayim .watch-btn.is-reserved {
  background: var(--subColor);
}
.body-live-detail-mayim .watch-btn.is-disabled {
  background: var(--base50Color);
  cursor: default;
}
.body-live-detail-mayim .watch-btn.is-disabled:hover {
  filter: none;
}
.body-live-detail-mayim .watch-btn--sub,
.body-live-detail-mayim button.watch-btn--sub {
  background: #fff;
  border: 1px solid var(--mainColor);
  color: var(--mainColor);
}
.body-live-detail-mayim .watch-btn--sub:hover {
  color: var(--mainColor);
}
.body-live-detail-mayim .watch-btn--sub .fa {
  background: var(--mainColor);
  color: #fff;
}

@media screen and (max-width:559px) {
  /* ライブ配信詳細：SP。入力欄は画面幅いっぱいまで使い、ボタンは中央 */
  .body-live-detail-mayim .live-mayim-entry {
    max-width: 100%;
    margin-top: 2.4rem;
  }
  .body-live-detail-mayim .live-mayim-note {
    font-size: 1.2rem;
  }
}

/* 未購入の有料アーカイブ（資料室の can_view_flg = 0）。
   資料室一覧と同じく、サムネを覆って購入導線を見せる。 */
.card-thumb.is-locked img {
  filter: brightness(0.72);
}
.article-card {
  position: relative;
}
.card-lock {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  aspect-ratio: 16 / 9;
  pointer-events: none;
}
.card-lock__btn {
  padding: 0.8rem 2rem;
  border-radius: 3rem;
  background: var(--mainColor);
  color: #fff;
  font-size: 1.3rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

/* 購入ボタン（「学ぶ」詳細）。視聴ボタンと同じ形でアクセント色にする */
.watch-btn--buy {
  background: var(--accentColor);
}
.watch-btn--buy .fa {
  color: var(--accentColor);
}

@media screen and (max-width:559px) {
  /* 未購入アーカイブの購入ボタン：SPはカード幅が狭く、文字が折り返して大きく見えるので小さくする */
  .card-lock__btn {
    padding: 0.5rem 1rem;
    font-size: 1.05rem;
    letter-spacing: 0;
    line-height: 1.3;
    white-space: nowrap;
  }
}

/* カードのお気に入り（再生リスト）ボタン。詳細のいいね（.like-btn）と同じく
   サムネイルの上に重ねる。位置は右下、押すと再生リストのダイアログが開く。 */
.fav-btn {
  position: absolute;
  right: 0.8rem;
  bottom: 0.8rem;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.2rem;
  height: 3.2rem;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  color: var(--mainColor);
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
  transition: background 0.3s, color 0.3s;
}
.fav-btn:hover {
  background: #fff;
}
/* お気に入り済みは塗りつぶし（アイコンも fa-bookmark に切り替わる）。
   サムネがNO IMAGE（mainColor系の水彩）のときに同化してしまうので、
   白い縁取りと少し強めの影で浮かせる。 */
.fav-btn.is-saved {
  background: var(--mainColor);
  color: #fff;
  box-shadow: 0 0 0 2px #fff, 0 2px 8px rgba(0, 0, 0, 0.28);
}
.fav-btn.is-saved:hover {
  background: var(--subColor);
}

/* カード下のタグ（/learn 一覧）。共通の .a-tag はバッジ前提で余白・ボックスが付くため、
   一覧では専用クラスにして文字だけを出す。 */
/* flexで並べると、カード幅に収まらないタグが1つずつ改行されて縦に伸びる。
   文章と同じインラインの流れにして、右端まで来たときだけ折り返すようにする。 */
.card-tags {
  display: block;
  list-style: none;
  margin: 0.8rem 0 0;
  padding: 0;
  color: var(--mainColor);
  font-size: 1.2rem;
  line-height: 1.6;
}
.card-tags > li {
  display: inline;
  margin: 0 1rem 0 0;
  padding: 0;
}

@media screen and (max-width:559px) {
  /* SPは右端まで来たら折り返す（1行に詰めて省略はしない） */
  .card-tags {
    margin-top: 0.5rem;
    font-size: 1rem;
  }
  .card-tags > li {
    margin-right: 0.8rem;
  }
}

@media screen and (max-width:559px) {
  /* お気に入りボタン：SPはサムネが小さいので一段小さく */
  .fav-btn {
    right: 0.6rem;
    bottom: 0.6rem;
    width: 2.8rem;
    height: 2.8rem;
    font-size: 1.2rem;
  }
}

/*========================================================
  ダイアログ（再生リスト／コメント）
   対象: shelf/shelf-play-list.html, shelf/shelf-play-list-edit.html, shelf/shelf-comment.html
  ※pageClass は body-shelf-comment（再生リスト／コメント）と
    body-shelf-comment-edt（再生リスト編集）の2種類。まとめて意匠を寄せる。
    HTMLの構造は変更していない。
========================================================*/
.body-shelf-comment .modal-content,
.body-shelf-comment-edt .modal-content{
  border: none;
  /* 角丸・影はナビゲーターのプロフィールモーダル（.nav-modal .modal__content）に合わせる */
  border-radius: 1.6rem;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18);
}
/* 中身が収まっていても常に出る横スクロールバーを消す
   （テンプレート側の inline style="overflow-x: auto" を打ち消すため !important） */
.body-shelf-comment .modal-body,
.body-shelf-comment-edt .modal-body{
  overflow-x: hidden !important;
}

/* ヘッダ：タイトルはページ見出しと同じ明朝＋mainColor */
.body-shelf-comment .modal-header,
.body-shelf-comment-edt .modal-header{
  padding: 1.8rem 2rem 1.4rem;
  border-bottom: 1px solid var(--main50Color);
  background: var(--main10Color);
}
.body-shelf-comment .modal-title,
.body-shelf-comment-edt .modal-title{
  color: var(--mainColor);
  font-family: "Shippori Mincho B1", serif;
  font-size: 1.8rem;
  font-weight: 600;
  letter-spacing: 0.12em;
}
.body-shelf-comment .modal-header .close,
.body-shelf-comment-edt .modal-header .close{
  color: var(--mainColor);
  opacity: 0.8;
  font-size: 2.4rem;
  text-shadow: none;
}
.body-shelf-comment .modal-header .close:hover,
.body-shelf-comment-edt .modal-header .close:hover{
  opacity: 1;
}

.body-shelf-comment .modal-body,
.body-shelf-comment-edt .modal-body{
  padding: 2rem;
}

/* 「新しい再生リストを作成」：リンクではなくボタンに見せる。
   中の font タグにインラインの color があるため色は !important で上書きする */
.body-shelf-comment .modal-body a[data-event="new"],
.body-shelf-comment-edt .modal-body a[data-event="new"]{
  display: inline-flex;
  align-items: center;
  padding: 0.7rem 1.8rem;
  border: 1px solid var(--mainColor);
  border-radius: 2.4rem;
  background: #fff;
  text-decoration: none !important;
  transition: background 0.3s;
}
.body-shelf-comment .modal-body a[data-event="new"]:hover,
.body-shelf-comment-edt .modal-body a[data-event="new"]:hover{
  background: var(--main10Color);
}
.body-shelf-comment .modal-body a[data-event="new"] font,
.body-shelf-comment-edt .modal-body a[data-event="new"] font{
  color: var(--mainColor) !important;
  font-size: 1.4rem !important;
}
.body-shelf-comment .modal-body a[data-event="new"] .fa,
.body-shelf-comment-edt .modal-body a[data-event="new"] .fa{
  margin-right: 0.6rem;
}

/* 再生リストの各行：1行ずつのカードにして押しやすくする */
.body-shelf-comment .modal-body .checkbox,
.body-shelf-comment-edt .modal-body .checkbox{
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0;
  padding: 1.1rem 1.4rem;
  border: 1px solid var(--main50Color);
  border-radius: 0.8rem;
  background: #fff;
}
.body-shelf-comment .modal-body .checkbox > label,
.body-shelf-comment-edt .modal-body .checkbox > label{
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  padding-left: 2.4rem;
  color: var(--baseColor);
  font-size: 1.4rem;
  cursor: pointer;
}
.body-shelf-comment .modal-body .checkbox input[type="checkbox"],
.body-shelf-comment-edt .modal-body .checkbox input[type="checkbox"]{
  margin-top: 0.2rem;
}
/* 編集・削除アイコンは控えめに */
.body-shelf-comment .modal-body .checkbox a font,
.body-shelf-comment-edt .modal-body .checkbox a font{
  color: var(--main50Color) !important;
}
.body-shelf-comment .modal-body .checkbox a:hover font,
.body-shelf-comment-edt .modal-body .checkbox a:hover font{
  color: var(--mainColor) !important;
}

/* フッタ：追加＝塗り、閉じる＝アウトライン。どちらもピル型。
   区切りは既定の太いグレー罫線をやめ、背景色の差だけで見せる */
.body-shelf-comment .modal-body,
.body-shelf-comment-edt .modal-body{
  border-bottom: none;
  box-shadow: none;
}
.body-shelf-comment .modal-footer,
.body-shelf-comment-edt .modal-footer{
  margin-top: 0;
  padding: 1.4rem 2rem 1.8rem;
  border: none;
  border-top: none;
  box-shadow: none;
  background: var(--main10Color);
}
.body-shelf-comment .modal-footer .btn,
.body-shelf-comment-edt .modal-footer .btn{
  min-width: 12rem;
  padding: 0.9rem 2rem;
  border-radius: 2.4rem;
  font-size: 1.4rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  box-shadow: none;
}
.body-shelf-comment .modal-footer .btn[data-event="add"],
.body-shelf-comment-edt .modal-footer .btn[data-event="add"],
.body-shelf-comment .modal-footer .btn[data-event="comment-add"],
.body-shelf-comment-edt .modal-footer .btn[data-event="comment-add"]{
  border: 1px solid var(--mainColor);
  background: var(--mainColor);
  color: #fff;
}
.body-shelf-comment .modal-footer .btn[data-event="add"]:hover,
.body-shelf-comment-edt .modal-footer .btn[data-event="add"]:hover,
.body-shelf-comment .modal-footer .btn[data-event="comment-add"]:hover,
.body-shelf-comment-edt .modal-footer .btn[data-event="comment-add"]:hover{
  filter: brightness(0.94);
}
.body-shelf-comment .modal-footer .btn[data-dismiss="modal"],
.body-shelf-comment-edt .modal-footer .btn[data-dismiss="modal"]{
  border: 1px solid var(--main50Color);
  background: #fff;
  color: var(--mainColor);
}
.body-shelf-comment .modal-footer .btn[data-dismiss="modal"]:hover,
.body-shelf-comment-edt .modal-footer .btn[data-dismiss="modal"]:hover{
  background: var(--main10Color);
}

@media screen and (max-width:559px) {
  .body-shelf-comment .modal-body,
.body-shelf-comment-edt .modal-body,
  .body-shelf-comment .modal-header,
.body-shelf-comment-edt .modal-header,
  .body-shelf-comment .modal-footer,
.body-shelf-comment-edt .modal-footer{
    padding-left: 1.4rem;
    padding-right: 1.4rem;
  }
  .body-shelf-comment .modal-footer .btn,
.body-shelf-comment-edt .modal-footer .btn{
    min-width: 10rem;
    padding: 0.8rem 1.4rem;
    font-size: 1.3rem;
  }
}

/* 再生リスト編集ダイアログの個別分。
   ・作成／更新は btn-primary（既定の青）なので塗りをmainColorに寄せる
   ・キャンセルはアウトライン
   ・入力欄は「学ぶ」まわりのフォームと同じ丸みに揃える */
.body-shelf-comment-edt .modal-footer .btn-primary {
  border: 1px solid var(--mainColor);
  background: var(--mainColor);
  color: #fff;
}
.body-shelf-comment-edt .modal-footer .btn-primary:hover {
  filter: brightness(0.94);
}
.body-shelf-comment-edt .modal-footer .btn[data-event="back"] {
  border: 1px solid var(--main50Color);
  background: #fff;
  color: var(--mainColor);
}
.body-shelf-comment-edt .modal-footer .btn[data-event="back"]:hover {
  background: var(--main10Color);
}
.body-shelf-comment-edt .modal-body .control-label,
.body-shelf-comment-edt .modal-body label {
  color: var(--mainColor);
  font-family: "Shippori Mincho B1", serif;
  font-size: 1.5rem;
  letter-spacing: 0.06em;
}
.body-shelf-comment-edt .modal-body .form-control {
  height: auto;
  padding: 0.9rem 1.4rem;
  border: 1px solid var(--main50Color);
  border-radius: 0.8rem;
  box-shadow: none;
  font-size: 1.4rem;
}
.body-shelf-comment-edt .modal-body .form-control:focus {
  border-color: var(--mainColor);
  box-shadow: none;
}

/* 再生リストのチップ（カテゴリの後ろに並ぶ）。カテゴリと同じ形だが、
   お気に入りのブックマークアイコンを付けて役割が分かるようにする */
.tag-filter__item--playlist {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}
.tag-filter__item--playlist .fa {
  font-size: 1.1rem;
}

/* リンクの訪問済み・フォーカス時に共通CSSの a:visited 等が勝ってしまい、
   ボタンやチップの文字色がグレーになるため、状態ごとに明示して固定する。 */
.watch-btn,
.watch-btn:link,
.watch-btn:visited,
.watch-btn:hover,
.watch-btn:active,
.watch-btn:focus {
  color: #fff;
  text-decoration: none;
}
/* アウトライン系（ZOOMで参加する）は mainColor のまま */
.body-live-detail-mayim .watch-btn--sub,
.body-live-detail-mayim .watch-btn--sub:link,
.body-live-detail-mayim .watch-btn--sub:visited,
.body-live-detail-mayim .watch-btn--sub:hover,
.body-live-detail-mayim .watch-btn--sub:active,
.body-live-detail-mayim .watch-btn--sub:focus {
  color: var(--mainColor);
}
/* 詳細のタグ。下線は共通CSS側（a:link/a:visited/a:hover）の指定が勝ってしまうため
   !important で確実に除去する（本ファイル内の他のリンク下線除去と同じ作法） */
.archive-tags a,
.archive-tags a:link,
.archive-tags a:visited,
.archive-tags a:active,
.archive-tags a:focus {
  color: var(--mainColor);
  text-decoration: none !important;
}
/* :hover は色だけ subColor（既存定義）を活かし、下線だけ打ち消す */
.archive-tags a:hover {
  text-decoration: none !important;
}
/* 絞り込みチップ（未選択＝mainColor／選択中＝白） */
.tag-filter__item,
.tag-filter__item:link,
.tag-filter__item:visited,
.tag-filter__item:active,
.tag-filter__item:focus {
  color: var(--mainColor);
}
.tag-filter__item.is-active,
.tag-filter__item.is-active:link,
.tag-filter__item.is-active:visited,
.tag-filter__item.is-active:active,
.tag-filter__item.is-active:focus {
  color: #fff !important;
}

/* ダイアログはiframeで開くため、中身（.modal-content）だけ角を丸めても
   外側のiframeが四角いままで角がはみ出して見える。外側も一緒に丸める。 */
#modal .modal-dialog,
#modal2 .modal-dialog {
  border-radius: 1.6rem;
  overflow: hidden;
  background: transparent;
}
#modal .modal-dialog iframe,
#modal2 .modal-dialog iframe {
  border-radius: 1.6rem;
  background: transparent;
}
/* iframe側（ダイアログのページ）の地の色も透過にして、丸めた角から白地が出ないようにする */
.body-shelf-comment,
.body-shelf-comment-edt {
  background: transparent;
}

/* ページ見出しの英字（「学ぶ / Search」の「/ Search」部分）は出さない */
.content-header .page-header .en,
.detail-page .content-header .page-header .en,
.page-detail-page .content-header .page-header .en,
.detail-page.page-detail-page .content-header .page-header .en {
  display: none;
}

/* 詳細のボタンは右端で縦に揃える。いいね（.like-btn）＝右上／お気に入り＝右下 */
.body-archive-detail .archive-thumb .fav-btn {
  top: auto;
  left: auto;
  right: 1.4rem;
  bottom: 1.4rem;
}

@media screen and (max-width:559px) {
  .body-archive-detail .archive-thumb .fav-btn {
    right: 1rem;
    bottom: 1rem;
  }
}

/* 「学ぶ」一覧は見出し（タイトル）・件数を出さず、チップから始まる。
   ヘッダに貼り付かないよう、チップの上に余白を持たせる。 */
.body-learn .tag-filter {
  margin-top: 2.4rem;
}

@media screen and (max-width:559px) {
  /* SPはチップ〜カードの間隔が空きすぎるので詰める */
  .body-learn .tag-filter {
    margin: 1.6rem 0 1.6rem;
  }
  .body-learn .content {
    padding-top: 0;
  }
}

/*-----------------------

      イベント一覧 / ライブ配信一覧
      （カスタムテンプレート event/template/event-list-mayim, live/template/live-list-mayim）

-----------------------*/
/* カード自体は「学ぶ」一覧・タグ検索結果と同じ .card-grid / .article-card を流用する。
   ここではイベント・ライブ配信にしか無い要素（残席バッジ・配信中バッジ・ナビゲーター）だけを定義する。 */

/* 残席／申込状況（満員御礼・残りわずか・申込済）とライブの「配信中」。
   区分バッジ（.cat-badge＝サムネ左上）と対になるようサムネ右上に置く。 */
.card-status {
  position: absolute;
  top: 1rem;
  right: 1rem;
  padding: 0.4rem 1.4rem;
  border-radius: 3rem;
  background: #fff;
  color: var(--mainColor);
  font-size: 1.3rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  line-height: 1.4;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
}
/* 満員御礼・申込済など（共通一覧の残数ラベルが bg-red のもの） */
.card-status--red {
  background: #d0021b;
  color: #fff;
}
/* 残りわずかなど（同 bg-blue のもの）。白地＋mainColorで主張を抑える */
.card-status--blue {
  background: #fff;
  color: var(--mainColor);
}
/* 配信中。アクセント色＋白ドットで「いま配信している」ことが分かるようにする */
.card-status--live {
  background: var(--accentColor);
  color: #fff;
}
.card-status--live::before {
  content: "";
  display: inline-block;
  width: 0.6rem;
  height: 0.6rem;
  margin-right: 0.5rem;
  border-radius: 50%;
  background: #fff;
  vertical-align: middle;
}

/* 0件メッセージ。カード一覧と同じ余白感に揃える */
.body-event-list-mayim .search-empty,
.body-live-list-mayim .search-empty {
  margin: 2.4rem 0;
}

@media screen and (max-width:559px) {
  /* SPはカード幅が狭いので、バッジも一段小さくする（.cat-badge と同じ調整） */
  .card-status {
    top: 0.6rem;
    right: 0.6rem;
    font-size: 1rem;
    padding: 0.2rem 0.8rem;
  }
  .card-status--live::before {
    width: 0.5rem;
    height: 0.5rem;
    margin-right: 0.4rem;
  }
}

/* 「学ぶ」詳細：資料ファイルのボタン（資料をダウンロード）。
   視聴ボタンと同じ形のアウトライン版。 */
.doc-btn-wrap {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.2rem;
  margin-top: 1.6rem;
}
.watch-btn--doc,
.watch-btn--doc:link,
.watch-btn--doc:visited,
.watch-btn--doc:hover,
.watch-btn--doc:active,
.watch-btn--doc:focus {
  background: #fff;
  border: 1px solid var(--mainColor);
  color: var(--mainColor);
}
.watch-btn--doc .fa {
  background: var(--mainColor);
  color: #fff;
  padding-left: 0;
}

@media screen and (max-width:559px) {
  /* SPは .watch-btn が display:flex で全幅になるため、縦に積む */
  .doc-btn-wrap {
    flex-direction: column;
    gap: 1rem;
  }
}

/*=======================================================================

   MAYIM コミュニティ一覧（salon-list-mayim）SARU全国カード
   「SARU全国」サロンだけ一覧で枠・名称なしの横長バナー(20:7)にする。
   見出し（オンラインサロン）はテンプレ側で出さず、その分の縦スペースをバナーに充てる。
   横幅はカード3列の外縁の88%（モック実測 845/955px）を上限にしつつ、広い画面では1080pxで頭打ち
   （高さ≒378px。見出し分が空くので初期表示に下のカード1段目が入る）

=======================================================================*/
/* 繋がる系5画面（コミュニティ・メンバー・メンバーマップ・掲示板・みんなの部屋）は見出しを出さず統一。
   テンプレ側で削除できない汎用ページ(みんなの部屋)はCSSで非表示。見出しが無いので帯の直下に余白を取る */
.body-page-detail-share-room .content-header {
  display: none;
}
.body-salon-list .content-wrapper .content,
.body-member .content-wrapper .content,
.body-member-map .content-wrapper .content,
.body-news-list .content-wrapper .content,
.body-page-detail-share-room .content-wrapper .content {
  padding-top: 4rem;
}
.body-salon-list .salon-zenkoku {
  margin-bottom: 4rem;
}
.body-salon-list .salon-zenkoku__link {
  display: block;
  max-width: min(88%, 1080px);
  margin: 0 auto;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.body-salon-list .salon-zenkoku__link:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.16);
}
.body-salon-list .salon-zenkoku__img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 20 / 7;
  object-fit: cover;
}
@media screen and (max-width:767px) {
  /* SPは1列なので横いっぱい */
  .body-salon-list .content-wrapper .content,
  .body-member .content-wrapper .content,
  .body-member-map .content-wrapper .content,
  .body-news-list .content-wrapper .content,
  .body-page-detail-share-room .content-wrapper .content {
    padding-top: 2.4rem;
  }
  .body-salon-list .salon-zenkoku {
    margin-bottom: 2.4rem;
  }
  .body-salon-list .salon-zenkoku__link {
    max-width: 100%;
  }
}

/*=======================================================================

   MAYIM ご利用ガイド導線（layout-mayim）
   ・フロート「MAYIM はじめての方へ ― ご利用ガイド ―」（.guide-float）
       PC=右下 / SP=左下（下部固定ナビがある時はその上）。×で閉じるとそのアカウントには以後出さない
   ・ドロワー内「MAYIM ご利用ガイド」ボタン（.guide-drawer-btn）
   支給画像（アセット23〜26・29・30）はCSS＋テキストで再現（文言はテンプレ側で変更可）

=======================================================================*/
/* ----- フロート ----- */
.guide-float {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 998; /* SP下部固定ナビ(999)・検索結果に戻る(1000)より下 */
  width: 340px;
}
/* 「検索結果に戻る」ボタン（PC右下）と重ならないよう上へ（JSが付与） */
.guide-float.guide-float--lifted {
  bottom: 92px;
}
.guide-float__btn,
.guide-float__btn:link,
.guide-float__btn:visited,
.guide-float__btn:hover,
.guide-float__btn:active,
.guide-float__btn:focus {
  color: #fff;
  text-decoration: none !important;
}
/* 申込フォーム(form.css の .body-form-detail a:not(header a, footer a, .sns-detail a) {color: var(--mainColor)})
   は詳細度が上のため、IDで白を明示 */
#mayimGuideFloat .guide-float__btn {
  color: #fff;
}
.guide-float__btn {
  position: relative;
  isolation: isolate; /* テクスチャの mix-blend-mode をボタン内に閉じ込める */
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 108px;
  border-radius: 999px;
  font-family: "Shippori Mincho B1", serif;
  line-height: 1.25;
  text-align: center;
  /* 地色＋にじみ（明るいピンクの抜けと、濃いピンクのたまり） */
  background-color: #d9559a;
  background-image:
    radial-gradient(60% 90% at 12% 80%, rgba(255,255,255,.16), rgba(255,255,255,0) 62%),
    radial-gradient(50% 75% at 85% 15%, rgba(255,255,255,.12), rgba(255,255,255,0) 66%),
    radial-gradient(42% 70% at 68% 92%, rgba(170,30,100,.18), rgba(170,30,100,0) 70%),
    radial-gradient(40% 66% at 28% 10%, rgba(170,30,100,.12), rgba(170,30,100,0) 72%);
  box-shadow: 0 6px 18px rgba(0, 0, 0, .22);
  transition: transform .2s ease, box-shadow .2s ease;
}
/* 水彩のムラ（.community-nav__item と同じ手法） */
.guide-float__btn::before {
  content: "";
  position: absolute;
  inset: -20%;
  z-index: -1;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='120'%3E%3Cfilter id='c'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.022 0.05' numOctaves='3' seed='11' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='240' height='120' filter='url(%23c)'/%3E%3C/svg%3E");
  background-size: 240px 120px;
  mix-blend-mode: soft-light;
  opacity: .45;
  pointer-events: none;
}
.guide-float__btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(0, 0, 0, .26);
}
.guide-float__en {
  font-size: 1.8rem;
  letter-spacing: .18em;
}
.guide-float__main {
  font-size: 2.8rem;
  font-weight: 600;
  letter-spacing: .08em;
}
/* 「― ご利用ガイド ―」の前後の線 */
.guide-float__sub {
  display: inline-flex;
  align-items: center;
  gap: .8rem;
  margin-top: .2rem;
  font-size: 1.7rem;
  letter-spacing: .14em;
}
.guide-float__sub::before,
.guide-float__sub::after {
  content: "";
  width: 1.8rem;
  height: 1px;
  background: currentColor;
}
/* × ボタン（ボタンの左上に重ねる） */
.guide-float__close {
  position: absolute;
  top: -14px;
  left: -8px;
  z-index: 1;
  width: 50px;
  height: 50px;
  padding: 0;
  border: 2px solid var(--mainColor);
  border-radius: 50%;
  background: #fff;
  color: var(--mainColor);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .12);
}
.guide-float__close svg {
  width: 30px;
  height: 30px;
  display: block;
}
.guide-float__close:hover {
  background: #f1f9fa;
}

@media screen and (max-width:559px) {
  /* SPは左下。右下はチャット等の丸ボタンがあるため避ける */
  .guide-float {
    right: auto;
    left: 12px;
    bottom: 16px;
    width: 250px;
  }
  /* 下部固定ナビがある時はその上に出す */
  .guide-float.guide-float--with-nav {
    bottom: 76px;
  }
  /* SPの「検索結果に戻る」は右側の丸ボタンなので重ならない（持ち上げ不要） */
  .guide-float.guide-float--lifted {
    bottom: 16px;
  }
  .guide-float.guide-float--with-nav.guide-float--lifted {
    bottom: 76px;
  }
  .guide-float__btn {
    height: 80px;
  }
  .guide-float__en {
    font-size: 1.4rem;
  }
  .guide-float__main {
    font-size: 2rem;
  }
  .guide-float__sub {
    font-size: 1.3rem;
    gap: .6rem;
  }
  .guide-float__sub::before,
  .guide-float__sub::after {
    width: 1.4rem;
  }
  .guide-float__close {
    top: -10px;
    left: -2px;
    width: 36px;
    height: 36px;
    border-width: 1.5px;
  }
  .guide-float__close svg {
    width: 22px;
    height: 22px;
  }
}

/* ----- ドロワー内ボタン ----- */
header.mayim-header .drawer-nav .drawer-menu .guide-drawer-item {
  margin-top: 4rem;
}
/* SPはメニューの先頭に置くため、上ではなく下（メニューとの間）を空ける（PCはメニューの最後のまま） */
header.mayim-header .drawer-nav .drawer-menu .guide-drawer-item:first-child {
  margin-top: 0;
  margin-bottom: 3rem;
}
/* ドロワーを開いている間は、ドロワー内に同じリンクがあるためフロート（はじめての方へ）を出さない */
.drawer-open .guide-float {
  display: none !important;
}
header.mayim-header .drawer-nav .drawer-menu .guide-drawer-item a.guide-drawer-btn,
header.mayim-header .drawer-nav .drawer-menu .guide-drawer-item a.guide-drawer-btn:link,
header.mayim-header .drawer-nav .drawer-menu .guide-drawer-item a.guide-drawer-btn:visited,
header.mayim-header .drawer-nav .drawer-menu .guide-drawer-item a.guide-drawer-btn:hover {
  color: var(--mainColor);
  text-decoration: none !important;
}
header.mayim-header .drawer-nav .drawer-menu .guide-drawer-item a.guide-drawer-btn {
  display: flex;
  align-items: center;
  width: 260px;
  height: 70px;
  padding: 0 1.8rem 0 2.2rem;
  border-radius: 999px;
  background: #daecef;
  font-family: "Shippori Mincho B1", serif;
  line-height: 1.2;
  transition: opacity .2s ease;
}
header.mayim-header .drawer-nav .drawer-menu .guide-drawer-item a.guide-drawer-btn:hover {
  opacity: .8;
}
.guide-drawer-btn__icon {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  padding-right: 1.4rem;
  margin-right: 1.4rem;
  border-right: 1.5px solid rgba(104, 184, 198, .7); /* アイコンと文字の区切り線 */
  height: 46px;
}
.guide-drawer-btn__icon svg {
  width: 46px;
  height: 31px;
  display: block;
}
.guide-drawer-btn__text {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
}
.guide-drawer-btn__en {
  font-size: 1.2rem;
  letter-spacing: .14em;
}
.guide-drawer-btn__ja {
  font-size: 1.9rem;
  letter-spacing: .12em;
}
.guide-drawer-btn__arrow {
  flex: 0 0 auto;
  display: flex;
}
.guide-drawer-btn__arrow svg {
  width: 10px;
  height: 16px;
  display: block;
}

@media screen and (max-width:559px) {
  /* SPは横幅いっぱい・「MAYIM ご利用ガイド」を1行で */
  header.mayim-header .drawer-nav .drawer-menu .guide-drawer-item {
    margin-top: 3rem;
  }
  header.mayim-header .drawer-nav .drawer-menu .guide-drawer-item a.guide-drawer-btn {
    width: 100%;
    height: 44px;
    padding: 0 1.8rem 0 2rem;
  }
  .guide-drawer-btn__icon {
    height: 30px;
    padding-right: 1.2rem;
    margin-right: 1.6rem;
  }
  .guide-drawer-btn__icon svg {
    width: 38px;
    height: 25px;
  }
  .guide-drawer-btn__text {
    flex-direction: row;
    align-items: baseline;
    gap: .8rem;
  }
  .guide-drawer-btn__en {
    font-size: 1.4rem;
  }
  .guide-drawer-btn__ja {
    font-size: 1.7rem;
  }
}

/* SE等の小さい端末（縦が短い／横が狭い）ではフロートを一回り小さくして圧迫感を抑える */
@media screen and (max-width:559px) and (max-height:700px), screen and (max-width:375px) {
  .guide-float {
    left: 10px;
    width: 168px;
  }
  .guide-float.guide-float--with-nav,
  .guide-float.guide-float--with-nav.guide-float--lifted {
    bottom: 72px;
  }
  .guide-float__btn {
    height: 52px;
  }
  .guide-float__en {
    font-size: 1rem;
  }
  .guide-float__main {
    font-size: 1.4rem;
  }
  .guide-float__sub {
    font-size: 1rem;
    gap: .4rem;
  }
  .guide-float__sub::before,
  .guide-float__sub::after {
    width: 1rem;
  }
  .guide-float__close {
    top: -8px;
    left: -4px;
    width: 26px;
    height: 26px;
  }
  .guide-float__close svg {
    width: 16px;
    height: 16px;
  }
}

/*-----------------------

   お支払い方法 カード入力欄（/pay 等 common/pay.html。分割払いの #installmentBox も含む）＋クレジットカード登録（/card/edit）
   GMO / PAY.JP / Stripe / ソニー共通。インラインwidthを上書きするため一部!important
   /card/edit は .payment #creditBox が無いため、.body-card-edit #cardAnchor でも同じ指定を当てる

-----------------------*/
.payment #creditBox .row,
.payment #installmentBox .row,
.body-card-edit #cardAnchor .row {
  margin-bottom: 18px;
}
.payment #creditBox .row:last-child,
.payment #installmentBox .row:last-child,
.body-card-edit #cardAnchor .row:last-child {
  margin-bottom: 0;
}
.payment #creditBox .control-label,
.payment #installmentBox .control-label,
.body-card-edit #cardAnchor .control-label {
  display: inline-block;
  margin-bottom: 8px;
  font-size: 14px;
  letter-spacing: 0.1em;
}
.payment #creditBox input.card-info,
.payment #creditBox select.card-info,
.payment #creditBox .payjs-outer,
.payment #creditBox .stripe-input,
.payment #installmentBox input.card-info,
.payment #installmentBox select.card-info,
.payment #installmentBox .payjs-outer,
.payment #installmentBox .stripe-input,
.body-card-edit #cardAnchor input.card-info,
.body-card-edit #cardAnchor select.card-info,
.body-card-edit #cardAnchor .payjs-outer,
.body-card-edit #cardAnchor .stripe-input {
  box-sizing: border-box;
  height: 46px;
  padding: 0 14px;
  border: 1px solid var(--base50Color);
  border-radius: 6px;
  background-color: var(--colorW);
  color: var(--baseColor);
  font-size: 16px; /* iOSのズーム防止 */
  letter-spacing: 0.05em;
  font-variant-numeric: lining-nums tabular-nums;
  box-shadow: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.payment #creditBox input.card-info,
.payment #installmentBox input.card-info,
.body-card-edit #cardAnchor input.card-info {
  width: 100% !important;
  max-width: 22em !important;
}
.payment #creditBox input.card-info::placeholder,
.payment #installmentBox input.card-info::placeholder,
.body-card-edit #cardAnchor input.card-info::placeholder {
  color: var(--base50Color);
}
.payment #creditBox input.card-info:focus,
.payment #creditBox select.card-info:focus,
.payment #installmentBox input.card-info:focus,
.payment #installmentBox select.card-info:focus,
.body-card-edit #cardAnchor input.card-info:focus,
.body-card-edit #cardAnchor select.card-info:focus {
  outline: none;
  border-color: var(--mainColor);
  box-shadow: 0 0 0 3px var(--main50Color);
}
/* セキュリティコードは短く */
.payment #creditBox input[name="cvc"],
.payment #installmentBox input[name="cvc"],
.body-card-edit #cardAnchor input[name="cvc"] {
  max-width: 8em !important;
}
/* 有効期限（月・年のセレクト） */
.payment #creditBox select.card-info,
.payment #installmentBox select.card-info,
.body-card-edit #cardAnchor select.card-info {
  display: inline-block;
  width: auto !important;
  min-width: 5.5em;
  padding-right: 34px;
  margin-right: 6px;
  vertical-align: middle;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%2368b8c6' stroke-width='1.6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  cursor: pointer;
}
.payment #creditBox select.card-info + select.card-info,
.payment #creditBox select[name="exp_year"],
.payment #installmentBox select.card-info + select.card-info,
.payment #installmentBox select[name="exp_year"],
.body-card-edit #cardAnchor select.card-info + select.card-info,
.body-card-edit #cardAnchor select[name="exp_year"] {
  margin-left: 14px;
}
/* PAY.JP / Stripe の埋め込み枠 */
.payment #creditBox .payjs-outer,
.payment #creditBox .stripe-input,
.payment #installmentBox .payjs-outer,
.payment #installmentBox .stripe-input,
.body-card-edit #cardAnchor .payjs-outer,
.body-card-edit #cardAnchor .stripe-input {
  display: flex;
  align-items: center;
  width: 100% !important;
  max-width: 22em !important;
}
.payment #creditBox #expiry-form,
.payment #creditBox #cvc-form,
.payment #creditBox .stripe-input#exp,
.payment #creditBox .stripe-input#cvc,
.payment #installmentBox #expiry-form,
.payment #installmentBox #cvc-form,
.payment #installmentBox .stripe-input#exp,
.payment #installmentBox .stripe-input#cvc,
.body-card-edit #cardAnchor #expiry-form,
.body-card-edit #cardAnchor #cvc-form,
.body-card-edit #cardAnchor .stripe-input#exp,
.body-card-edit #cardAnchor .stripe-input#cvc {
  max-width: 8em !important;
}
.payment #creditBox .stripe-input > div,
.payment #creditBox .payjs-outer > div,
.payment #creditBox .payjs-outer iframe,
.payment #installmentBox .stripe-input > div,
.payment #installmentBox .payjs-outer > div,
.payment #installmentBox .payjs-outer iframe,
.body-card-edit #cardAnchor .stripe-input > div,
.body-card-edit #cardAnchor .payjs-outer > div,
.body-card-edit #cardAnchor .payjs-outer iframe {
  width: 100%;
}
.payment #creditBox .help-block:empty,
.payment #installmentBox .help-block:empty,
.body-card-edit #cardAnchor .help-block:empty {
  display: none;
}

/* ===== タグ検索結果（SP）：見出しまわりとカード下タグの縦幅を詰める ===== */
@media screen and (max-width:559px) {
  /* 見出し（「〇〇」の検索結果）上下の余白を詰める */
  .body-search .content-header {
    padding-top: 2rem;
    margin-bottom: 1.6rem;
  }
  /* 基底のSP指定（行間2.3・字間0.3em）だと長い語で2行になり縦に伸びるため詰める */
  .body-search .content-header .page-header {
    letter-spacing: 0.1em;
    line-height: 1.5;
  }
  .body-search .search-count {
    margin-top: 4px;
  }
  /* カード下のタグの行間と上の余白を詰める */
  .body-search .m-tagList__body {
    margin-top: 0.4rem;
    line-height: 1.3;
  }
}

/* ===== ご利用ガイドのフロート（SP）：右下に置き、小さくする ===== */
@media screen and (max-width:559px) {
  .guide-float {
    left: auto;
    right: 12px;
    width: 175px;
  }
  /* 右下の「検索結果に戻る」丸ボタン（right:16px / bottom:76px / 48px）と重ならないよう、その上に出す */
  .guide-float.guide-float--lifted,
  .guide-float.guide-float--with-nav.guide-float--lifted {
    bottom: 134px;
  }
  .guide-float__btn {
    height: 56px;
  }
  .guide-float__en {
    font-size: 1rem;
  }
  .guide-float__main {
    font-size: 1.45rem;
  }
  .guide-float__sub {
    font-size: 0.95rem;
  }
  /* 本体に合わせて閉じるボタンも小さくする */
  .guide-float__close {
    top: -8px;
    width: 28px;
    height: 28px;
  }
  .guide-float__close svg {
    width: 16px;
    height: 16px;
  }
}

/* ===== 入会フォーム：チェックボックスが枠の外に出る対策 =====
   account.css（SP）の label > .icon-checkbox-icon { margin-left: -1.6em; text-indent: .4em; } で
   アイコンが左にずれて表の枠からはみ出すため、申込フォームの表内では打ち消す */
table.entry label > .icon-checkbox-icon {
  margin-left: 0;
  text-indent: 0;
}

/* ===== ドロワー：1つ目のメニューが空のとき（未ログイン等）に横線が2本並ぶ対策 =====
   「ログイン」の下線と、2つ目のメニューの上線の間に空の余白ができるため、2つ目の上線と余白を消す */
header.mayim-header .drawer-nav .drawer-menu:not(:has(> li)) + .drawer-menu.second {
  border-top: none;
  margin-top: 0;
}

/* ===== カード入力欄（SP）：左端がそろわない対策 =====
   配信CSS（style.css）のSP指定 input, textarea, select { font-size: 20px; transform: scale(0.8); }（iOSの拡大防止）で
   カード番号・セキュリティコードが0.8倍に縮んで右にずれるため、カード入力欄では縮小を打ち消す。
   文字サイズはカード入力欄の指定で16pxにしているため、iOSの拡大は起きない */
@media screen and (max-width:559px) {
  .payment #creditBox input.card-info,
  .payment #creditBox select.card-info,
  .payment #installmentBox input.card-info,
  .payment #installmentBox select.card-info,
  .body-card-edit #cardAnchor input.card-info,
  .body-card-edit #cardAnchor select.card-info {
    transform: none;
  }
}

/* ===== お支払い方法（SP）：選択肢の下に開く枠の左余白を詰める =====
   common.css の .payment .panel-collapse { margin-left: 30px; } で左が空きすぎるため、SPでは左右の余白を見出しと同じ15pxにそろえる */
@media screen and (max-width:559px) {
  .payment .panel-collapse {
    margin-left: 0;
    padding-left: 15px;
    padding-right: 15px;
  }
}

/* ===== お支払い方法：支払方法のラジオ（◎クレジットカード 等） =====
   丸アイコン（26px）が置き場所（24px）からはみ出して文字にかぶり、詰まって見えるため、丸の位置は変えずに右側だけ間を空ける */
.payment .panel-title .icon-radio-input ~ .icon-radio-icon::before {
  width: auto;
  margin-right: 8px;
}

/* ===== お支払い方法（SP）：支払方法のラジオ・ロゴと「カード番号」・入力欄の左端をそろえる =====
   見出し（.panel-heading）と入力部分（.panel-collapse）の左余白をどちらも15pxにそろえる。
   透明のラジオボタン本体（opacity:0）が行の中で場所を取り丸が右にずれるため、場所を取らない置き方にする */
@media screen and (max-width:559px) {
  .payment .panel-heading {
    padding-left: 15px;
  }
  .payment .panel-title .icon-radio-input {
    position: absolute;
    margin: 0;
  }
  /* 丸の行（●クレジットカード）だけ少し右へ（下のカードのロゴの頭に合わせる） */
  .payment .panel-title .icon-radio-icon {
    margin-left: 4px;
  }
}

/* ===== オンラインサロン：一覧カード・詳細見出しの状態バッジ（入会済／満員御礼／入会手続中／退会手続中）を出さない =====
   SARU地域サロンは住所に合わせてバッチで自動入会するため、「入会済」があると
   Facebookグループに参加済みと誤解されやすい。オンラインサロンでは状態の表示自体が不要になったため、まとめて非表示にする */
.body-salon-list .card .badge.bgred,
.body-salon-detail .content-header .page-header .badge.bgred {
  display: none !important;
}

/* mayim 申込完了（会員タイプ /member/pay/complete・イベント /event/pay/complete）
   テンプレートは member/template/member-pay-complete-mayim.html、event/template/event-pay-complete-mayim.html。
   ヒーロー（Welcome/Thank you）＋ステップ形式で、次に何をすればよいかを案内する */
.mayim-complete .content {
  max-width: 760px;
  margin: 0 auto;
  padding: 24px 16px 80px;
}
/* ヒーロー */
.mayim-complete-hero {
  text-align: center;
  padding: 40px 16px 36px;
  border-radius: 16px;
  background:
    radial-gradient(circle at 15% 20%, rgba(180, 220, 227, .55) 0, transparent 45%),
    radial-gradient(circle at 85% 80%, rgba(249, 207, 163, .45) 0, transparent 45%),
    var(--main10Color);
}
.mayim-complete-hero__en {
  font-family: "Cormorant Garamond", serif;
  font-style: italic;
  font-size: 40px;
  line-height: 1.2;
  color: var(--mainColor);
  letter-spacing: .06em;
}
.mayim-complete-hero__en::before,
.mayim-complete-hero__en::after {
  content: "\273F";
  font-style: normal;
  font-size: .5em;
  vertical-align: middle;
  margin: 0 .6em;
  color: var(--main50Color);
}
.mayim-complete-hero__ttl {
  margin: 12px 0 8px;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--subColor);
  letter-spacing: .12em;
}
.mayim-complete-hero__lead {
  margin: 0;
  font-size: 15px;
}
.mayim-complete-hero__lead strong {
  color: var(--accentColor);
}
/* 申し込んだイベント（イベント申込完了のみ） */
.mayim-complete-event {
  margin: 28px auto 0;
  padding: 18px 22px;
  border-radius: 12px;
  background: var(--colorW);
  border: 1px dashed var(--main50Color);
  text-align: left;
}
.mayim-complete-event__label {
  font-family: "Cormorant Garamond", serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .15em;
  color: var(--mainColor);
}
.mayim-complete-event__name {
  margin: 2px 0 6px;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.6;
  color: var(--subColor);
}
.mayim-complete-event__date {
  margin: 0;
  font-size: 14px;
}
/* ステップ */
.mayim-complete-steps {
  list-style: none;
  margin: 40px 0 0;
  padding: 0;
}
.mayim-complete-step,
.mayim-complete-card {
  position: relative;
  display: flex;
  gap: 20px;
  align-items: flex-start;
  padding: 24px;
  border: 1px solid var(--main50Color);
  border-radius: 12px;
  background: var(--colorW);
}
.mayim-complete-card {
  margin-top: 32px;
}
.mayim-complete-step + .mayim-complete-step {
  margin-top: 40px;
}
/* ステップ間の矢印 */
.mayim-complete-step + .mayim-complete-step::before {
  content: "";
  position: absolute;
  top: -30px;
  left: 50%;
  width: 14px;
  height: 14px;
  border-right: 2px solid var(--main50Color);
  border-bottom: 2px solid var(--main50Color);
  transform: translateX(-50%) rotate(45deg);
}
.mayim-complete-step__icon {
  flex: 0 0 64px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--main10Color);
  color: var(--mainColor);
}
.mayim-complete-step__icon svg {
  width: 30px;
  height: 30px;
}
.mayim-complete-step__body {
  flex: 1;
  min-width: 0;
}
.mayim-complete-step__num {
  font-family: "Cormorant Garamond", serif;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .15em;
  color: var(--mainColor);
}
.mayim-complete-step__ttl {
  margin: 0 0 6px;
  font-size: 19px;
  font-weight: 700;
  line-height: 1.6;
  color: var(--subColor);
}
.mayim-complete-step__txt {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.8;
}
.mayim-complete-step__mail {
  margin: 12px 0 0;
  padding: 10px 14px;
  background: var(--main10Color);
  border-radius: 8px;
  font-size: 13.5px;
  line-height: 1.7;
}
.mayim-complete-step__mail dt {
  float: left;
  clear: left;
  width: 4.5em;
  color: var(--subColor);
  font-weight: 600;
}
.mayim-complete-step__mail dd {
  margin: 0 0 0 4.5em;
  word-break: break-all;
}
/* 強調ステップ（次にやること） */
.mayim-complete-step--primary {
  border: 2px solid var(--mainColor);
  box-shadow: 0 6px 20px rgba(104, 184, 198, .18);
}
.mayim-complete-step--primary .mayim-complete-step__icon {
  background: var(--mainColor);
  color: var(--colorW);
}
/* ボタン */
.mayim-complete-btn,
.mayim-complete-btn-sub {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 280px;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 700;
  transition: background .2s;
}
.mayim-complete-btn {
  margin-top: 16px;
  padding: 14px 32px;
  background: var(--mainColor);
  color: var(--colorW);
  font-size: 17px;
  letter-spacing: .15em;
}
.mayim-complete-btn:hover,
.mayim-complete-btn:focus {
  background: var(--subColor);
  color: var(--colorW);
  text-decoration: none;
}
.mayim-complete-btn-sub {
  margin-top: 10px;
  padding: 12px 32px;
  border: 1px solid var(--mainColor);
  background: var(--colorW);
  color: var(--mainColor);
  font-size: 15px;
  letter-spacing: .12em;
}
.mayim-complete-btn-sub:hover,
.mayim-complete-btn-sub:focus {
  background: var(--main10Color);
  color: var(--mainColor);
  text-decoration: none;
}
.mayim-complete-btns {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
/* ログイン後にできること（PCはヘッダーのボタン画像、SPはSPヘッダーのタブ画像） */
.mayim-complete-can-do {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-top: 14px;
}
.mayim-complete-can-do figure {
  margin: 0;
}
.mayim-complete-can-do img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 8px;
}
.mayim-complete-can-do .sp-img {
  display: none;
}
.mayim-complete-can-do figcaption {
  margin-top: 4px;
  font-size: 12.5px;
  line-height: 1.5;
  text-align: center;
}
/* Makeshop連携失敗の案内・紹介ポイント */
.mayim-complete-alert,
.mayim-complete-point {
  margin-top: 32px;
}
.mayim-complete-alert p,
.mayim-complete-point p {
  margin: 0 0 6px;
  line-height: 1.8;
}
.mayim-complete-point__main {
  color: #bf0000;
  font-weight: bold;
}
/* メールが届かないとき（開閉式） */
.mayim-complete-trouble {
  margin-top: 40px;
  border-radius: 10px;
  background: #fafafa;
  font-size: 14px;
}
.mayim-complete-trouble summary {
  cursor: pointer;
  list-style: none;
  padding: 14px 20px;
  color: var(--subColor);
  font-weight: 600;
}
.mayim-complete-trouble summary::-webkit-details-marker {
  display: none;
}
.mayim-complete-trouble summary::before {
  content: "\FF0B";
  margin-right: 8px;
  color: var(--mainColor);
}
.mayim-complete-trouble[open] summary::before {
  content: "\FF0D";
}
.mayim-complete-trouble ul {
  margin: 0;
  padding: 0 20px 16px 40px;
  line-height: 1.9;
}
@media only screen and (max-width: 559px) {
  .mayim-complete .content {
    padding: 8px 12px 60px;
  }
  .mayim-complete-hero {
    padding: 26px 12px 22px;
  }
  .mayim-complete-hero__en {
    font-size: 28px;
  }
  .mayim-complete-hero__ttl {
    font-size: 19px;
    letter-spacing: .06em;
  }
  .mayim-complete-hero__lead {
    font-size: 13.5px;
  }
  .mayim-complete-event {
    padding: 14px 16px;
  }
  .mayim-complete-event__name {
    font-size: 16px;
  }
  .mayim-complete-steps {
    margin-top: 28px;
  }
  .mayim-complete-step,
  .mayim-complete-card {
    gap: 12px;
    padding: 16px 14px;
  }
  .mayim-complete-step + .mayim-complete-step {
    margin-top: 32px;
  }
  .mayim-complete-step + .mayim-complete-step::before {
    top: -25px;
  }
  .mayim-complete-step__icon {
    flex-basis: 44px;
    height: 44px;
  }
  .mayim-complete-step__icon svg {
    width: 22px;
    height: 22px;
  }
  .mayim-complete-step__ttl {
    font-size: 16.5px;
  }
  .mayim-complete-step__txt {
    font-size: 13.5px;
  }
  .mayim-complete-btn,
  .mayim-complete-btn-sub {
    width: 100%;
    min-width: 0;
  }
  .mayim-complete-btn {
    font-size: 16px;
  }
  .mayim-complete-btns {
    align-items: stretch;
  }
  /* SPはSPヘッダーと同じタブ画像を縦に並べ、説明は横に */
  .mayim-complete-can-do {
    grid-template-columns: 1fr;
  }
  .mayim-complete-can-do figure {
    display: flex;
    align-items: center;
    gap: 12px;
  }
  .mayim-complete-can-do .pc-img {
    display: none;
  }
  .mayim-complete-can-do .sp-img {
    display: block;
    flex: 0 0 62%;
    width: 62%;
    border-radius: 6px;
  }
  .mayim-complete-can-do figcaption {
    margin-top: 0;
    font-size: 12.5px;
    text-align: left;
  }
  .mayim-complete-can-do figcaption br {
    display: none;
  }
  .mayim-complete-trouble {
    font-size: 13px;
  }
}

/*====================================================================
  ライブ視聴（Zoom Web SDK / /live/join）SP表示崩れ対策
  --------------------------------------------------------------------
  ① 参加中ローディング（#wc-loading）は body 直下の通常フローに置かれるため、
     会員サイトの本文（.content-wrapper）の下から始まり、上部に黒い帯が出る。
     → 画面左上に固定して全面に出す。
  ② チャット窓は ReactModal で「top:50% + translate(-50%,-50%)」の中央寄せ。
     iOS（LINE内ブラウザ等）はツールバー分だけ実表示が短く、窓の上端（タイトル・×）が
     画面外に出て閉じられない。→ 上端に固定し、高さを実表示（svh）からツールバー分引く。
  ③ 自分が送ったリアクションは「更なる情報」ボタン直上に小さく出るため、
     画面右下（ツールバーの上）に大きめに出す。表示要素は1つで、連続で押しても
     差し替わるだけなので積み重ならない。
==================================================================== */
body.zoom_attendees #wc-loading {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
}
@media screen and (max-width: 959px) {
  body.zoom_attendees .ReactModal__Content--after-open:has(> #chat-window) {
    top: 8px !important;
    bottom: auto !important;
    transform: translateX(-50%) !important;
  }
  body.zoom_attendees #chat-window {
    height: calc(100svh - 76px) !important;
  }
  /* iOSは入力欄の文字が16px未満だとフォーカス時に自動で拡大し、戻っても拡大・位置ずれが残って
     ×が画面外に出る。mayimは幅414固定で縮小表示になるため、余裕をみて17pxにする */
  body.zoom_attendees #chat-window .ProseMirror {
    font-size: 17px !important;
  }
  body.zoom_attendees .footer-button__mobile-portrait [class*=nonverbal-feedback-container] {
    position: fixed !important;
    top: auto !important;
    left: auto !important;
    right: 16px !important;
    bottom: 140px !important;
    transform: scale(1.8);
    transform-origin: right bottom;
    z-index: 1 !important;
  }
}