@charset "UTF-8";
/*-----------------------

         変数

-----------------------*/ :root {
  --baseColor: #3c3c3c;
  --mainColor: #547bb4;
  --subColor: #378784;
  --accentColor: #;
  --colorW: #ffffff;
  --base50Color: #9e9e9e;
  --main50Color: #aabdd9;
  --sub50Color: #9bc3c1;
  --accent50Color: #;
  --base10Color: #eebebeb;
  --main10Color: #eef2f8;
  --sub10Color: #ebf3f3;
  --accent10Color: #;
}
/*-----------------------

         COMMON

-----------------------*/
.content-header {
  padding-top: clamp(7rem, 2.5097087379rem + 11.9741100324vw, 25.5rem);
  background-color: transparent;
  position: relative;
}
.content-header .page-header {
  font-size: clamp(2.6rem, 2.0660194175rem + 1.4239482201vw, 4.8rem);
  font-weight: 500;
  letter-spacing: 0.3em;
  line-height: 1.5;
  text-align: left;
  color: var(--mainColor);
  padding-left: 15rem;
}
@media only screen and (max-width: 559px) {
  .content-header .page-header {
    text-align: center;
    padding-left: auto;
    padding-left: 0;
    letter-spacing: 0.3em;
    line-height: 2.3076923077;
  }
}
.content-header .page-header span {
  color: var(--mainColor);
  display: block;
  font-size: clamp(1.2rem, 0.9572815534rem + 0.6472491909vw, 2.2rem);
  letter-spacing: 0.2em;
}
.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/maf_arrow-r.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;
}
.drawer--right .drawer-nav .drawer-menu .o-drawer__submenu__item a {
  padding: 1rem 0 1rem;
}

/* ドロワーのドロップダウン（アカウントメニュー・コミュニティなど全部）：
   ヘッダーのドロップダウン（.mypage-list）と同じ見た目にする */
.drawer-nav .o-drawer__submenu {
  width: max-content;
  min-width: 100%;
  padding: 0 1.8rem 1rem;
  border-radius: 0.8rem;
  background: transparent;
  white-space: nowrap;
}
/* 半透明は ::before だけに持たせる（パネル自体を透かすと後ろのメニューが透けて読みにくい） */
.drawer-nav .o-drawer__submenu::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--mainColor);
  opacity: 0.9;
  z-index: -1;
  border-radius: 0.8rem;
}
.drawer-nav .o-drawer__menulink.on + .o-drawer__submenu {
  opacity: 1;
}
.drawer--right .drawer-nav .drawer-menu .o-drawer__submenu__item a {
  display: block;
  padding: 1.8rem 0 1rem;
  font-size: 1.4rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-align: center;
  color: var(--colorW);
}

/* ドロワー：ロゴ〜1件目（アカウントメニュー）の間が空きすぎるので詰める（6rem → 3rem） */
.drawer--right .drawer-nav .wrapper {
  padding-top: 3rem;
}

/* PCでもドロワーを開けるようにしたので、ハンバーガーの位置を調整
   標準は四角(::after)が103pxでボタンが右上0基準のため、上32px・右12pxが画面外に切れる。
   ヘッダー右の余白(50px)に収まるサイズ・位置にする */
@media screen and (min-width: 560px) {
  .drawer-hamburger {
    width: 3.4rem;
  }
  button.drawer-toggle.drawer-hamburger::after {
    width: 48px;
    height: 48px;
  }
  /* 上端は画面の角にぴったり、右はスクロールバーに掛からないよう16px空ける */
  .drawer--right .drawer-hamburger,
  .drawer--right.drawer-open .drawer-hamburger {
    top: 0.4rem;
    right: 2.3rem;
  }
  /* 氏名・カートはハンバーガーの真横に来るので、四角と天地中央を合わせて右に余白を取る
     （後方の .l-hdr__right { margin-top: 1.5rem } に負けないよう header を付けて詳細度を上げている） */
  header .l-hdr__right {
    margin-top: -1.2rem;
    margin-right: 3rem;
    align-items: center;
  }
}

