/* 公式サークル boxbg / 公式サークル modalbg */
:root {
  --cmsOfficialCircles-bg:
  135deg,
  #ffdede 0%,
  #fff2c8 20%,
  #d6ffe8 40%,
  #d1e5ff 60%,
  #e7d6ff 80%,
  #ffd7ff 100%;
}
/* 公式サークル box */
.cmsOfficialCircles_BoxTopic {
  margin: 20px;
  margin-bottom: 0;
}

/* 公式サークル modal */
.cmsOfficialCircles_modal,
.cmsOfficialCircles_modal * {
  box-sizing: border-box;
}
.cmsOfficialCircles_modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 6;
  background: rgba(0,0,0,0.5);
}
.cmsOfficialCircles_modalOpen {
  display: block;
  width: fit-content;
  margin-inline: auto;
  min-width: 200px;
  padding: 10px 20px;
  background-color: #fff;
  color: #333;
  border: 1px solid #ccc;
  border-radius: 6px;
  text-align: center;
  font-size: 108%;
  font-weight: bold;
  cursor: pointer;
}
.cmsOfficialCircles_modalOpen:hover {
  opacity: .7;
}


/* 公式サークル modalContent */
.cmsOfficialCircles_modalContent {
  background: #fff;
  margin: 0;
  width: 720px;
  max-width: 80vw;
  height: auto;
  max-height: min(80vh, 540px);
  border-radius: 10px;
  padding-inline: 5px;
  padding-block: 20px;
  inset: 0;
  margin: auto;
  position: fixed;
  overflow: hidden;
  --headerHeight: 40px;
}
.cmsOfficialCircles_modalContent::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(var(--cmsOfficialCircles-bg));
  background-size: 300% 300%;
  animation: cmsOfficialCirclesAnima 40s linear infinite;
  opacity: 0.82;
  height: 100%;
  width: 100%;
  z-index: -1;
}
.cmsOfficialCircles_modalHeader {
  height: var(--headerHeight);
  display: flex;
  align-items: center;
  justify-content: center;
}
.cmsOfficialCircles_modalTitle{
  font-size: 18px !important;
  font-weight: bold !important;
  color: #333 !important;
  text-align: center !important;
  background-color: transparent !important;
}
.officialCircle_modalClose {
  position: absolute;
  top: 10px;
  right: 10px;
  cursor: pointer;
  line-height: 1;
  z-index: 3;
  border: none;
  padding: 10px;
  width: 40px;
  height: 40px;
  border-radius: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background: transparent;
}
.officialCircle_modalClose:before,
.officialCircle_modalClose:after {
  content: "";
  position: absolute;
  display: block;
  width: 4px;
  height: 20px;
  background: #999889;
}
.officialCircle_modalClose:before { transform: rotate(45deg); }
.officialCircle_modalClose:after  { transform: rotate(-45deg); }
.officialCircle_modalClose:hover {
  opacity: 0.7;
}
.cmsOfficialCircles_modalCards {
  list-style-type: none;
  padding-inline: 15px;
  margin: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  overflow: auto;
  height: auto;
  max-height: calc(100% - var(--headerHeight));
}

/* カード共通 */
.cmsOfficialCircle_card {
  inset: 0;
  height: 100%;
  background-color: #fff;
  border: 1px #ccc solid;
  border-radius: 6px;
}
.cmsOfficialCircle_link {
  display: flex;
  gap: 8px;
  padding: 15px;
  color: #333;
  inset: 0;
  height: 100%;
}
.cmsOfficialCircle_link:hover {
  opacity: .7;
  text-decoration: none;
}
.cmsOfficialCircle_icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}
.cmsOfficialCircle_iconImg {
  width: 100%;
  height: auto;
}
.cmsOfficialCircle_circle {
  font-size: 108%;
  font-weight: bold;
}
.cmsOfficialCircle_meta {
  padding: 0;
  margin: 0;
}
.cmsOfficialCircle_meta li {
  font-size: 92%;
  color: #999;
  margin: 0;
  padding: 0;
  display: inline;
  align-items: center;
}
.cmsOfficialCircle_meta li:empty {
  display: none;
}
.cmsOfficialCircle_meta li:not(:last-child)::after {
  content: '｜';
  padding-left: 4px;
}

/* モーダル内のカード */
.cmsOfficialCircle_link_modal {
  display: flex;
  gap: 6px;
  padding: 10px;
}
.cmsOfficialCircle_link_modal:hover {
  opacity: .7;
}
.cmsOfficialCircle_icon_modal {
  width: 30px;
  height: 30px;
  flex-shrink: 0;
}




/* cmsOfficialCircles レイアウト */

.cmsOfficialCircles {
  padding-block: 20px;
}
.cmsOfficialCircles,
.cmsOfficialCirclesInner {
  position: relative;
  overflow: hidden;
}
.cmsOfficialCircles::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(var(--cmsOfficialCircles-bg));
  background-size: 300% 300%;
  animation: cmsOfficialCirclesAnima 40s linear infinite;
  opacity: 0.82;
}
@keyframes cmsOfficialCirclesAnima {
  0%   { background-position: 0% 0%; }
  50%  { background-position: 100% 100%; }
  100% { background-position: 0% 0%; }
}
.cmsOfficialCircles_header {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.cmsOfficialCircles_title {
  padding: 0;
  margin: 0;
  color: #333;
  font-size: 146.5%;
  font-weight: bold;
  text-align: center;
}
.cmsOfficialCircles_lead{
  font-size: 108%;
  color: #333;
}
* + .cmsOfficialCircles_BoxModal,
* + .cmsOfficialCircles_BoxList,
* + .cmsOfficialCircles_BoxTopic{
  margin-top: 20px;
}


/* ▼▼▼ スライダー override ▼▼▼ */
.cmsOfficialCircles_slider {
position: relative;
overflow: hidden;
margin: 0 auto !important;
}
.cmsOfficialCircles_slider .slick-track {
  display: flex;
  gap: 10px;
}
.cmsOfficialCircles_slider .slide{
height: auto !important;
}
.cmsOfficialCircles_slider .slick-dots {
    position: relative;
    display: flex;
    justify-content: center;
    margin-top: 10px;
    bottom: initial;
    gap: 5px;
}
.cmsOfficialCircles_slider .slick-dots > li {
width: 10px;
height: 10px;
margin: 0;
padding: 0;
background: #fff;
border-radius: 100%;
border: 1px solid #ccc;
}
.cmsOfficialCircles_slider .slick-dots > li.slick-active,
.cmsOfficialCircles_slider .slick-dots > li:hover {
background: #999;
}
.cmsOfficialCircles_slider .slick-dots > li button,
.cmsOfficialCircles_slider .slick-dots > li button::before {
width: 100%;
height: 100%;
}




/* cmsOfficialCircles RSS */
.cmsOfficialCircles_rssBlockHeader{
  padding: 6px 12px;
  border-radius: 6px 6px 0 0;
  background: #e8e6e1;
  border: 1px solid #ccc;
  border-bottom: none;
}
.cmsOfficialCircles_rssBlockTitle {
color: #333;
font-size: 108%;
font-weight: bold;
}
.cmsOfficialCircles_rssBlock{
height: auto;
max-height: 220px;
overflow: auto;
overflow-y: scroll;
overflow-x: hidden;
border: 1px solid #ccc;
border-top: none;
border-radius: 0 0 6px 6px;
background: #fff;
padding-inline: 15px;
}
.cmsOfficialCircles_rssBlock .cmsRssMetaListItem[data-type="isNew"] {
background: #ff0000 !important;
}