:root {
  --bg-primary: #E0DBFC; /* メイン背景色 */
  --border-primary: #8F8AE5; /* メインボーダー色 */
  --bg-highlight: #8F8AE5; /* 強調させたい背景 */
  --bg-secondary: #DCD0FF; /* コンテンツとヘッダーの背景 */
  --bg-footer: #ABA7FF; /* フッターの背景 */
  --bg-content: #FBEBE2 ; /* コンテンツの背景 */
  --text-primary: #624F8F; /* メインテキスト */
  --bg-button: #C7C3FB; /* ボタンや表の背景 */
  --bg-sidebar: #C7C3FB; /* サイドバーの背景 */
  --text-button: #F6F6F6; /*  ボタンや選択中サイドバーの文字色 */
  --bg-light: #F6F6F6; /* 白背景 */
  --text-subtitle: #808080; /* サブタイトルや補足テキスト */
  --alert: #FF7CA8; /* お知らせ */
  --text-link: #2B66D9; /* リンクのテキスト */
}

.page__screen {
  font-size: 1.4rem;
  font-weight: 700;
  text-rendering: optimizeLegibility;
  -moz-text-size-adjust: 100%;
       text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  font-family: "Zen Maru Gothic", serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: 1.7;
  background-color: var(--bg-primary);
  color: var(--text-primary);
  position: relative;
  overflow-x: hidden;
  overflow-y: scroll;
  width: 100%;
  height: 100%;
}

@font-face {
  font-family: "Noto Sans JP";
  src: url(/assets/fonts/NotoSansJp/Light-ec1698bf330c48e789a3f686116bd1d7bd53b62e4efb99d60069d8f5841d2f25.ttf) format("TrueType");
  font-weight: 300;
  font-style: normal;
}
@font-face {
  font-family: "Noto Sans JP";
  src: url(/assets/fonts/NotoSansJp/Regular-bfc0ed814ff037d58b7d4a55a5a58c0b7d514129d1cb35cb15de4638ff0ba7c5.ttf) format("TrueType");
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: "Noto Sans JP";
  src: url(/assets/fonts/NotoSansJp/Medium-bf74446ecb000509094c9e797fb477a308eb190f7818acd19d62ed0625dace18.ttf) format("TrueType");
  font-weight: 500;
  font-style: normal;
}
@font-face {
  font-family: "Noto Sans JP";
  src: url(/assets/fonts/NotoSansJp/SemiBold-239e379be79a59af6503fb02aabcf940ab821f7b11075f7482a6f25eaa6e9675.ttf) format("TrueType");
  font-weight: 600;
  font-style: normal;
}
@font-face {
  font-family: "Noto Sans JP";
  src: url(/assets/fonts/NotoSansJp/Bold-36aeb726a15445f896b0aa8ece371d6971a6b1799fe45dfe3e164634ac895a86.ttf) format("TrueType");
  font-weight: 700;
  font-style: normal;
}
@font-face {
  font-family: "futura-pt";
  src: url(/assets/fonts/Futura/Medium-3b4ffa5c06455eb119514690f1b4dbcced53c6acf627fe99ceedcd64cfdacce0.woff) format("woff");
  font-weight: 500;
  font-style: normal;
}
@font-face {
  font-family: "futura-pt";
  src: url(/assets/fonts/Futura/Bold-46cb6734dc9336e8c370195298f3bbf5e28541880545e1cc35d1f2cefcf65a13.woff) format("woff");
  font-weight: 700;
  font-style: normal;
}
@font-face {
  font-family: "Zen Maru Gothic";
  src: url(/assets/fonts/Zen_Maru_Gothic/ZenMaruGothic-Light-2233d296b05bddd54522a564579c4679cce7a3a556a2e3b690feb002abdbbacd.ttf) format("TrueType");
  font-weight: 300;
  font-style: normal;
}
@font-face {
  font-family: "Zen Maru Gothic";
  src: url(/assets/fonts/Zen_Maru_Gothic/ZenMaruGothic-Regular-1bfaf085bf184ce7bb12295a5540b3df23c3acfed5be4961ab0902c3b3a64906.ttf) format("TrueType");
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: "Zen Maru Gothic";
  src: url(/assets/fonts/Zen_Maru_Gothic/ZenMaruGothic-Medium-86bb69a5fc0cb04ce9a86d8657f35c848a07ee50f3ef3087411d1d01e376cce1.ttf) format("TrueType");
  font-weight: 500;
  font-style: normal;
}
@font-face {
  font-family: "Zen Maru Gothic";
  src: url(/assets/fonts/Zen_Maru_Gothic/ZenMaruGothic-Bold-d108caa9f14e4e7ffcbd5bd27f677d706acc1b761616b5546fa4b7f742a8f341.ttf) format("TrueType");
  font-weight: 700;
  font-style: normal;
}
@font-face {
  font-family: "Zen Maru Gothic";
  src: url(/assets/fonts/Zen_Maru_Gothic/ZenMaruGothic-Black-2813f3729c4b4b061743e0ee2ed1bc7a0b35a0b3fd6f829b833b8ae438fb2142.ttf) format("TrueType");
  font-weight: 900;
  font-style: normal;
}
/* 日本語は対応していないフォント */
@font-face {
  font-family: "Rubik Mono One";
  src: url(/assets/fonts/Rubik_Mono_One/RubikMonoOne-Regular-89408ceaa78a9e81f91b69f952b50a500d5cf75d987d2fc502fbee45269bab48.ttf) format("TrueType");
  font-weight: 400;
  font-style: normal;
}