.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: 3.3rem;
  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;
  min-width: 100%;
  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: 1.5rem;
  margin-top: 1rem;
  cursor: pointer; /* マウスカーソル */
}
.c_headline_h2_02 {
  letter-spacing: 0.1em;
}
.l-hdr__cart__link {
  position: relative;
  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;
}
@media only screen and (max-width: 559px) {
  .mypage-list {
    top: 5rem;
  }
  header p.login, header .mypage.loginBtn p {
    font-size: 1.2rem;
    letter-spacing: 0;
  }
  .login_name {
    max-width: 120px; /* 好きな幅に調整 */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}
/*====================================================================
　お問い合わせフローティングボタン
====================================================================*/
.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;
}
@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: 14px;
    bottom: 14px;
    width: 10rem;
    height: 10rem;
    border-radius: 50%;
    justify-content: center;
    background: url("../img/contact-bg-circle.png") no-repeat center / cover;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);
  }
  .floating-contact__text-ja {
    font-size: 1.4rem;
    letter-spacing: 0.08em;
  }
  .floating-contact__text-en {
    margin-top: 4px;
    font-size: 0.9rem;
    letter-spacing: 0.12em;
  }
  .l-hdr__right {
    gap: 1.2rem;
  }
  .l-hdr__cart__count {
    top: -6px;
    right: -10px;
    font-size: 0.95rem;
    padding: 0.35rem 0.4rem;
  }
}
@media screen and (max-width:375px) {}
@media screen and (max-width:361px) {}
/*================================================


追記CSS 20260426


=================================================*/
html, body {
  font-family:
    "Poppins", "Zen Kaku Gothic New", sans-serif;
}
a:hover, a:focus {
  opacity: 0.8;
  text-decoration: none;
  color: var(--mainColor);
}
@media screen and (min-width: 1921px) {
  .content-header {
    min-height: 650px;
  }
  footer.main-footer {
    padding: 29vw 2rem 0rem;
  }
}
.content-header {
  width: 100vw;
  margin-left: 0;
  margin-right: 0;
  /* 見出し下の余白は不要（style.css の clamp(5rem, …, 14rem) を打ち消す） */
  margin-bottom: 0;
}
.l-hdr__menu {
  margin-top: 3.5rem;
  padding-top: 0rem;
  color: #fff;
}
.l-hdr__login__link {
  color: #fff;
}
@media screen and (max-width: 559px) {
  .l-hdr__login__link {
    color: var(--baseColor);
  }
}
.o_text_18._calender {
  margin-top: 2rem;
}
.c_headline_h2_02::before {
  color: rgb(94 107 32 / 10%);
}
.c_headline_h2_02 {
  text-align: center;
}
.l_live {
  padding-top: clamp(8rem, 6.5436893204rem + 3.8834951456vw, 14rem);
  padding-bottom: clamp(8rem, 6.5436893204rem + 3.8834951456vw, 14rem);
}
footer.main-footer {
  background-image: url("../img/maf_footer_bg.webp") !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  background-size: cover !important;
  background-color: transparent !important;
  position: relative;
  color: #fff;
  padding: 27vw 2rem 0rem;
  height: 33vw;
}
.l-footer__copy {
  margin-top: 10px;
}
.l_calender {
  padding-top: 30px;
}
.swiper-pagination-bullet-active {
  background: var(--mainColor);
}
@media screen and (max-width:559px) {
  .circle_news_heading {
    margin-top: 2rem;
  }
  footer.main-footer {
    background-image: url(../img/maf_footer_bg_sp.webp) !important;
    padding: 46vw 2rem 6vw;
    height: 94vw;
    /* リンク・コピーライトを下寄せ */
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
  }
  .l-footer ul {
    gap: 6px;
    font-size: 12px;
  }
  /* SPはアイコンのみ（氏名・▼は出さない） */
  .login_name {
    display: none;
  }
  header .mypage.loginBtn p:not(.login_name) {
    display: none;
  }
}
/* 左ボタン */
.swiper-button-prev {
  background: url("../img/maf_arrow-l.webp") no-repeat center/contain;
}
/* 右ボタン */
.swiper-button-next {
  background: url("../img/maf_arrow-r.webp") no-repeat center/contain;
}
.o_headline_h2_01_sub {
  font-family: "Poppins", sans-serif;
}
.c_headline_h2_02::before {
  font-family: "Poppins", sans-serif;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}
.o_headline_h2_03 .sub, .circle_news_heading__sub, .circle_news_item__date, .l_news .news_contents a .date {
  font-family: "Poppins", sans-serif;
}
.l-hdr__login__link, .l-hdr__menu__arrow, .l-hdr__menu__link {
  color: var(--baseColor);
}
.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: var(--mainColor);
}
@media screen and (max-width:559px) {
  .floating-contact {
    right: 14px;
    bottom: 14px;
    width: 10rem;
    height: 10rem;
    border-radius: 50%;
    justify-content: center;
    background: var(--mainColor);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4);
  }
}
.floating-contact {
  color: #fff !important;
}
.floating-contact__text-en {
  font-family: "Poppins", sans-serif;
}
header .mypage {
  border-bottom: none;
}
/*-----------------------------データム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: 24rem;
}
@media only screen and (max-width: 559px) {
  .body-login .btn-lg {
    min-width: 100%;
    font-size: 1.6rem;
  }
  .login-page .panel {
    margin-top: 15rem;
    font-size: 1.6rem;
  }
}
/*-----------------------------コミュニティ系微調整---------------------------*/
.col-lg-12.detail.fr-element.fr-view a {
  text-decoration: none;
  color: inherit;
}

.col-lg-12.detail.fr-element.fr-view a:hover,
.col-lg-12.detail.fr-element.fr-view a:focus {
  color: inherit;
}

/*-----------------------------下層ページのレイアウト適用---------------------------*/
.body-news .card-text a,
.body-page-list-community .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,
.body-page-list-community .cat-Area ul li a {
  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;
  color: var(--mainColor) !important;
}

.body-news .cat-Area ul li.current a,
.body-page-list-community .cat-Area ul li.current a {
  color: #fff !important;
  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,
.body-page-list-community .card-row {
  margin-top: 5rem;
}

.content-header::after {
  z-index: -1;
}

.portfolio-item .card {
  border-radius: 12px;
  overflow: hidden;
}

.body-news .single-pager a,
.body-page-list-community .single-pager a {
  color: var(--mainColor);
}

/* バナーカルーセル */
.l_banner_carousel .swiper {
  overflow: hidden;
  /* はみ出した両端を切る */
  padding: 4px 0;
}

.l_banner_carousel .swiper-slide {
  transition: opacity .4s ease;
}

.l_banner_carousel .swiper-slide:not(.swiper-slide-active) {
  opacity: 1;
}

/* ナビ：左右ボタンを中央のスライド付近に置く場合 */
.l_banner_carousel .swiper-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  margin-top: 12px;
}

.c_headline_h2_02._archive::before {
  content: attr(data-en);
}

@media screen and (max-width: 559px) {
  .l_calender .container {
    padding: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  .l_calender .calender_area {
    padding: 0 !important;
  }

  .l_calender .iframe-calendar {
    width: 100% !important;
  }
}

/* PC幅：3枚収まるとき中央寄せ */
@media screen and (min-width: 560px) {
  .l_banner_carousel .swiper-wrapper {
    justify-content: center;
  }
}

/* 画像ボタンにテキストを重ねる */
.img_btn {
  position: relative;
  display: inline-block;
  line-height: 0;
  /* 画像下の余白対策 */
}

.img_btn img {
  display: block;
  width: 100%;
  height: auto;
}

.img_btn__text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: #fff;
  font-weight: 700;
  letter-spacing: 0.3em;
  white-space: nowrap;
  line-height: 1;
  pointer-events: none;
  /* テキストがクリックを邪魔しないように */
}

#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;
}

/*==================================================
  ドロワー調整（2026-08-20）
  1. ハンバーガー／×を右上に浮かせて置く
  2. ページ遷移時のちらつきを止める
  3. マウス操作の環境ではサブメニューをホバーで開く
==================================================*/

/* --- 1-a. 青い四角をボタン枠の中に収める -----------------------
   標準は ::after に right: -23.5px が掛かっていて、48pxの四角がボタンより
   右へはみ出す（＝スクロールバーの上に乗って見切れる）。枠内に収める。
   margin-top は四角そのものの上下位置の微調整。 */
button.drawer-toggle.drawer-hamburger::after {
  right: 0 !important;
  margin-top: -0.3rem !important;
  border-radius: 0.8rem !important;
}

/* --- 1-b. 線3本（開いているときは×）の位置 ---------------------
   四角とは別に置かれているので、四角を動かさずに中身だけ上下できる。
   position: relative の要素なので top で動かしてもレイアウトは崩れない。
   もう少し上げたいときはマイナス方向へ、下げたいときはプラス方向へ。 */
.drawer-hamburger .drawer-hamburger-icon {
  top: -0.3rem !important;
}

@media screen and (min-width: 560px) {
  /* --- 1-c. 右上に浮かせる -------------------------------------
     開いているとき（×）と閉じているとき（≡）で同じ値なので、
     状態が変わってもボタンは動かない。
     ※スクロールバーを消して画面いっぱいまで寄せる案は、消した瞬間に
       ボタンが15pxずれて見えるので採用していない。 */
  .drawer--right .drawer-hamburger,
  .drawer--right.drawer-open .drawer-hamburger {
    top: 2rem !important;
    right: 2rem !important;
  }

  /* --- 1-d. 氏名・カートを四角の天地に合わせる -------------------
     1-a で四角を 0.3rem 上げたぶん、こちらも同じだけ上げている。 */
  header .l-hdr__right {
    margin-top: 0.1rem !important;
  }
}