/* idol_base.css */

.header__menu__person__icon {
  height: 36px;
  width: 36px;
  position: relative;
  min-width: 36px;
  min-height: 36px;
}
@media screen and (max-width: 768px) {
  .header__menu__person__icon {
    height: 30px;
    width: 30px;
    min-width: 30px;
    min-height: 30px;
  }
}


/* idol_user_page_add.css から抜き出し */
.modal-box {
  background-color: var(--bg-secondary);
  max-width: 50%;
  z-index: 1000;
}

@media screen and (max-width: 768px) {
  .modal-box {
    max-width: none;
    width: 100%;
    height: 100%;
  }
  :not(.instructor).modal-box {
    max-height: none;
  }
}

.princes__benefit {
  width: 100%;
  padding: 0 5%;
  margin: 4rem auto;
}
@media screen and (max-width: 768px) {
  .princes__benefit {
    padding: 0;
    margin: 1rem auto;
  }
}

.page__title {
  font-weight: 700;
  font-size: 16px;
  width: 100%;
  padding: 10px 20px;
}
@media screen and (max-width: 768px) {
  .page__title {
    font-size: 14px;
  }
}

.page__body {
  width: 100%;
  padding: 10px 20px;
}

.page__screen
.page__body {
    justify-content: space-evenly;
    display: flex;
}
@media screen and (max-width: 768px) {
  .page__screen
  .page__body {
    display: block;
    flex-direction: unset;
  }

}

.full__banner__link {
  display: inline-block;
  line-height: 0;
}

@media screen and (max-width: 768px) {
  .page__screen
  .full__banner__link {
    width: 100%;
  }
}

.full__banner__img {
  display: block;
  border: 3px solid var(--border-primary);
  border-radius: 12px;
  width: 100%;
  height: auto;
}

.page__screen
.full__banner__img {
  height: 10vw;
}
@media screen and (max-width: 768px) {
  .page__screen
  .full__banner__img {
    height: auto;
  }
}

.content__item {
  border: 6px solid var(--border-primary);
  border-radius: 16px;
  background-color: var(--bg-secondary);
  transition: 0.3s;
}
@media screen and (max-width: 1700px) {
  .content__item {
    border: 4px solid var(--border-primary);
  }

}
@media screen and (max-width: 768px) {
  .content__item {
    border: 3px solid var(--border-primary);
    width: 100%;
  }
}

.scroll__bar__none {
  -ms-overflow-style: none;  /* IEとEdgeでスクロールバーを非表示 */
  scrollbar-width: none;  /* Firefoxでスクロールバーを非表示 */
}

.scroll__bar__none::-webkit-scrollbar {
  display: none;  /* Chrome, Safari, Operaでスクロールバーを非表示 */
}

.user__thumbnail {
  border-radius: 50%;
  border: 3px solid var(--border-primary);
  background: var(--bg-light);
}

img.user__thumbnail {
  width: 100%;
  height: 100%;
}

.user__thumbnail__tiara {
  border: 3px solid #7E7440;
}

.header__nickname {
  font-size: 12px;
  font-weight: 500;
}

.header__menu__person__icon
.princess__tiara {
  width: 30px;
  position: absolute;
  right: 0.3rem;
  top: -1.1rem;
}

@media screen and (max-width: 768px) {
  .header__menu__person__icon
  .princess__tiara {
    width: 22px;
    top: -0.8rem;
    right: 0.4rem;
  }
}


/* 掲示板用のcss */