/* --- 2. ページ遷移時のちらつきを止める --------------------------
   配信されるHTMLの <body> には drawer / drawer--right が付いておらず、
   drawer.js が読み込み後にJSで付けている。そのため描画からJS実行までの
   一瞬、ドロワーの中身（メニュー一覧とロゴ）が通常フローで見えてしまう。
   クラスが付くまで隠しておき、付いた時点で通常の挙動に戻す。
   ※zoom.css の「body:not(.page-loaded) div { visibility: visible !important }」が
   全divを強制表示するため、!important＋子div込みで打ち消す必要がある。 */
.drawer-nav.o-drawer,
.drawer-nav.o-drawer div {
  visibility: hidden !important;
}
.drawer--right .drawer-nav.o-drawer,
.drawer--right .drawer-nav.o-drawer div {
  visibility: visible !important;
}
/* 三本線ボタンも drawer--right が付くまで右寄せ指定（PC=right:2rem / SP=right:0）が
   効かず左上に出て、付いた瞬間に右上へ飛ぶ。クラス付与前から同じ位置に置いておく。
   （付与後は .drawer--right 側の規則の方が詳細度が高く、そのまま同値で上書きされる） */
.drawer-hamburger {
  right: 0;
}
@media screen and (min-width: 560px) {
  .drawer-hamburger {
    right: 2rem;
  }
}

/* --- 3. PC（マウス）ではホバーでサブメニューを開く ---------------
   タッチ端末は従来どおりタップ（JSが付ける .on）で開閉する。 */
@media (hover: hover) and (pointer: fine) {
  .drawer-nav .o-drawer__menuopen:hover > .o-drawer__submenu {
    visibility: visible;
    opacity: 1;
  }
  /* リンクとサブメニューの間の隙間でホバーが切れないよう、透明な帯を渡しておく */
  .drawer-nav .o-drawer__menuopen > .o-drawer__submenu::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 100%;
    height: 2rem;
  }
}
/*====================================================================
　SNSシェア領域（右上のコピー・シェアアイコン）を全ページで非表示
====================================================================*/
.sns-detail {
  display: none;
}

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

  コンテンツ画面 スマホの棚切り替え

=========================*/
@media only screen and (max-width: 991px) {
  .shelf-nav-sp select.breadcrumb {
    background-color: #fff;
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%23547bb4' stroke-width='1.8' d='M1 1.8l5 4.6 5-4.6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 12px;
    padding-right: 40px;
    border-color: #547bb4;
  }
}

/* === ZEN追記ここから（制作会社の更新で消えることがある） === */
/* --- ログイン誘導のお知らせを、警告の赤から案内の青へ --- */
/* 標準の .alert-danger をそのまま使っているため赤くなっている。
   ログイン画面(.login-page)の中だけ色を変える。非表示にはしない
   （ログイン失敗などのエラー表示も同じクラスのため、消すと気づけなくなる）。 */
.login-page .alert-danger {
  background-color: #eef2f8;
  border-color: #aabdd9;
  color: #3f5d87;
}

/* --- ドロワーのサブメニューの背景が消える件 --- */
/* 元の指定は ::before に z-index:-1 で背景を敷いている。この書き方は
   重なり順の解釈がブラウザで割れやすく、背景が落ちると下のメニューが
   透けて重なって見える（macOS Chrome で発生）。
   z-index に頼らず、本体へ直接同じ色を置く。色も不透明度も元と同じ。 */
.drawer-nav .o-drawer__submenu {
  background-color: rgba(84, 123, 180, 0.9);
}
.drawer-nav .o-drawer__submenu::before {
  display: none;
}

/* --- ログイン画面でログインボタンが押せない件 --- */
/* 未ログイン時はヘッダーのナビ(.l-hdr__navi)が空になり、負のマージン
　　（style.css の header nav { margin-top:-4rem } 等）で透明な帯だけが
　　本文のボタンに覆いかぶさってクリックを横取りする。
　　ログイン画面に限り、ヘッダーをクリック透過にして中のリンクだけ生かす。 */
body.body-login header.l-hdr { pointer-events: none; }
body.body-login header.l-hdr a,
body.body-login header.l-hdr button { pointer-events: auto; }
/* === ZEN追記ここまで === */