.bulletin__board__modal {
  background-color: var(--bg-secondary);
  border-radius: 15px;
  border: 3px solid var(--border-primary);
  padding: 20px;
  width: 80%;
  margin: auto;
  box-shadow: none;
  z-index: 1000;
}
@media screen and (max-width: 768px) {
  .bulletin__board__modal {
    width: 100%;
    margin: 0;
  }

}

.bulletin__board__modal-box {
  background-color: transparent;
  box-shadow: none;
  border: none;
}

.bulletin__board__modal__text {
  font-size: 16px;
  font-weight: bold;
}

.bulletin__board__close {
  color: var(--bg-light);
  font-size: xxx-large;
  font-size: -webkit-xxx-large;
  display: flex;
  justify-content: flex-end;
  z-index: 1001;
}

.notice-list {
  list-style: none;
  padding: 0;
  margin: 20px 0;
  color: var(--text-primary);
}

.ok-button {
  background-color: var(--bg-highlight);
  color: var(--text-button);
  font-size: 18px;
  font-weight: bold;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  display: flex;
  margin: 0 auto;
}

.comment {
  display: -webkit-box; /* Flexbox を使用 */
  -webkit-box-orient: vertical; /* 縦方向に制限 */
  overflow: hidden; /* はみ出した部分を非表示 */
  -webkit-line-clamp: 4; /* 表示する行数を指定 */
  line-height: 1.5; /* 行間を調整 */
  white-space: pre-line;
  word-break: break-all;
}

.dropdown-menu-wrapper {
  position: relative;
  display: inline-block;
}
.menu-toggle {
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px 8px;
}
.dropdown-menu-custom {
  display: none;
  right: 0;
  top: 100%;
  min-width: 140px;
  background: #fff;
  border: 1px solid #ddd;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  z-index: 3;
  border-radius: 6px;
  padding: 4px 0;
  position: absolute;
}
.dropdown-menu-custom .dropdown-item {
  display: block;
  padding: 8px 16px;
  color: #333;
  text-decoration: none;
  background: none;
  border: none;
  width: 100%;
  text-align: left;
}
.dropdown-menu-custom .dropdown-item:hover {
  background: #f0f0f0;
}

/* ...投稿のcss... */

.posts__list {
  padding: 16px;
  max-width: 80%;
  margin: 0 auto;
}
@media
screen and (max-width: 768px) {
  .posts__list {
    max-width: 100%;
    margin: 0;
  }

}

.post__item {
  padding: 16px;
  margin-bottom: 16px;
  border-bottom: solid 1px var(--border-primary);
}

.post__control__bar {
  padding: 16px;
  font-size: 14px;
  display: flex;
  justify-content: space-between;
}

.post__header {
  display: flex;
  justify-content: space-between;
}

.post__category__name {
  font-size: 3rem;
  color: var(--text-secondary);
  font-weight: 900;
  align-self: center;
}

.post__user {
  display: flex;
  gap: 8px;
  align-items: center;
}

.post__time {
  margin-left: 8px;
  display: flex;
  align-items: center;
  gap: 4px;
}

.post__category {
  font-weight: bold;
  margin-right: 8px;
}

.post__body {
  margin: 8px 16px;
  font-size: 1.1em;
  line-height: 1.5;
}

.post__image {
  border-radius: 12px;
  margin-top: 16px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.post__image img {
  max-width: 300px;
  max-height: 300px;
  border-radius: 8px;
  margin-bottom: 8px;
}

.post__footer {
  display: flex;
  justify-self: end;
  align-items: center;
  gap: 8px;
  justify-content: flex-end;
}

.parent__post {
  padding: 12px 16px;
  border-bottom: solid 2px var(--border-primary);
}

.parent__post
.post__footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 8px;
  padding-top: 8px;
  width: 100%;
}

.parent__post
.post__item {
  border-bottom: none;
}

.parent__post
.comment {
  max-height: max-content;
  -webkit-line-clamp: none;
  white-space: pre-wrap;
}

.post__footer__right {
  display: flex;
  align-items: center;
  gap: 8px;
}

.post__footer__left {
  display: flex;
  align-items: center;
  gap: 8px;
}

.floating__create__btn {
  position: fixed;
  bottom: 50px;
  right: 20px;
  width: 60px;
  height: 60px;
  background-color: var(--bg-footer);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--bg-light);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  z-index: 3;
}
@media screen and (max-width: 768px) {
  .floating__create__btn {
  bottom: 20px;
  }
}

.floating__reply__btn {
  position: fixed;
  bottom: 50px;
  right: 20px;
  width: 60px;
  height: 60px;
  background-color: var(--bg-footer);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--bg-light);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  z-index: 3;
}
@media screen and (max-width: 768px) {
  .floating__reply__btn {
    bottom: 80px;
  }
}

.floating__btn {
  height: 2.5rem;
}


/* 戻るボタンのスタイル */
.back__btn {
  display: inline-flex;
  align-items: center;
  padding: 8px 16px;
  background-color: var(--bg-button);
  border: solid 3px var(--border-primary);
  border-radius: 20px;
  color: var(--text-primary);
  height: fit-content;
}

/* ページタイトルエリアの調整 */
.page__title {
  padding: 16px 0;
  margin-bottom: 20px;
}

.post__form__container {
  margin: 0 auto;
  padding: 20px;
  border-radius: 20px;
}
.post__form__container
.parent__post {
  border-bottom: none;
}

.post__form__header {
  display: flex;
  text-align: center;
  justify-content: center;
  margin-bottom: 30px;
}

.post__form__header
.back__btn {
  position: absolute;
  left: 5vw;
}
@media screen and (max-width: 768px) {
  .post__form__header
  .back__btn {
    left: 15px;
  }
}

.post__form__title {
  color: var(--text-primary);
  font-size: 3rem;
  font-weight: 600;
}

.form__group {
  margin-bottom: 25px;
}

.form__textarea {
  width: 100%;
  height: 100%;
  min-height: 30vw;
  padding: 16px;
  border-radius: 12px;
  font-size: 1.5rem;
  line-height: 1.6;
  background: var(--bg-light);
  border: solid 2px var(--border-primary);
}
@media screen and (max-width: 768px) {
  .form__textarea {
  min-height: 80vw;
  }
}

.form__submit__container {
  text-align: center;
  padding-top: 10px;
}

.post__submit__btn {
  background-color: var(--bg-button);
  border: solid 3px var(--border-primary);
  color: var(--text-primary);
  padding: 8px 16px;
  font-size: 1.5rem;
  font-weight: 600;
  border-radius: 12px;
  cursor: pointer;
  letter-spacing: 0.5px;
}

.confirmation__modal__box {
  width: 100%;
  max-width: 500px;
  padding: 20px;
  margin: 0 10px;
}

.confirmation__modal__text {
  font-size: 1.5rem;
  font-weight: 600;
}

.confirmation__control__btn {
  background-color: var(--text-primary);
  color: var(--text-button);
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-size: 1.2rem;
  font-weight: bold;
  margin-top: 10px;
}

.confirmation__cancel__btn {
  background-color: var(--bg-highlight);
  color: var(--text-button);
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-size: 1.2rem;
  font-weight: bold;
  margin-top: 10px;
}

.page__screen
.modal-box {
  max-width: 50%;
  box-shadow: none;
}
@media screen and (max-width: 768px) {
  .page__screen
  .modal-box {
    max-width: 100%;
    width: 100%;
    height: 100%;
  }

}

.good-button {
  color: var(--text-secondary);
  transition: color 0.2s ease;
  border: none;
  background: none;
  cursor: pointer;
}

.good-button--active {
  color: #3b82f6; /* 青色 */
}

.good-button--active i {
  color: #3b82f6;
}

.good-button:hover {
  color: #60a5fa; /* ホバー時の色 */
}

/* ページネーション全体のコンテナ */
.pagination {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

/* ページネーションのリンク要素 */
.pagination a,
.pagination .current,
.pagination .page,
.pagination .prev,
.pagination .next,
.pagination .first,
.pagination .last {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 8px 3px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  transition: all 0.2s ease;
}

/* バナースライダーのスタイル */
.banner__slider {
  position: relative;
  width: 100%;
  border: 3px solid var(--border-primary);
  border-radius: 12px;
  overflow: hidden;
}

@media screen and (max-width: 768px) {
  .banner__slider {
    height: auto;
  }
}

.banner__slider__container {
  display: flex;
  height: 100%;
  will-change: transform;
}

.banner__slider:hover .banner__slider__container {
  animation-play-state: paused;
}

.banner__slide {
  position: relative;
  flex: 0 0 100%;
  height: 100%;
  line-height: 0;
}

.banner__slide__link {
  display: block;
  width: 100%;
  height: 100%;
  line-height: 0;
}

.banner__slide img,
.banner__slide__link img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  border: none;
  border-radius: 0;
}

.banner__slide img.full__banner__img {
  border: none;
  border-radius: 0;
}

.no-js .banner__slider__container {
  animation: none !important;
  width: 100% !important;
  flex-wrap: nowrap;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
}
.no-js .banner__slide {
  scroll-snap-align: start;
  flex: 0 0 100%;
}

.no-js .banner__slider__container::-webkit-scrollbar {
  display: none;
}