/* common.css */

/* リセット・基本設定 */
body {
  margin: 0;
  font-family: 'Hiragino Kaku Gothic ProN', sans-serif;
  background-color: #f4f4f4;
  color: #333;
}

button {
  cursor: pointer;
  font-size: 1rem;
}


/* Hero画像のスタイル */
/* 画面幅100%、高さ60vhの高さで背景画像を表示 */
.hero {
  position: absolute;
  width: 100vw;
  height: 100vh;
  background: #111;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 9999;
  top: 0;
  left: 0;
}

.hero {
  opacity: 1;
  transition: opacity 1s ease;
}

.hero.fade-out {
  opacity: 0;
  pointer-events: none;
}

/* タイトルアニメーション */
.hero-title {
  color: white;
  font-size: 3rem;
  text-shadow: 2px 2px 4px rgba(0,0,0,0.6);
  opacity: 0;
  animation: fadeInUp 1s ease forwards;
  animation-delay: 0.4s; 
}



.bg {
  background-size: cover;
  background-position: center;

  position: relative;
  overflow: hidden;
}

.bg-layer {
  position: absolute;
  inset: 0;

  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  pointer-events: none;

  transition: opacity 0.35s ease;

  z-index: 0;
}

.bg-layer.act {
  opacity: 1;
}

.bg-layer.nonact {
  opacity: 0;
}

@keyframes fadeInUp {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
/*
body.theme-natsu .bg {
  background-image: url("/image/IMG_4775.JPG");
}

body.theme-natsu #resultAreaOverray,
body.theme-natsu #communityBoardContainer {
  background-image: url("/image/IMG_4775.JPG");
}

body.theme-haru .bg {
  background-image: url("/image/haru1.JPG");
}

body.theme-haru #resultAreaOverray,
body.theme-haru #communityBoardContainer {
  background-image: url("/image/haru1.JPG");
}

body.theme-aki .bg {
  background-image: url("/image/aki1.JPG");
}

body.theme-aki #resultAreaOverray,
body.theme-aki #communityBoardContainer {
  background-image: url("/image/aki3.JPG");
}

body.theme-fuyu .bg {
  background-image: url("/image/fuyu1.JPG");
}

body.theme-fuyu #resultAreaOverray,
body.theme-fuyu #communityBoardContainer {
  background-image: url("/image/fuyu6.JPG");
}
*/
/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */




/* ユーザー名表示（headerの右上に固定表示） */
.user-display {
  position: absolute;
  top: 20px;
  right: 30px;
  color: white;
  font-weight: bold;
  font-size: 1rem;
}

/*ユーザーインフォメーション =============================================*/
.infomation-area {
  position: fixed;
  top: 1px;
  right: 2%;
  display: flex;
  gap: 20px; 
  z-index: 1000;
  background-color: #f4f4f467;
}

.infomation-area a {
  font-size: 22px;
  text-decoration: none;
  cursor: pointer;
  user-select: none;
  transition: opacity 0.2s ease;
}

.infomation-area a:hover {
  opacity: 0.7;
}


/* コンテンツエリア
.top-tab-group {
  display: flex;
  height: calc(6vh - 1rem);
  width: calc(100% - 2rem);
  margin: 0 1rem 0 1rem;
}

.top-tab-group.top-fixed {
  position: fixed;
  top: 0;
  width: 100%;
}

.top-tab-group.bottom-fixed {
  position: fixed;
  bottom: 0;
  width: 100%;
}
 */
.top-tab-group {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  box-sizing: border-box;
  width: 50%;
  height: 2.2rem;
  min-height: 2.2rem;
  border-bottom: 1px solid #dfdeda8b;
  position: absolute;
  background-color: #37373767;
  backdrop-filter: blur(6px);
  top: 0;
  right: 0;
  z-index: 100;
}


.tab-btn:hover {
  background-color: #b0bfccbb;
  background-color: #00060170;
}

.tab-btn.active {
  background-color: #00060170;
}
.tab-btn {
  flex: 1;
  height: 100%;
  font-size: 13px;
  cursor: pointer;
  border: none;
  /*
  background-color: #000601b4;
  background-color: #03240967;
  backdrop-filter: blur(6px);
  */
  background-color: transparent;
  color: white;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cloudLabel {
  border-bottom: 1px solid #ffffff80;
  padding: 0 3px;
  border-radius: 10px;
  color: #ffffff80;
  font-weight: 500;
}


.ownerInviteWrapper {
  width: 35%;
  min-width: 35%;
  max-width: 90%;
  height: calc(100% - 5.5rem);
  top: 2.6rem;
  border: none;
  margin-left: 0.5rem;
  margin-top: 1rem;
  box-shadow: 12px 12px 18px rgb(16, 16, 16);
  border-radius: 6px;
  overflow: auto;         /* これが必須 */
  resize: horizontal;
  
  position: absolute;  
  z-index: 5;
}

.ownerInviteWrapper.deleted {
  z-index: 4;
}

.ownerInviteWrapper.width {
  width: 90%;
  transition: width 0.6s ease;
}

.ownerInviteWrapper.insertFriendsContainer {
  width: 100%;
  min-width: 100%;
  max-width: 100%;

  height: 100%;

  top: 0;
  left: 0;
  border: none;
  margin-left: 0;
  margin-top: 0;
  border-radius: 6px;
  overflow: hidden;         /* これが必須 */
  resize: none;

  position: absolute;  
  z-index: 3;

}

.sendUserCancelBtn {
  margin-left: 3px;
  margin-right: 14px;
  border-radius: 50%;
  border: none;
  background-color: #e5e4e4;
  font-size: 16px;
}

.sendUserCancelBtn:hover {
  background-color: #e5e4e4af;
}

/* オーバーレイ ========================================== */
.guide-overlay {
  position: absolute;
  top: 2.24rem;
  left: 0;
  width: 100%;
  height: calc(100% - 2.24rem);
  background: rgba(0, 0, 0, 0.281);
  display: none; /* 初期非表示 */
  pointer-events: auto; /* クリックを透過させる */
  z-index: 9998;
  font-family: 'Menlo', 'Consolas', 'Courier New', monospace;
  font-size: 12px;
}

.guide-panel-wrapper {
  height: 100%;
  width: 60%;
  position: absolute;
  top: 0;
  right:0;
}

/* ガイドパネル */
.guide-panel {
  position: absolute;
  background: rgba(241, 241, 170, 0.428);
  padding: 0.5rem 1rem;
  /*border-radius: 0.5rem;*/
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.175);
  pointer-events: auto;
  display: block;
  z-index: 9999;
  opacity: 0;
  white-space: pre-wrap;
  overflow-y: auto;
  /* transition: opacity 0.2s ease;初期は透明 */
}

.guide-trigger {
  overflow-y: auto;
  max-height: 80vh;
}

.guide-panel.left, .guide-panel.right {
  overflow-y: auto;
  max-height: 100%;
}

/* セクションのハイライト用 */
.content-section.guide-highlight {
  outline: 2px dashed yellow;
  cursor: help;
}

#guidePanel1 {
  top: 0;
  left: 0;
  height: 3.3rem;
  width: 40%;
}

#guidePanel2 {
  top: 3.3rem;
  left: 0;
  height: 47px;
  width: 40%;
}

#guidePanel3 {
  top: calc(3.3rem + 47px);
  left: 0;
  height: 104px;
  width: 40%;
}

#guidePanel4 {
  top: calc(3.3rem + 151px);
  left: 0;
  height: calc(100% - 3.3rem + 151px);
  width: 40%;
}

#guidePanel5 {
  top: 0;
  right: 0;
  height: 4.95rem;
  width: 100%;
}

#guidePanel6 {
  top: 4.95rem;
  right: 0;
  height: 2.2rem;
  width: 100%;
}

#guidePanel7 {
  top: 7.15rem;
  right: 0;
  height: calc(100% - 7.15rem);
  width: 100%;
}

#guidePanel1:hover,
#guidePanel2:hover,
#guidePanel3:hover,
#guidePanel4:hover,
#guidePanel5:hover,
#guidePanel6:hover,
#guidePanel7:hover {
  opacity: 1;
}

#leftguidePanel {
  top: 0;
  left: 0;
  height: 100%;
  display: none;
  opacity: 1;
  background: rgba(30, 30, 30, 0.925);
  color: rgb(207, 204, 204);
  border: 0.5px solid rgba(149, 155, 106, 0.801);
  width: 40%;
}

#rightguidePanel {
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  display: none;
  opacity: 1;
  background: rgba(30, 30, 30, 0.925);
  color: rgb(207, 204, 204);
  border: 0.5px solid rgba(149, 155, 106, 0.801);
}

#searchguidePanel1 {
  top: 0;
  left: 0;
  height: 3.3rem;
  width: 40%;
}

#searchguidePanelGrid {
  position: relative;
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: 1.5fr 2.7fr;
  width: 100%;
  height: calc(100% - 3.3rem);
  top: 3.3rem;
}

#searchguidePanel2 {
  width: 40%;
  position: relative;
  display: flex;
}

#searchguidePanel3 {
  width: 40%;
  position: relative;
  display: flex;
}

#searchguidePanel4 {
  top: 0;
  right: 0;
  height: 4.95rem;
  width: 100%;
}

#searchguidePanel5 {
  top: 4.95rem;
  right: 0;
  height: 2.2rem;
  width: 100%;
}

#searchguidePanel6 {
  top: 7.15rem;
  right: 0;
  height: calc(100% - 7.15rem);
  width: 100%;
}


#searchguidePanel1:hover,
#searchguidePanel2:hover,
#searchguidePanel3:hover,
#searchguidePanel4:hover,
#searchguidePanel5:hover,
#searchguidePanel6:hover {
  opacity: 1;
}

#searchleftguidePanel {
  top: 0;
  left: 0;
  height: 100%;
  width: calc(50% - 0.5rem);
  display: none;
  opacity: 1;
  background: rgba(30, 30, 30, 0.925);
  color: rgb(207, 204, 204);
  border: 0.5px solid rgba(149, 155, 106, 0.801);
  width: 40%;
}

#searchrightguidePanel {
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  display: none;
  opacity: 1;
  background: rgba(30, 30, 30, 0.925);
  color: rgb(207, 204, 204);
  border: 0.5px solid rgba(149, 155, 106, 0.801);
}

/*
#modeguidePanel,
#searchmodeguidePanel,
#AImodeguidePanel,
#createmodeguidePanel {
  bottom: 1rem;
  right: 0;
  height: 75%;
  width: calc(50% - 1rem);
  opacity: 1;
  background: rgba(30, 30, 30, 0.925);
}
  */
#AImodeguidePanel1 {
  top: 0;
  left: 0;
  height: 3.3rem;
  width: 40%;
}

#AImodeguidePanel2 {
  top: 3.3rem;
  left: 0;
  height: 47px;
  width: 40%;
}

#AImodeguidePanel3 {
  top: calc(3.3rem + 47px);
  left: 0;
  height: 105px;
  width: 40%;
}

#AImodeguidePanel4 {
  top: calc(3.3rem + 152px);
  left: 0;
  height: calc(100% - 3.3rem + 152px);
  width: 40%;
}

#AImodeguidePanel5 {
  top: 0;
  right: 0;
  height: 4.95rem;
  width: 100%;
}

#AImodeguidePanel6 {
  top: 4.95rem;
  right: 0;
  height: 2.2rem;
  width: 100%;
}

#AImodeguidePanel7 {
  top: 7.15rem;
  right: 0;
  height: calc(100% - 7.15rem);
  width: 100%;
}


#AImodeguidePanel1:hover,
#AImodeguidePanel2:hover,
#AImodeguidePanel3:hover,
#AImodeguidePanel4:hover,
#AImodeguidePanel5:hover,
#AImodeguidePanel6:hover,
#AImodeguidePanel7:hover {
  opacity: 1;
}

#AImodeleftguidePanel {
  top: 0;
  left: 0;
  height: 100%;
  display: none;
  opacity: 1;
  background: rgba(30, 30, 30, 0.925);
  color: rgb(207, 204, 204);
  border: 0.5px solid rgba(149, 155, 106, 0.801);
  width: 40%;
}

#AImoderightguidePanel {
  top: 0;
  right: 0;
  height: 100%;
  width: 100%;
  display: none;
  opacity: 1;
  background: rgba(30, 30, 30, 0.925);
  color: rgb(207, 204, 204);
  border: 0.5px solid rgba(149, 155, 106, 0.801);
}

#createguidePanel1 {
  top: 0;
  left: 0;
  height: 3.3rem;
  width: 40%;
}

#createguidePanel2 {
  top: 3.3rem;
  left: 0;
  height: 47px;
  width: 40%;
}

#createguidePanel3 {
  top: calc(3.3rem + 47px);
  left: 0;
  height: 2.9rem;
  width: 40%;
}

#createguidePanel4 {
  top: calc(6.2rem + 47px);
  left: 0;
  height: calc(100% - 6.2rem - 47px);
  width: 40%;
}

#createguidePanel5 {
  top: 0;
  right: 0;
  height: 4.95rem;
  width: 100%;
}

#createguidePanel6 {
  top: 4.95rem;
  right: 0;
  height: 2.2rem;
  width: 100%;
}

#createguidePanel7 {
  top: 7.15rem;
  right: 0;
  height: calc(100% - 7.15rem);
  width: 100%;
}


#createguidePanel1:hover,
#createguidePanel2:hover,
#createguidePanel3:hover,
#createguidePanel4:hover,
#createguidePanel5:hover,
#createguidePanel6:hover,
#createguidePanel7:hover {
  opacity: 1;
}

#createleftguidePanel {
  top: 0;
  left: 0;
  height: 100%;
  display: none;
  opacity: 1;
  background: rgba(30, 30, 30, 0.925);
  color: rgb(207, 204, 204);
  border: 0.5px solid rgba(149, 155, 106, 0.801);
  width: 40%;
}

#createrightguidePanel {
  top: 0;
  right: 0;
  height: 100%;
  width: 100%;
  display: none;
  opacity: 1;
  background: rgba(30, 30, 30, 0.925);
  color: rgb(207, 204, 204);
  border: 0.5px solid rgba(149, 155, 106, 0.801);
}


/* ログイン　============================================*/

#settingsContainer,
#loginContainer {
  display: none; /* 初期非表示 */
  background-image: url("/image/1202.JPG");
  background-size: cover;
  background-position: center;
  box-shadow: 0 0 10px rgba(0,0,0,0.1);
  z-index: 0;

  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

  border-radius: 10px;
  
  width: min(90vw, 1200px);
  height: min(90vh, 800px);
  box-sizing: border-box;

  flex-direction: column;
  justify-content: flex-start;
  transition: opacity 0.3s ease;
  overflow: hidden;
  font-family: 'Hiragino Kaku Gothic ProN', sans-serif;
}

#settingsOverray,
#loginOverray {
  height: 100%;
  width: 100%;
  justify-content: center;
  align-items: center;
  background: linear-gradient(to right, #abababd3, #ebebeb, #ebebeb);
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(0,0,0,0.1);
  z-index: 1;
  pointer-events: none;
  
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(90vw, 1200px);
  height: min(90vh, 800px);

  display: flex;
  flex-direction: column;
  
}

#loginContent,
#signupSection {
  z-index: 2;          /* オーバーレイより前に */
  min-width: 350px;


  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(90vw, 1200px);
  height: min(90vh, 800px);

  padding: 24px 25%; /* 少し広めにしてもOK */
  padding-top: clamp(42px, 8vh, 120px);
  border-radius: 20px;
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  font-family: 'Hiragino Kaku Gothic ProN', sans-serif;
}

#settingsContent {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-family: 'Hiragino Kaku Gothic ProN', sans-serif;

}

#loginContent #loginContainerbackBtn1 {
  pointer-events: auto;
  opacity: 1;
}

#authOKBtn {
  display: none;
  padding: 0 16px;
  white-space: nowrap;
  width: auto;

  height: 30px;
  min-height: 30px;
  margin-top: 1rem;
  margin-bottom: 2rem;
  border: none;
  border-radius: 4px;
  background-color: #83a0c2;
  color: #fff;
  cursor: pointer;
  font-size: 13px;
}

#loginContent.waiting #deleteAccountLink,
#loginContent.waiting #deleteStripeAccountLink,
#loginContent.waiting #loginContainerbackBtn1,
#loginContent.waiting .form-group {
  display: none;
}
#loginContent.waiting .loginForm-btngroup {
  display: none;
}

#loginContent.waiting #authOKBtn {
  display: inline-block;
}





#signupSection {
  display: none;
}

#signupSection h2 {
  padding-top: 3px;
  padding-bottom: 3px;
  text-align: start;
  line-height: 1.2;
}

.login-container h2 {
  text-align: start;
  line-height: 1.2;
}


.loginLine {
  left:24px;
  height: 2px;
  min-height: 2px;
  width: 220px;
  margin-top: -16px;
  margin-bottom: 1.5rem;
  background: linear-gradient(to right, #e3e029bd, #7ca863b8, #ebebeb, #e3e02966, #7ca863b8);
}

.loginForm-btngroup {
  display: flex;
  position: relative;
  width: 100%;
  height: 30px;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  gap: 20px;
}

.loginForm-signup {
  display: flex;
  flex-direction: column;
  position: relative;
  width: 100%;
  height: auto;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  gap: 16px;
  margin-bottom: 12px;
}

#settingsContainerbackBtn1,
#loginContainerbackBtn1,
#loginContainerbackBtn2 {
  width: fit-content;
  min-width: fit-content;
  padding: 0 60px;
  height: 30px;
  min-height: 30px;
  margin-top: 1rem;
  margin-bottom: 2rem;
  border: none;
  border-radius: 4px;
  background-color: #83a0c2;
  color: #fff;
  cursor: pointer;
  font-size: 13px;
}



.planFormBtns,
#contactFormsend,
#confirmPassBtn,
#contactFormCancel,
#deleteCancelBtn,
#deleteStripeAccountBtn,
#deleteAccountBtn,
#changePlanBtn,
#loginBtn,
#signupOpenBtn,
#logoutBtn {
  flex: 1;
  height: 100%;
  min-height: 32px;
  max-width: 48%;
  border: none;
  border-radius: 4px;
  background-color: #83a0c2;
  color: #fff;
  cursor: pointer;
  font-size: 13px;
  display: block;
}

#confirmPassPasswordContainer,
#confirmPassBtn {
  display: none;
}

.loginForm-btngroup.Guest #sendNewPasswordBtn,
.loginForm-btngroup.Guest #sendNewEmailAddressBtn,
.loginForm-btngroup.Guest #confirmPassBtn,
.loginForm-btngroup.Guest #logoutBtn,
.loginForm-btngroup.Guest #changePlanBtn,
.loginForm-btngroup.Guest #deleteAccountBtn,
.loginForm-btngroup.Guest #deleteStripeAccountBtn,
.loginForm-btngroup.Guest #deleteCancelBtn {
  display: none;
}

.loginForm-btngroup.Guest #signupOpenBtn,
.loginForm-btngroup.Guest #loginBtn {
  display: block;
}

.loginForm-btngroup.Free #sendNewPasswordBtn,
.loginForm-btngroup.Free #sendNewEmailAddressBtn,
.loginForm-btngroup.Free #confirmPassBtn,
.loginForm-btngroup.Free #signupOpenBtn,
.loginForm-btngroup.Free #loginBtn,
.loginForm-btngroup.Free #deleteAccountBtn,
.loginForm-btngroup.Free #deleteStripeAccountBtn,
.loginForm-btngroup.Free #deleteCancelBtn {
  display: none;
}

.loginForm-btngroup.Free #logoutBtn,
.loginForm-btngroup.Free #changePlanBtn {
  display: block;
}

.loginForm-btngroup.Studio #sendNewPasswordBtn,
.loginForm-btngroup.Studio #sendNewEmailAddressBtn,
.loginForm-btngroup.Studio #confirmPassBtn,
.loginForm-btngroup.Studio #signupOpenBtn,
.loginForm-btngroup.Studio #loginBtn,
.loginForm-btngroup.Studio #changePlanBtn,
.loginForm-btngroup.Studio #deleteAccountBtn,
.loginForm-btngroup.Studio #deleteStripeAccountBtn,
.loginForm-btngroup.Studio #deleteCancelBtn {
  display: none;
}

.loginForm-btngroup.Studio #logoutBtn {
  display: block;
}

.loginForm-btngroup.deleteAccount #sendNewPasswordBtn,
.loginForm-btngroup.deleteAccount #sendNewEmailAddressBtn,
.loginForm-btngroup.deleteAccount #confirmPassBtn,
.loginForm-btngroup.deleteAccount #logoutBtn,
.loginForm-btngroup.deleteAccount #signupOpenBtn,
.loginForm-btngroup.deleteAccount #loginBtn,
.loginForm-btngroup.deleteAccount #changePlanBtn,
.loginForm-btngroup.deleteAccount #deleteStripeAccountBtn {
  display: none;
}

.loginForm-btngroup.deleteAccount #deleteAccountBtn,
.loginForm-btngroup.deleteAccount #deleteCancelBtn {
  display: block;
}

.loginForm-btngroup.deleteStripeAccount #sendNewPasswordBtn,
.loginForm-btngroup.deleteStripeAccount #sendNewEmailAddressBtn,
.loginForm-btngroup.deleteStripeAccount #confirmPassBtn,
.loginForm-btngroup.deleteStripeAccount #deleteAccountBtn,
.loginForm-btngroup.deleteStripeAccount #logoutBtn,
.loginForm-btngroup.deleteStripeAccount #signupOpenBtn,
.loginForm-btngroup.deleteStripeAccount #loginBtn,
.loginForm-btngroup.deleteStripeAccount #changePlanBtn {
  display: none;
}

.loginForm-btngroup.deleteStripeAccount #deleteStripeAccountBtn,
.loginForm-btngroup.deleteStripeAccount #deleteCancelBtn {
  display: block;
}

.loginForm-btngroup.change_password #sendNewPasswordBtn,
.loginForm-btngroup.change_password #sendNewEmailAddressBtn,
.loginForm-btngroup.change_password #deleteAccountBtn,
.loginForm-btngroup.change_password #logoutBtn,
.loginForm-btngroup.change_password #signupOpenBtn,
.loginForm-btngroup.change_password #loginBtn,
.loginForm-btngroup.change_password #changePlanBtn,
.loginForm-btngroup.change_password #deleteStripeAccountBtn,
.loginForm-btngroup.change_password #deleteCancelBtn {
  display: none;
}

.loginForm-btngroup.change_password #confirmPassBtn {
  display: block;
}

.loginForm-btngroup.changeMailAddress #sendNewPasswordBtn,
.loginForm-btngroup.changeMailAddress #confirmPassBtn,
.loginForm-btngroup.changeMailAddress #deleteAccountBtn,
.loginForm-btngroup.changeMailAddress #logoutBtn,
.loginForm-btngroup.changeMailAddress #signupOpenBtn,
.loginForm-btngroup.changeMailAddress #loginBtn,
.loginForm-btngroup.changeMailAddress #changePlanBtn,
.loginForm-btngroup.changeMailAddress #deleteStripeAccountBtn,
.loginForm-btngroup.changeMailAddress #deleteCancelBtn {
  display: none;
}

.loginForm-btngroup.changeMailAddress #sendNewEmailAddressBtn {
  display: block;
}

.loginForm-btngroup.passwordResetRequest #sendNewEmailAddressBtn,
.loginForm-btngroup.passwordResetRequest #confirmPassBtn,
.loginForm-btngroup.passwordResetRequest #deleteAccountBtn,
.loginForm-btngroup.passwordResetRequest #logoutBtn,
.loginForm-btngroup.passwordResetRequest #signupOpenBtn,
.loginForm-btngroup.passwordResetRequest #loginBtn,
.loginForm-btngroup.passwordResetRequest #changePlanBtn,
.loginForm-btngroup.passwordResetRequest #deleteStripeAccountBtn,
.loginForm-btngroup.passwordResetRequest #deleteCancelBtn {
  display: none;
}

.loginForm-btngroup.passwordResetRequest #sendNewPasswordBtn {
  display: block;
}

#loginFormBtngroup {
  margin-top: 42px;
}

.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
}
#upgradeModal {
  z-index: 9999;
}

#upgradeModal.hidden {
  display: none;
}

.modal-content {
  border-radius: 6px;
  border: 1px solid #4747477e;
  padding: 8px 12px 22px;
  background: #ebebeb;
  z-index: 1;

  width: 70%;
  max-height: 80vh;

  overflow-y: auto;
}

/*
#changePlanBtn {
  width: 200px;
  height: 30px;
  margin-top: 0.5rem;
  border: none;
  border-radius: 4px;
  background-color: #83a0c2;
  color: #fff;
  cursor: pointer;
  font-size: 13px;
  text-align: center;
  pointer-events: auto;
}
*/

.planFormBtns:hover,
#contactFormsend:hover,
#contactFormCancel:hover,
#authOKBtn:hover,
#deleteCancelBtn:hover,
#deleteStripeAccountBtn:hover,
#deleteAccountBtn:hover,
#loginBtn:hover,
#signupOpenBtn:hover,
#logoutBtn:hover,
#settingsContainerbackBtn1:hover,
#loginContainerbackBtn1:hover,
#loginContainerbackBtn2:hover,
#mainContainerbackBtn:hover,
#changePlanBtn:hover {
  background-color: #1976d2a2;
  color: #fff;
}

/*
button:hover {
  background-color: #115293;
}
*/
.signupSectionDesc {
  position: relative;
  font-size: 12px;
  top: 2px;
  color: #3b3b3b;
}

#loginerrorMessage,
#signuperrorMessage {
  position: relative;
  margin: 12px auto; /* 上下12px、左右自動で中央寄せ */
  font-size: 14px;
  /* text-align: center; 中のテキストも中央寄せ */
  white-space: pre-line;
}

.login-message {
  margin-top: 1rem;
  color: red;
  text-align: center;
}

.login-links {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  margin-top: 2.1rem;
  gap: 3px;
}

#passwordInput {
  margin-bottom: 18px;
}

input:disabled {
  background-color: #f0f0f0;
  cursor: not-allowed;
}

#changePasswordLink,
#changeMailAddressLink,
#forgotPasswordLink {
  font-size: 0.9rem;
  color: #4a7aff;
  text-decoration: none;
}

#changePasswordLink:hover,
#changeMailAddressLink:hover,
#forgotPasswordLink:hover {
  text-decoration: underline;
  opacity: 0.8;
}

#downgradedPlate {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  font-size: 13px;
  font-weight: 500;
  color: #323232;
  margin-top: 0.5rem;
}

/* 退会リンクは “危険操作” として色を変えておく */
.danger-link {
  flex: 0 0 auto;
  font-size: 0.9rem;
  color: #d9544fcb;
  text-decoration: none;
  display: inline-flex;
  width: fit-content;
}

.danger-link:hover {
  text-decoration: underline;
  opacity: 0.8;
}

#errorMessage {
  position: absolute;
  top: 120px;
  left: 150px;
  color: red;
  font-size: 0.9rem;
}

#currentPlan {
  color: #2b2a2a;
}

/*
#resignupPasswordContainer {
  display: none;
}
*/

.form-group {
  margin-bottom: 2rem;
}

.form-group label {
  display: block;
  margin-bottom: 0.3rem;
}

.form-group input {
  width: 100%;
  padding: 0.5rem;
  border-radius: 4px;
  border: 1px solid #ccc;
}

#sendNewPasswordBtn,
#sendNewEmailAddressBtn {
  width: 80%;
  height: 100%;
  min-height: 32px;
  border: none;
  border-radius: 4px;
  background-color: #83a0c2;
  color: #fff;
  cursor: pointer;
  font-size: 13px;
  text-align: center;
}

#signupBtn {
  flex: 1;
  width: 80%;
  height: 100%;
  min-height: 32px;
  border: none;
  border-radius: 4px;
  background-color: #83a0c2;
  color: #fff;
  cursor: pointer;
  font-size: 13px;
  text-align: center;
}
#agreeBtn {
  flex: 1;
  width: 80%;
  height: 100%;
  min-height: 32px;
  border-radius: 4px;
  border: 0.01px solid #141414;
  cursor: pointer;
  font-size: 13px;
  text-align: center;
  pointer-events: auto;
  display: none;
}

#agreeBtn:hover {
  background-color: #fff;
}
#signupBtn:hover {
  background-color: #1976d2a2;
  color: #fff;
}

#signupSection.btn-disabled {
  opacity: 0.5;
  pointer-events: none;
  cursor: not-allowed;
}


#legalContainer {
  position: relative;
  min-height: calc(100% - 10px);           /* 画面の高さの80% */
  width: calc(160% + 16px);
  left: -30%;
  overflow-y: auto;       /* container 全体がスクロール */
  padding: 16px;
  box-sizing: border-box;
  display: none;
  flex-direction: column;
  gap: 24px;              /* section 間のスペース */
  border: 0.01px solid #141414;
  background-color: #ebebeb;
}

#legalContainer section {
  position: static;    /* absolute / fixed を殺す */
  display: block;      /* flex / grid を殺す */
  height: auto;        /* 固定高さを殺す */
  min-height: auto;    /* 変な min-height を殺す */
}

/* 念のため：子要素 */
#legalContainer section > * {
  position: static;
}

#legalContainer h2 {
  color: #333;
  font-size: 1.2rem;
  margin-bottom: 12px;
}

#legalContainer p {
  margin: 12px 0;
  color: #555;
  line-height: 1.6;
  font-size: 14px;
}

#legalContainer a {
  color: #0066cc;
  text-decoration: underline;
}

#legalContainer [data-lang] {
  white-space: pre-line;
}

#legalContainer .back-link {
  display: inline-block;
  margin-top: 40px;
  padding: 8px 16px;
  background: #eee;
  border-radius: 6px;
  text-decoration: none;
  color: #333;
}
#legalContainer .back-link:hover {
  background: #ddd;
}


#planSection {
  text-align: center;
  position: relative;
  justify-content: center;
  display: flex;
  align-items: center;
  height: 15px;
  gap: 8px;
}

.delete-mode.non-deletable {
  opacity: 0.4;
  pointer-events: none;
}
.delete-mode {
  border: 1px solid rgb(255, 61, 61);
  cursor: pointer;
}


 /* about.html ==================================================================== */
 /* about.html ==================================================================== */
 /*
#aboutContainer {
  display: block;
  background-image: url("/image/1202.JPG");
  background-size: cover;
  background-position: center;
  box-shadow: 0 0 10px rgba(0,0,0,0.1);
  border-radius: 8px;
  z-index: 0;
}

#aboutOverray {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  justify-content: center;
  align-items: center;
  background: linear-gradient(to right, #abababa1, #ebebeb, #ebebeb);
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(0,0,0,0.1);
  z-index: 1;
  pointer-events: none;
}

#aboutContent {
  position: absolute;
  z-index: 2;
  height: 100%;
  width: 50%;
  left: 0;
  top: 0;
  padding: 2rem;
  padding-left: 3rem;
  border-radius: 8px;
  box-sizing: border-box;
  overflow: hidden;
  font-family: 'Hiragino Kaku Gothic ProN', sans-serif;
}

.login-container h2 {
  text-align: center;
  margin-bottom: 0;
}

.aboutLine {
  position: absolute;
  left:32px;
  top: 74px;
  height: 2px;
  width: 180px;
  margin-bottom: 1.5rem;
  background: linear-gradient(to right, #e3e029bd, #7ca863b8, #ebebeb, #e3e02966, #7ca863b8);
}

#aboutArea {
  position: absolute;
  z-index: 2;
  height: calc(100% - 3rem);
  width: 50%;
  right: 0;
  top: 1.5rem;
  padding: 2rem;
  padding-left: 0rem;
  border-radius: 8px;
  overflow-y: auto;
  font-family: 'Hiragino Kaku Gothic ProN', sans-serif;
}

.about-section {
  position: absolute;
  z-index: 2; 
  height: 100%;
  width: 100%;
  right: 0;
  top: 0;
  padding: 2rem;
  border-radius: 8px;
}

*/
 /* about.html ==================================================================== */
 /* about.html ==================================================================== */
/* body は画面全体 */

/* コンテナ */
#topContainer {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);


  background: transparent;
  /* padding: 32px 40px; 少し広めにしてもOK*/
  border-radius: 20px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.3);
  backdrop-filter: blur(10px);

  width: min(90dvw, 1200px);
  height: min(90dvh, 800px);
  box-sizing: border-box;

  transition: opacity 0.3s ease;
  overflow-y: auto;
  border: 1px solid rgba(255,255,255,0.05);
  display: flex;

  flex-direction: column;
}

#topContainer.is-hidden {
  opacity: 0;
  pointer-events: none;
}

#topContainer.is-hidden #toiawase {
  opacity: 0;
  pointer-events: none;
}



#top-inner {
  width: 100%;
  max-width: 100%;

  min-width: 0;

  box-sizing: border-box;

  margin-top: auto;
  margin-bottom: auto;

  display: flex;
  flex-direction: column;
  align-items: center;
}

#userNamePlate {
  margin: 16px 32px 6px auto;
  font-size: 14px;
  font-weight: 800;
  text-align: right;
  /*text-shadow: 2px 2px 10px rgba(0,0,0,0.5);*/
}

#userPlanPlate {
  margin: 0 32px 0 auto;
  font-size: 14px;
  font-weight: 800;
  text-align: right;
  /*text-shadow: 2px 2px 10px rgba(0,0,0,0.5);*/
}

#userPlanPlate.free {
  background-color: #e0f0ff;
  color: #0077cc;
}

#userPlanPlate.Studio {
  background-color: #fff3e0;
  color: #ff8800;
}

#userPlanPlate.guest {
  background-color: #f0f0f0;
  color: #555;
}


/* タイトル */
.hero-title,
#topContainer h1 {
  font-size: clamp(2.5rem, 6vw, 4rem);
  font-weight: 800;
  color: #fff;
  text-shadow: 2px 2px 10px rgba(0,0,0,0.5);
  margin: 0 auto 8px;
  text-align: center;
}

#topContainer h2 {
  color: #fff;
  text-shadow: 2px 2px 10px rgba(0,0,0,0.5);
  margin-bottom: 32px;
  text-align: center;
}

/* ボタングループ */
.button-group {
  max-width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;

  align-items: center;
}

.button-group2 {
  display: flex;
  align-items: center;  
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;

}

.topPagetab-themeWrapper {
  margin-top: 24px;
  width: 80%;
}

/* ボタン共通 */
.topPagetab-btn, .lang-btn {
  /*background: rgba(255, 255, 255, 0.671);*/
  border: none;
  padding: 12px 30px;
  font-size: 1.1rem;
  font-weight: 600;
  border-radius: 30px;
  cursor: pointer;
  box-shadow: 0 5px 15px rgba(0,0,0,0.2);
  width: 250px;
  height: 2.7rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

#resetLangFlagBtn {
  margin-top: 3rem;
}

.select-searchLang,
#portNoInput {
  position: relative;
  height: 2.2rem;
  display: flex;
  width: 250px;
  border-radius: 6px;
  text-align: center;
  font-size: 14px;
  border: 0.01px solid #434343;
}

#settingsContent h2 {
  text-align: center;
  width: 100%;
  margin-bottom: 16px;
}


#settingsContent label {
  display: block;
  text-align: center;
  width: 100%;
}

#requestCodePassChangeInput,
#displayNameChangeInput {
  position: relative;
  min-height: 2.2rem;
  padding: 0 16px;
  display: flex;
  min-width: 300px;
  max-width: fit-content;
  border-radius: 4px;
  text-align: center;
  font-size: 14px;
  border: 0.01px solid #434343;
  margin: 0 auto 8px auto;
  color: #333;
}

.settings-contentBtn {
  margin-bottom: 38px;
  position: relative;
  height: 2.2rem;
  display: flex;
  width: 200px;
  border-radius: 6px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-size: 14px;
  color: #ffffff00;
  border: none;

}

.settings-contentBtn:hover {
  color: #fff !important;
}

.select-searchLang {
  background-color: #fcfcfc;
  color: black;
  pointer-events: auto;
  cursor: pointer;
  display: flex;
  align-items: center;      /* 縦中央 */
  justify-content: center; 
}

.custom-select-wrapper {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);

  left: 75%;

  min-width: 190px;
  max-height: 80vh;
  overflow-y: auto;

  background: #fff;
  border: 1px solid #ccc;
  border-radius: 4px;

  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);

  font-family: 'Hiragino Kaku Gothic ProN', sans-serif;
  color: #d4d3d3;
  color: #1f1f1f;
  font-size: 13px;

  text-align: left;
  padding: 5px 8px;
  z-index: 1000;
}

.custom-select-wrapper ul {
  list-style: none;     /* ・を消す */
  margin: 0;
  padding: 0;
  pointer-events: auto;
  cursor: pointer;
}
.custom-select-wrapper li:hover {
  list-style: none;
  background: #dedede;
}


.topPagetab-btn.hidden {
  display: none;
}

.topPagetab-btns {
  border: none;
  font-size: 1.1rem;
  font-weight: 600;
  border-radius: 30px;
  width: 520px;
  height: 2.7rem;
  display: flex;
  gap: 20px;
  
}

#topPagetab-btnsWrapper {
  margin-bottom: 12px;
}

/*
.langJson-ChangeBtnWrapper {
  border: none;
  font-size: 1.1rem;
  font-weight: 600;
  border-radius: 30px;
  width: 520px;
  height: 2.7rem;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 8px;
  box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}
.langJson-ChangeBtnWrapper.hidden,
.topPagetab-btns.hidden {
  display: none;
}
*/

#langJson-ChangeBtnWrapper {
  width: 80%;
  gap: 0px;
  border: none;
  font-size: 1.1rem;
  font-weight: 600;
  height: 2.7rem;
  display: flex;
  gap: 20px;
}

/* 言語切替ボタン */
.lang-btn {
  margin-top: 10px;
  font-size: 1rem;
  padding: 10px 20px;
  border-radius: 25px;
  background: rgba(255,255,255,0.85);
}

body.theme-natsu #stripe-fallback-msg,
body.theme-aki #stripe-fallback-msg {
  font-family: 'Hiragino Kaku Gothic ProN', sans-serif;
  color: #d4d3d3;
}

body.theme-haru #stripe-fallback-msg,
body.theme-fuyu #stripe-fallback-msg {
  font-family: 'Hiragino Kaku Gothic ProN', sans-serif;
  color: #323232;
}

#stripe-confirm-btn {
  border: none;
  background: rgba(255, 255, 255, 0.175);
  border-radius: 25px;
  font-size: 1rem;
  transition: all 0.3s ease;
  padding: 8px 16px;
  font-weight: 600;
}

#stripe-confirm-btn:hover {
  background: rgba(255, 255, 255, 0.349);
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.3);
  text-decoration: underline;
}

body.theme-aki #stripe-confirm-btn,
body.theme-natsu #stripe-confirm-btn {
  font-family: 'Hiragino Kaku Gothic ProN', sans-serif;
  color: #dbdbdb;

}

body.theme-haru #stripe-confirm-btn,
body.theme-fuyu #stripe-confirm-btn {
  font-family: 'Hiragino Kaku Gothic ProN', sans-serif;
  color: #323232;

}

body.theme-aki #stripe-confirm-btn a:hover,
body.theme-natsu #stripe-confirm-btn a:hover {
  font-family: 'Hiragino Kaku Gothic ProN', sans-serif;
  color: #dbdbdb;

}

body.theme-haru #stripe-confirm-btn a:hover,
body.theme-fuyu #stripe-confirm-btn a:hover {
  font-family: 'Hiragino Kaku Gothic ProN', sans-serif;
  color: #323232;

}

body.theme-aki #stripe-confirm-btn span,
body.theme-natsu #stripe-confirm-btn span {
  color: #dbdbdb;
}

body.theme-fuyu #stripe-confirm-btn span,
body.theme-haru #stripe-confirm-btn span {
  color: #323232;
}

.legal-links {
  margin-top: 10px;
  padding: 12px 16px;
  align-self: stretch;
  display: flex;
  justify-content: center;
  gap: 6px;

  font-size: 13px;
  color: #888;   /* ← opacity廃止 */
  font-family: 'Hiragino Kaku Gothic ProN', sans-serif;
}


#toiawase {
  margin: auto 32px 32px auto;
  width: fit-content;
  font-size: 14px;
  pointer-events: auto;
  cursor: pointer;
  opacity: 1;
}

#toiawase:hover {
  text-decoration: underline !important;
}


#reportBox {
  position: absolute;
  bottom: 2rem;
  left: 4rem;
  font-size: 14px;
  pointer-events: auto;
  cursor: pointer;
}

#retentionNotice {
  display: flex;
  align-items: center;
  gap: 6px;
}

#retentionDetailsLink {
  cursor: pointer;
  text-decoration: underline;
  font-weight: 550;
}

#retentionDetailsLink:hover {
  color: #0073c5;
}

body.theme-natsu #topThemeSelect,
body.theme-natsu #toiawase,
body.theme-natsu #userPlanPlate,
body.theme-aki #userPlanPlate,
body.theme-natsu #userNamePlate,
body.theme-aki #topThemeSelect,
body.theme-aki #toiawase,
body.theme-aki #userNamePlate,
body.theme-aki .legal-links a,
body.theme-natsu .legal-links a {
  color: #d4d3d3;
  text-decoration: none;
}

body.theme-aki #toiawase:hover,
body.theme-aki .legal-links a:hover,
body.theme-natsu .legal-links a:hover {
  color: #dbdbdb;
  text-decoration: underline;
}

body.theme-fuyu #topThemeSelect,
body.theme-fuyu #toiawase,
body.theme-fuyu #userPlanPlate,
body.theme-haru #userPlanPlate,
body.theme-fuyu #userNamePlate,
body.theme-haru #topThemeSelect,
body.theme-haru #toiawase,
body.theme-haru #userNamePlate,
body.theme-fuyu .legal-links a,
body.theme-haru .legal-links a {
  color: #323232;
  text-decoration: none;
}

body.theme-fuyu #toiawase:hover,
body.theme-fuyu .legal-links a:hover,
body.theme-haru .legal-links a:hover {
  color: #323232;
  text-decoration: underline;
}

body.theme-aki .legal-links span,
body.theme-natsu .legal-links span {
  color: #dbdbdb;
}

body.theme-fuyu .legal-links span,
body.theme-haru .legal-links span {
  color: #323232;
}

#haru {
  background: linear-gradient(to right, #975b98, #d8cfd8 34px, #d8cfd8 100%);
}

#natsu {
  background: linear-gradient(to right, #295629, #031e08 34px, #031e08 100%);
  color: #d4d3d3;
}

#aki {
  background: linear-gradient(to right, #e28787, #1e0303 34px, #1e0303 100%);
  color: #d4d3d3;
}

#fuyu {
  background: linear-gradient(to right, #516679, #d9e2e8 34px, #d9e2e8 100%);
}


/* レスポンシブ */
@media(max-width: 600px){
  #topContainer h1 {
    font-size: 3rem;
  }
  .topPagetab-btn, .lang-btn {
    padding: 10px 20px;
    font-size: 1rem;
  }
}

.memberActionContainer {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px;
  gap: 2px;
  background-color: transparent;
  width: 100%;
  margin-top: 8px;
}

.memberActionContainer.fourButtons {
  height: auto;
  flex-wrap: wrap;
}

.memberActionContainer.fourButtons .memberActionBtn {
  flex: 1 1 calc(50% - 2px);
  min-width: 12rem;
}

.memberActionBtn {
  flex: 1;
  height: 2.5rem;
  background-color: #1d1d1ddf;
  color: #dedede;
  border: none;
  border-radius: 0px;
  transition: border-radius 0.3s ease;
}

.memberActionBtn.select {
  background-color: #555555a0;
  border: 2px solid #ddd;
  border-radius: 16px;

}

.memberActionBtn:hover {
  background-color: #555555a0;
}


#freeUserGuardPanel{
  backdrop-filter: blur(2px);
  align-items: center;
  justify-content: center;
  display: none;
}

/* 中央メッセージ */
.guide-message {
  background: rgba(0, 0, 0, 0.75);
  color: #fff;
  padding: 20px 28px;
  border-radius: 10px;
  text-align: center;
  max-width: 320px;
  line-height: 1.6;
}

#fileGuide-message {
  background: rgba(0, 0, 0, 0.75);
  color: #fff;
  padding: 20px 28px;
  border-radius: 10px;
  text-align: center;
  max-width: 320px;
  line-height: 1.6;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 9999;
}

#guide-message.hidden {
  display: none;
}


#languageSelect1stlabel {
  margin-top: 16px;

}

#themeSelect,
.languageSelectFont {
  font-weight: 600;
  color: #d4d3d3;
  width: fit-content;
  margin: 0 auto;
}

#topThemeSelect {
  font-weight: 600;
  width: fit-content;
  margin: 0 auto;
}

#passChangeMsg {
  display: block;
  margin: 0 auto;
  font-size: 13px;
  font-weight: 500;
  width: fit-content;

}

#passChangeMsg.NG {
  color: #ff5555;
}

#languageSelect1stlabel,
#languageSelect2ndlabel,
#languageSelect3rdlabel {
  font-weight: 550;
  font-size: 13px;
  margin-bottom: -6px;
}

#languageSelect2ndlabel,
#languageSelect3rdlabel {
  margin-top: 12px;
}

#backgroundFuyuBtn {
  margin-bottom: 28px;
}

#topButtonGroup {
  border: none;
}









#aboutBtn {
  margin-top: 16px;
}

.topPagetab-langWrapper {
  width: 100%;
  flex: 1;
}

.fileContainer-langWrapper {
  width: 80%;
  margin: 0 auto 32px;
  flex: 1;
}

.topPagetab-langScroll {
  display: flex;
  gap: 8px;
  overflow-x: auto; /* 横スクロール */
  scroll-behavior: smooth;
  padding: 4px 8px;
}

.fileContainerLangtab-btn,
.topPageLangtab-btn {
  flex: 0 0 auto; /* 固定幅 */
  min-width: 85px;
  padding: 4px 8px;
  white-space: nowrap;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.topPageLangtab-btn {
  flex: 0 0 auto;
  min-width: 85px;

  padding: 4px 8px;

  white-space: nowrap;

  background: transparent;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(6px);

  border-radius: 4px;
  cursor: pointer;

  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);

  transition: all 0.3s ease;
}

.fileContainerLangtab-btn:hover,
.topPageLangtab-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.3);
}

.fileContainerLangtab-btn,
.topPageLangtab-btn {
  background-color: rgba(212, 212, 212, 0.08); /* うっすら白 */
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px); /* Safari用 */

  border: 1px solid rgba(255, 255, 255, 0.15); /* 輪郭うっすら */
  color: #222;
}

.topPagetab-btn {
  position: relative;
  overflow: hidden;
}
.topPagetab-btn::after {
  content: "";
  position: absolute;
  inset: 0;
  width: 200%; 
  transform: translateX(-100%);
  transition: transform 1.4s cubic-bezier(0.0, 0.9, 0.2, 1);
  z-index: 0;
}
/* テキストを上に */
.topPagetab-btn span {
  position: relative;
  z-index: 1;
}
.topPagetab-btn:hover::after {
  transform: translateX(0);
}
/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
/* テキストを上に */
body.theme-haru .topPagetab-btn {
  color: #323232;
  background: linear-gradient(to right, #c69ac786, #f3e9f3 34px, #f3e9f3 100%);
}
/* 上に乗せるレイヤー */
body.theme-haru .topPagetab-btn::after {
  background: linear-gradient(to right, #ce83cf80, #71427200);
}
body.theme-haru .topPagetab-btn:hover {
  color: #2a323a;
}

body.theme-haru #userPlanPlate,
body.theme-haru #userNamePlate {
  color: #301931e1
}
/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
body.theme-natsu .topPageLangtab-btn {
  background-color: rgba(212, 212, 212, 0.373);
}
body.theme-natsu .topPagetab-btn {
  color: #073007e4;
  background: linear-gradient(to right, #999c8d80, #f3e9f386 34px, #f3e9f386 100%);
}
body.theme-natsu .topPagetab-btn::after {
  background: linear-gradient(to right, #254911af, #67723b00);
}

/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
body.theme-aki .topPageLangtab-btn {
  background-color: rgba(212, 212, 212, 0.373);
}
body.theme-aki .topPagetab-btn {
  color: #300707e4;
  background: linear-gradient(to right, #d47d6a80, #ddc1b4a9 34px, #ddc1b486 100%);
}
body.theme-aki .topPagetab-btn::after {
  background: linear-gradient(to right, #9d5443af, #db948400);
}

/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
body.theme-fuyu .topPagetab-btn {
  color: #323232;
  background: linear-gradient(to right, #a0b2c280, #d9e2e8 34px, #d9e2e8 100%);
}
body.theme-fuyu .topPagetab-btn::after {
  background: linear-gradient(to right, #7ba9d280, #3c506100);
}
body.theme-fuyu .topPagetab-btn:hover {
  color: #2a323a;
}
/* ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */

html {
  scroll-behavior: smooth;
}





/* 見切れ部分を半透明でチラ見せ */
.topPagetab-langScroll::after {
  content: "";
  position: absolute;
  right: 0;
  top: 0;
  width: 30px;
  height: 100%;
  pointer-events: none;
  /*background: linear-gradient(to left, rgba(255,255,255,1), rgba(255,255,255,0));*/
}

.select-deleteLang {
  position: relative;
  width: 100px; 
  left: 180px;
  top: -30px;
  text-align: left;
  font-weight: 550;
  font-size: 13px;
  color: #4f4f4f;
  cursor: pointer;
  pointer-events: auto;
  margin-bottom: -32px;
  display: none;
}


.select-deleteLang:hover {
  text-decoration: underline;
}




/* デフォルト（theme-natsu） +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
body.theme-natsu .chat-input-wrapper textarea:focus {
  color: #e0e0e0;
  background: rgba(255,255,255,0.18);
}
body.theme-natsu .community-btn {
  color: #e0e0e0;
  color: #f6d3eb;
}
body.theme-natsu #communityBoardInfo {
  color: #e0e0e0;
  background-color: transparent;
}

body.theme-natsu .communityFilterColumn,
body.theme-natsu #communityQandABoard {
  color: #e0e0e0;
}
body.theme-natsu .replyWrapper {/* リプライ */
  background-color: #2d2d2d57;
}

body.theme-natsu #sendCommunityTagsContainer,
body.theme-natsu .myMessageWrapper, 
body.theme-natsu .threadWrapper {
  background-color: #d6d6d627;
}
body.theme-natsu .myPreview {
  background-color: #475e468f;
}
body.theme-natsu .otherPreview {
  background-color: #0665067d;
}
body.theme-natsu .otherMessageWrapper,
body.theme-natsu .replyWrapper {
  background-color: #1979193d;
}
body.theme-natsu .myResWrapper {
  background-color: #d6d6d627;
}

body.theme-natsu .threadAndRepMarker {
  border: 8px solid #b0c4b050;
  
}

/* background: linear-gradient(to right, #84427b50, #84427b50 128px, #6675416a 100%); */
/* 春テーマ +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
body.theme-haru .chat-input-wrapper textarea:focus {
  color: #1e1d1d;
  background: #d8cfd8f6;
}
body.theme-haru .community-btn {
  color: #1e1d1d;
  color: #f6d3eb;
}
body.theme-haru #communityBoardInfo {
  color: #e0e0e0;
  background-color: #2a2a2ae2;
}

body.theme-haru .communityFilterColumn,
body.theme-haru #communityQandABoard {
  color: #1e1d1d;
}
body.theme-haru .replyWrapper {/* リプライ */
  background-color: #4242421b;
}

body.theme-haru #sendCommunityTagsContainer,
body.theme-haru .myMessageWrapper,
body.theme-haru .threadWrapper {
  background-color: #50505027;
}
body.theme-haru .myPreview {
  background-color: #dad9d978;
}
body.theme-haru .otherPreview {
  background-color: #d08ed079;
}
body.theme-haru .otherMessageWrapper,
body.theme-haru .replyWrapper {
  background-color: #b878b85d;
}

body.theme-haru .myResWrapper {
  background-color: #38383827;
}

body.theme-haru .threadAndRepMarker {
  border: 8px solid #ce1bce50;
}

/* 秋テーマ +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
body.theme-aki .chat-input-wrapper textarea:focus {
  color: #e0e0e0;
  background: rgba(255,255,255,0.18);
}
body.theme-aki .community-btn {
  color: #e0e0e0;
  color: #f6d3eb;
}
body.theme-aki #communityBoardInfo {
  color: #e0e0e0;
  background-color: transparent;
}

body.theme-aki .communityFilterColumn,
body.theme-aki #communityQandABoard {
  color: #e0e0e0;
}
body.theme-aki .replyWrapper {/* リプライ */
  background-color: #2d2d2d57;
}

body.theme-aki #sendCommunityTagsContainer,
body.theme-aki .myMessageWrapper,
body.theme-aki .threadWrapper {
  background-color: #d6d6d627;
}
body.theme-aki .myPreview {
  background-color: #856a7082;
}
body.theme-aki .otherPreview {
  background-color: #46141d90;
}
body.theme-aki .otherMessageWrapper,
body.theme-aki .replyWrapper {
  background-color: #9c47565d;
}

body.theme-aki .myResWrapper {
  background-color: #d6d6d627;
}

body.theme-aki .threadAndRepMarker {
  border: 8px solid #bda3a850;
}

/* 冬テーマ +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++*/
body.theme-fuyu .chat-input-wrapper textarea:focus {
  color: #1e1d1d;
  background: #cbd8e0f6;
}
body.theme-fuyu .community-btn {
  color: #1e1d1d;
  color: #f6d3eb;
}
body.theme-fuyu #communityBoardInfo {
  color: #e0e0e0;
  background-color: #2a2a2ae2;
}

body.theme-fuyu .communityFilterColumn,
body.theme-fuyu #communityQandABoard {
  color: #1e1d1d;
}
body.theme-fuyu .replyWrapper {/* リプライ */
  background-color: #4242421b;
}

body.theme-fuyu #sendCommunityTagsContainer,
body.theme-fuyu .myMessageWrapper,
body.theme-fuyu .threadWrapper {
  background-color: #9a999937;
}
body.theme-fuyu .myPreview {
  background-color: #d6d6d693;
}
body.theme-fuyu .otherPreview {
  background-color: #74c3ca73;
}
body.theme-fuyu .otherMessageWrapper,
body.theme-fuyu .replyWrapper {
  background-color: #78b2b85d;
  
}

body.theme-fuyu .myResWrapper {
  background-color: #38383827;
}

body.theme-fuyu .threadAndRepMarker {
  border: 8px solid #1ab4c250;
}

/*
#contactForm {
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); 
  z-index: 1000;
  width: 0px;
  max-width: 0px;
  height: 0px;
  background: #fff;
  padding: 0px;
  pointer-events: none;
}

#contactForm.open {
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1000;
  width: 400px; 
  max-width: 90vw;
  height: auto;
  background: #fff;
  padding: 20px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.3);
  border-radius: 8px;
  pointer-events: auto;
}
*/

#contactForm {
  display: none;  /* 初期は非表示 */
  flex-direction: column;
  gap: 15px;
  font-family: 'Helvetica Neue', Arial, sans-serif;
  width: 50%;
  max-width: 90%;
  margin: 50px auto;
  padding: 20px;
  border: 1px solid #ddd;
  border-radius: 8px;
  background: linear-gradient(to right, #abababe8, #ebebeb, #ebebeb);
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

#contactForm.open {
  display: flex;  /* これがないと表示されない */
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1000;
}
#contactForm h2 {
  text-align: center;
  margin-bottom: 10px;
}

#contactForm label {
  display: flex;
  flex-direction: column;
  font-size: 14px;
}


#contactForm input,
#contactForm select,
#contactForm textarea {
  margin-top: 5px;
  padding: 4px 6px;
  font-size: 14px;
  line-height: 1.5;              /* ← これ重要 */
  border: 1px solid #ccc;        /* ← textareaにも適用 */
  border-radius: 4px;
  font-family: 'Helvetica Neue', Arial, sans-serif;
  box-sizing: border-box;        /* ← 地味に効く */
}
#contactForm textarea {
  resize: vertical;
  font-family: 'Helvetica Neue', Arial, sans-serif;
  min-height: 6em;
  margin-top: 5px;
  max-height: 18em;

}


.optional-contact-info {
  display: none;
}
#contactForm button {
  font-size: 14px;
  background-color: #3498db;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.2s;
  flex: 1;
  height: 100%;
}

#contactForm button:hover {
  background-color: #2980b9;
}

#formResult {
  font-size: 13px;
  color: #333;
  text-align: center;
  margin-top: 10px;
}

.formActions {
  display: flex;
  width: 80%;
  height: 2rem;
  margin: 16px 0 8px 20%;
  gap: 8px
}

#reportBox {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1000;
  display: none;
  background-color: #fefefe;
  color: #333;
  font-size: 14px;
}

#reportBox.open {
  display: flex;
}

#reportBoxsBackBtn {
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 120px;
  height: 2rem;
  color: #333;
}

.reportBoxLeftAreaBtn {
  width: 100%;
  height: 2.2rem;
  color: #333;
}

#reportBoxCenterArea,
#reportBoxLeftArea {
  border: 1px solid #474747;
  height: 90%;
  position: relative;
  top: 10%;
  color: #333;
  display: block;

}

#reportBoxCenterArea {
  width: 70%;
  overflow-y: auto;
  padding: 1rem;  
}
#reportBoxLeftArea {
  width: 30%;

}


#searchSettingContainer {
  position: relative;
  height: 0px;
  overflow: hidden;
  transition: height 0.5s ease;
  backdrop-filter: blur(6px);

}

#searchSettingContainer.open {
  position: relative;
  height: 45rem;

  margin: 0 0 12px 0;

  border-radius: 6px 6px 0 0;
  border-top: 6px solid #88888867;
  border-bottom: 6px solid #88888867;

  background-color: #88888867;

  box-sizing: border-box;
  background-clip: padding-box;
}

#searchSettingContainerScroll {
  height: 100%;
  overflow-y: auto;
  padding: 8px 4px 32px;
}

#searchLabelMatchBtns {
  display: flex;
  width: 100%;
  height: 2.2rem;
  font-size: 12px;
  cursor: pointer;
  border: none;
}

.communityBlockOwnerLabel {
  font-weight: bold;
  color: #f0eed1c5;
  font-size: 14px;
  width: calc(100% + 16px);
  min-height: 3rem;
  height: auto;
  background: linear-gradient(to bottom, #bebda3c5, #f3e35600);
  padding: 5px 8px 2px;
  position: relative;
  box-sizing: border-box;

  border-radius: 4px 4px 0 0;

  left: -8px;
}

#communityBoardInfo .communityBlockWrapper {
  overflow-y: auto;
  overflow-x: hidden;
}

.ownerInviteItem .communityBlockOwnerLabel {
  font-weight: bold;

  font-size: 14px;
  width: 100%;
  min-height: 3rem;
  height: auto;
  color: #f0eed1c5;  
  background: linear-gradient(to bottom, #bebda3c5, #f3e35600);
  padding: 5px 8px 2px;
  position: absolute;
  box-sizing: border-box;

  top: 0;
  left: 0;
}

.ownerAnnouncementItem {
  color: #e2e2e2;
  margin-bottom: 16px;
  border: 1px solid #ccc;
  border-radius: 6px;
  padding: 1rem;
  position: relative;

  overflow: hidden;
  max-height: 1000px;
  transition: max-height 0.4s ease, opacity 0.4s ease, padding 0.4s ease, margin 0.4s ease;

}

.ownerAnnouncementItem.is-hidden {
  max-height: 0;
  opacity: 0;
  padding-top: 0;
  padding-bottom: 0;
  margin-bottom: 0;
  border-width: 0;
}

.ownerAnnounceItemsWrapper {
  border: 1px solid #ccc;
  border-radius: 6px;
}

.itemWrapperOpenBtn {
  color: #f0eed1c5;
  background-color: transparent;
  border: 1px solid #ccc;
  border-top: none;
  height: 2.5rem;
  width: 100%;
  border-radius: 0 0 6px 6px;
}

.itemWrapperOpenBtn.open {
  border: none;
  border-left: 1px solid #ccc;
  border-right: 1px solid #ccc;
  border-radius: 0;
}

.ChangeContainerLabel {
  margin-top: 16px;
  background: linear-gradient(to right, #5e5e5e8c, #5e5e5e00);
  display: flex;
  padding-top: 3px;
  padding-left: 8px;
}

.searchChangeContainer {
  display: grid;
  height: 4.4rem;
  width: 100%;

  grid-template-columns: 1fr 1fr; /* 横2つ */
  grid-template-rows: 1fr 1fr;   /* 縦2つ */
  gap: 1px;
  
}

#displayFontSizePlate {
  grid-column: 1 / 3;
  display: flex;
  justify-content: center;
  align-items: center;
  pointer-events: none;
}

.fontSize-changeBtn {
  flex: 1;
  height: 100%;
  font-size: 14px;
  cursor: pointer;
  border: none;
}

.fontSize-changeBtn.stop {
  color: #f6d3eb6b;
}


body.theme-natsu .chatMessageActions button  {
  background-color: #82ad8290;
  color: #fff;
}
body.theme-natsu .editModePanel button  {
  background: linear-gradient(to right, #295629, #295629 34px, #031e0800 100%);
  color: #e0e0e0;
}


body.theme-haru .chatMessageActions button  {
  background-color: #c097c0;
  color: #222;
}
body.theme-haru .editModePanel button {
  background: linear-gradient(to right, #d8cfd8, #d8cfd8 34px, #d8cfd800 100%);
  color: #1e1d1d;
}


body.theme-aki .chatMessageActions button  {
  background-color: #e2878790;
  color: #ebebeb;
}
body.theme-aki .editModePanel button {
  background: linear-gradient(to right, #e28787, #e28787 34px, #1e030300 100%);
  color: #e0e0e0;
}


body.theme-fuyu .chatMessageActions button  {
  background-color: #9eaebc;
  color: #222;
}
body.theme-fuyu .editModePanel button {
  background: linear-gradient(to right, #d9e2e8, #d9e2e8 34px, #d9e2e800 100%);
  color: #1e1d1d;
}

body.theme-natsu .chatMessageActions button:hover  {
  background-color: #82ad82d0;

}
body.theme-natsu .editModePanel button:hover  {
  background: linear-gradient(to right, #54a054, #54a054 34px, #031e0800 100%);
  color: #e0e0e0;
}

body.theme-haru .chatMessageActions button:hover  {
  background-color: #daa5db;

}
body.theme-haru .editModePanel button:hover  {
  background: linear-gradient(to right, #da9bdb, #da9bdb 34px, #d8cfd800 100%);
  color: #1e1d1d;
}

body.theme-aki .chatMessageActions button:hover  {
  background-color: #ce6666;

}
body.theme-aki .editModePanel button:hover  {
  background: linear-gradient(to right, #ce6666, #ce6666 34px, #1e030300 100%);
  color: #e0e0e0;
}

body.theme-fuyu .chatMessageActions button:hover  {
  background-color: #8da8bf;

}
body.theme-fuyu .editModePanel button:hover  {
  background: linear-gradient(to right, #8da8bf, #8da8bf 34px, #d9e2e800 100%);
  color: #1e1d1d;
}

body.theme-natsu .editModePanel button.active  {
  background: linear-gradient(to right, #54a054, #54a054 34px, #031e0800 100%);
  color: #e0e0e0;
}

body.theme-haru .editModePanel button.active  {
  background: linear-gradient(to right, #da9bdb, #da9bdb 34px, #d8cfd800 100%);
  color: #1e1d1d;
}

body.theme-aki .editModePanel button.active  {
  background: linear-gradient(to right, #ce6666, #ce6666 34px, #1e030300 100%);
  color: #e0e0e0;
}

body.theme-fuyu .editModePanel button.active  {
  background: linear-gradient(to right, #8da8bf, #8da8bf 34px, #d9e2e800 100%);
  color: #1e1d1d;
}

/*
#virtualScrollViewport {
  backdrop-filter: blur(2px);
}
*/
body.theme-natsu #sendCommunityMessageBtn,
body.theme-natsu .edit-area {
  background: linear-gradient(to right, #336133, #336133 34px, #074512 100%);
  color: #e0e0e0;
}

body.theme-haru #sendCommunityMessageBtn,
body.theme-haru .edit-area {
  background: linear-gradient(to right, #bd87bd, #bd87bd 34px, #d9bcd9 100%);
  color: #1e1d1d;
}

body.theme-aki #sendCommunityMessageBtn,
body.theme-aki .edit-area {
  background: linear-gradient(to right, #a45151, #a45151 34px, #400606 100%);
  color: #e0e0e0;
}

body.theme-fuyu #sendCommunityMessageBtn,
body.theme-fuyu .edit-area {
  background: linear-gradient(to right, #8da8bf, #8da8bf 34px, #c4dbeb 100%);
  color: #1e1d1d;
}

body.theme-natsu .fileDocument-userWriteArea1,
body.theme-natsu .fileDocument-userWriteArea2 {
  background-color: #031e08d6;
  color: #e0e0e0ef;
}

body.theme-haru .fileDocument-userWriteArea1,
body.theme-haru .fileDocument-userWriteArea2 {
  background-color: #d8cfd8;
  color: #332433e2;
}

body.theme-aki .fileDocument-userWriteArea1,
body.theme-aki .fileDocument-userWriteArea2 {
  background-color: #1e0303cf;
  color: #e0e0e0ef;
}

body.theme-fuyu .fileDocument-userWriteArea1,
body.theme-fuyu .fileDocument-userWriteArea2 {
  background-color: #d9e2e8;
  color: #293138e7;
}




.spinnerGradient {
  width: 50px;
  height: 50px;
  border-radius: 50%;

  /* 角度調整＋フェード */
  background: conic-gradient(
    from 270deg,
    #3498db 0deg,
    rgba(52, 152, 219, 0) 90deg
  );

  /* リングを細く＆外側寄りに */
  -webkit-mask: radial-gradient(farthest-side, transparent 75%, black 76%);
  mask: radial-gradient(farthest-side, transparent 75%, black 76%);

  /* 頭を丸くするためのぼかし */
  filter: blur(0.5px);

  animation: spin 1s linear infinite;
}
/* 頭の丸いやつ */
.spinnerGradient::after {
  content: "";
  position: absolute;

  width: 8px;
  height: 8px;
  border-radius: 50%;

  background: #3498db;

  top: 0;
  left: 50%;
  transform: translateX(-50%);
}
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

body.theme-natsu .spinnerGradient {
  background: conic-gradient(rgba(41, 86, 41, 0) 70%, #62c162);
}
body.theme-natsu .spinnerGradient::after {
  background: #62c162;
}

body.theme-haru .spinnerGradient {
  background: conic-gradient(rgba(216, 207, 216, 0) 70%, #934b93);
}
body.theme-haru .spinnerGradient::after {
  background: #934b93;
}

body.theme-aki .spinnerGradient {
  background: conic-gradient(rgba(226, 135, 135, 0) 70%, #e69999);
}
body.theme-aki .spinnerGradient::after {
  background: #e69999;
}

body.theme-fuyu .spinnerGradient {
  background: conic-gradient(rgba(217, 226, 232, 0) 70%, #477fa4);
}
body.theme-fuyu .spinnerGradient::after {
  background: #477fa4;
}

#scrollNavBtns {
  position: absolute;
  left: 50%;
  bottom: 30px;
  transform: translateX(-50%);
  z-index: 1;

  border-radius: 50px;
  padding: 6px 32px;
  backdrop-filter: blur(6px);
  border: 1px solid #cdb14064;

  display: flex;
  gap: 16px;
}

#scrollNavBtns.up {
  bottom: 112px;
}

#scrollNavBtns.is-hidden {
  display: none;
}

.scrollNavBtn {
  font-size: 18px;
  border-radius: 50%;
  background: #477fa4af;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px;
  padding-bottom: 4px;
  border: none;

}

#scrollToConcludedBtn {
  border-radius: 50px;
  padding: 0px 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #cdb14064;
  font-size: 12px;
  font-weight: 550;
  opacity: 1;
  pointer-events: auto;
  white-space: nowrap;
}

#scrollToConcludedBtn.is-hidden {
  display: none;
}

#scrollToConcludedBtn.disabled {
  opacity: 0.4;
  pointer-events: none;
}

/*
.widthViewMode.width #scrollToBottomBtn {
  right: 50%;
}
#scrollToBottomBtn:hover {
  background: #477fa4;
}*/

.arrowA {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  transform: scaleX(1) scaleY(0.6);
  transform-origin: center;

  font-size: 22px;
  font-weight: 600;
  padding: 0;
  width: 18px;
  height: 18px;
  min-width: 18px;
  min-height: 18px;
  max-width: 18px;
  max-height: 18px;


  line-height: 18px;
  position: relative;

  color: #2a2a2a;
}

.arrowB {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  transform: scaleX(1) scaleY(0.6);
  transform-origin: center;

  font-size: 18px;
  font-weight: 600;
  padding: 0;
  width: 18px;
  height: 18px;
  min-width: 18px;
  min-height: 18px;
  max-width: 18px;
  max-height: 18px;


  line-height: 18px;
  position: relative;

  color: #2a2a2a;
}

.arrowC {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  transform: scaleX(1) scaleY(0.6);
  transform-origin: center;

  font-size: 18px;
  font-weight: 600;
  padding: 0;
  width: 18px;
  height: 18px;
  min-width: 18px;
  min-height: 18px;
  max-width: 18px;
  max-height: 18px;


  line-height: 18px;
  position: relative;

  color: #2a2a2a;
}


body.theme-natsu .scrollNavBtn {
  background: #62c162;
}
body.theme-natsu #scrollToConcludedBtn,
body.theme-natsu .arrow {
  color: #3d3d3d;  
}

body.theme-natsu .scrollNavBtn:hover {
  background: #62c162af;
}

body.theme-haru .scrollNavBtn {
  background: #934b93;
}
body.theme-haru #scrollToConcludedBtn,
body.theme-haru .arrow {
  color: #d8cfd8;
}
body.theme-haru .scrollNavBtn:hover {
  background: #934b93af;
}

body.theme-aki .scrollNavBtn {
  background: #e69999;
}
body.theme-aki #scrollToConcludedBtn,
body.theme-aki .arrow {
  color: #3d3d3d;  
}

body.theme-aki .scrollNavBtn:hover {
  background: #e69999af;
}

body.theme-fuyu .scrollNavBtn {
  background: #477fa4;
}
body.theme-fuyu #scrollToConcludedBtn,
body.theme-fuyu .arrow {
  color: #c9c9c9;
}

body.theme-fuyu .scrollNavBtn:hover {
  background: #477fa4af;
}


#scrollToBottomBtn .arrow {
  top: 0px;
}
#scrollToTopBtn .arrow {
  top: -2px;
}
#scrollPrevWrapperBtn .arrow {
  top: -2px;
}
#scrollNextWrapperBtn .arrow {
  top: 0px;
}


#sendCommunityTagsContainer {
  position: relative;
  width: calc(100% - 16px);

  right: 8px;
  max-width: 1400px;
  min-height: 0;
  max-height: calc(100% - 10rem);
  min-height: calc(100% - 13rem);
  display: none;
  flex-direction: column;
  border-radius: 8px;
  pointer-events: auto;
  opacity: 1;  
  transition: opacity 0.3s ease;
  padding: 48px 12px 16px 12px;
  margin: 0 auto;
  gap: 26px 0;
  overflow: hidden;
}

#communityQandABoardWrapper.widthViewMode #sendCommunityTagsContainer {
  left: auto;
  right: auto;
  transform: none;
}

#sendTagRntryContainer {
  position: relative;
}

#sendCommunityBtnContainer {
  display: flex;
  position: relative;
  width: 100%;
  height: 4.2rem;
  background-color: transparent;
  border: none;
  overflow: visible;
  flex: 1 1 0;
  gap: 4px;
}

.sendCommunityTagsLabel {
  position: relative;
  flex: 1;
  height: 2.2rem;
  min-height: 2.2rem;

  padding: 4px 8px;
  border: 1px solid #93929290;
  background: #1f1f1f;
  border-radius: 4px;
  background: #000601b5;
  color: #d1d2c3;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: auto;
  cursor: pointer;
}

/* ボタン */
.sendCommunityTagsBtn {
  position: absolute;
  top: -2.4rem;
  left: 0;

  border-radius: 50px;
  height: 2rem;

  z-index: 2;
  background-color: transparent;
  color: #252424;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 550;
}

#sendCommunityBtnFrame {
  left: calc(50% - 2px);
}

#entryTagInputPushBtn {
  position: relative;
  top: 8px;
  margin-left: auto;
  right: 0;
  width: 50%;

  padding: 4px 12px;
  border-radius: 50px;
  height: 2rem;

  z-index: 2;
  background-color: #f0f0ebd1;
  color: #252424;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 550;
  transition: background-color 0.3s ease;
  border: 1px solid #fcfcfcad;
}


/*
#sendCommunityBtnContainer.is-hidden {
  display: none;
}
#sendCommunityLabelContainer.is-hidden {
  display: none;
}
*/
.communityTagContainer {
  flex: 1;
  min-height: 8rem;

  display: flex;
  gap: 4px;
}

#communitySortTagContainer {
  position: relative;
  display: flex;
  height: 50vh;
  max-height: 0;
  overflow: hidden;
  width: calc(100% - 16px);
  max-width: 1400px;

  right: 0;
  transition:
    max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  margin-bottom: 0;
}

#communitySortTagContainer.open {
  max-height: 50vh;
  margin-bottom: 16px;
}

#communityQandABoardWrapper.widthViewMode #communitySortTagContainer.open {
  left: 50%;
  transform: translateX(-50%);
}

.communityTagWrapper {
  flex: 1;
  min-height: 0;

  display: flex;
  flex-direction: column;

  overflow: hidden;
  
}

.communityTagHeader {
  width: 100%;
  height: 2rem;
  font-size: 13px;
  font-weight: 550;
}

.communitySortTagList {
  display: flex;
  flex-direction: column;
  width: 100%;
  background-color: transparent;
  overflow-y: auto;
  max-height: calc(100% - 24px);
  
}
.communityTagList {
  display: flex;
  flex-direction: column;
  width: 100%;
  background-color: transparent;
  overflow-y: auto;
  max-height: 100%;

  flex: 1;
  min-height: 0;
  overflow-y: auto;
  font-size: 13px;
}

.communityTagBtn {
  padding: 0 8px;
  width: 100%;
  height: 2.4rem;
  min-height: 2.4rem;
  font-size: 13px;
  font-weight: 500;
  display: flex;
  align-items: center;
  border: 1px solid #808080ad;
  box-sizing: border-box;
  color: #1a1a1aef;
}

body.theme-natsu #postSearchTagsSelected,
body.theme-natsu .communityTagBtn,
body.theme-natsu #entryTagInputPushBtn {
  background-color: #074512af;
  color: #e0e0e0;
  border: 1px solid #336133af;
}
body.theme-natsu .sendCommunityTagsBtn {
  color: #e0e0e0;
}

body.theme-natsu #postSearchTagsSelected:hover,
body.theme-natsu .communityTagBtn:hover,
body.theme-natsu #entryTagInputPushBtn:hover {
  background-color: #336133;
  border: 1px solid #4a844a;
}
body.theme-natsu #postSearchTagsSelected.active,
body.theme-natsu .communityTagBtn.active,
body.theme-natsu #entryTagInputPushBtn.active {
  background-color: #336133;
  border: 1px solid #4a844a;
}
body.theme-natsu .sendCommunityTagsLabel {
  background-color: #074512af;
  color: #e0e0e0;
}
body.theme-natsu .sendCommunityTagsLabel:hover {
  background-color: #336133;
}

body.theme-natsu .dummyThreadTag,
body.theme-natsu .communityTagHeader {
  color: #e0e0e0;
}

/* ***************************************** */
body.theme-haru #postSearchTagsSelected,
body.theme-haru .communityTagBtn,
body.theme-haru #entryTagInputPushBtn {
  background-color: #bd87bd80;
  color: #333;
  border: 1px solid #d9bcd980;
}
body.theme-haru .sendCommunityTagsBtn {
  color: #333;
}

body.theme-haru #postSearchTagsSelected:hover,
body.theme-haru .communityTagBtn:hover,
body.theme-haru #entryTagInputPushBtn:hover {
  background-color: #bd87bd;
  border: 1px solid #d9bcd9;
}
body.theme-haru #postSearchTagsSelected.active,
body.theme-haru .communityTagBtn.active,
body.theme-haru #entryTagInputPushBtn.active {
  background-color: #bd87bd;
  border: 1px solid #d9bcd9;
}
body.theme-haru .sendCommunityTagsLabel {
  background-color: #bd87bd80;
  color: #333;
}
body.theme-haru .sendCommunityTagsLabel:hover {
  background-color: #bd87bd;
}

body.theme-haru .dummyThreadTag,
body.theme-haru .communityTagHeader {
  color: #333;
}

/* ***************************************** */
body.theme-aki #postSearchTagsSelected,
body.theme-aki .communityTagBtn,
body.theme-aki #entryTagInputPushBtn {
  background-color: #40060680;
  color: #e0e0e0;
  border: 1px solid #a4515180;
}
body.theme-aki .sendCommunityTagsBtn {
  color: #e0e0e0;
}

body.theme-aki #postSearchTagsSelected:hover,
body.theme-aki .communityTagBtn:hover,
body.theme-aki #entryTagInputPushBtn:hover {
  background-color: #a45151;
  border: 1px solid #bd6565;
}
body.theme-aki #postSearchTagsSelected.active,
body.theme-aki .communityTagBtn.active,
body.theme-aki #entryTagInputPushBtn.active {
  background-color: #a45151;
  border: 1px solid #bd6565;
}

body.theme-aki .sendCommunityTagsLabel {
  background-color: #40060680;
  color: #e0e0e0;
}
body.theme-aki .sendCommunityTagsLabel:hover {
  background-color: #a45151;
}

body.theme-aki .dummyThreadTag,
body.theme-aki .communityTagHeader {
  color: #e0e0e0;
}

/* ***************************************** */
body.theme-fuyu #postSearchTagsSelected,
body.theme-fuyu .communityTagBtn,
body.theme-fuyu #entryTagInputPushBtn {
  background-color: #8da8bf80;
  color: #333;
  border: 1px solid #c4dbeb80;
}
body.theme-aki .sendCommunityTagsBtn {
  color: #333;
}

body.theme-fuyu #postSearchTagsSelected:hover,
body.theme-fuyu .communityTagBtn:hover,
body.theme-fuyu #entryTagInputPushBtn:hover {
  background-color: #8da8bf;
  border: 1px solid #c4dbeb;
}
body.theme-fuyu #postSearchTagsSelected.active,
body.theme-fuyu .communityTagBtn.active,
body.theme-fuyu #entryTagInputPushBtn.active {
  background-color: #8da8bf;
  border: 1px solid #c4dbeb;
}

body.theme-fuyu .sendCommunityTagsLabel {
  background-color: #8da8bf80;
  color: #333;
}
body.theme-fuyu .sendCommunityTagsLabel:hover {
  background-color: #8da8bf;
}

body.theme-fuyu .dummyThreadTag,
body.theme-fuyu .communityTagHeader {
  color: #333;
}

#communityTagInputContainer {
  width: 50%;
}

#communityTagInput {
  display: flex;
  width: 100%;
}

#postSearchInput,
#tagEntryInput {
  width: 100%;
  font-size: 12.5px;
  line-height: 31px;          /* 行高さ（ここをUI基準に合わせてください） */
  padding: 0rem 1rem 0rem 2.2rem;          /* 必要に応じて */
  box-sizing: border-box;
  resize: none;
  overflow-x: auto;        /* 自動リサイズするのでスクロールは出さない */
  height: 31px;           /* JSで同じ値を参照するが、CSSでも保険的に設定 */
  border: 1.5px solid #808080;
  border-radius: 50px;
  color: #1a1a1a;
}

#postSearchInput::placeholder
#tagEntryInput::placeholder {
  color: rgba(0, 0, 0, 0.4);
}

#communityBoardActionWrapper {
  width: calc(100% - 16px);

  right: 8px;
  max-width: 1000px;
  display: flex;
  align-items: center;
  
  justify-content: flex-start;
  gap: 12px;

  position: relative;
  border-radius: 6px;
  min-height: 48px;
  box-sizing: border-box;
  opacity: 1;
  transition: opacity 0.3s ease;

  padding-bottom: 16px;
  margin: 0 auto;
  pointer-events: auto;
}
#communityBoardActionWrapper {
  transform: translateZ(0);
}
#communityBoardActionWrapper.disabled {
  pointer-events: none;
  opacity: 0.4;
}

#communityBoardActionWrapper.is-hidden {
  display: none;
}

/* ← こっちが flex 子 */
#postSearchInputWrapper {
  flex: 1;
  min-width: 0;
}

/* 残り幅 */
#postSearchTagsSelected {
  width: calc(50% - 6px);
  min-width: 0;

  padding: 4px 12px;
  border-radius: 50px;
  height: 2.2rem;

  z-index: 2;
  background-color: #f0f0ebd1;
  color: #252424;

  display: flex;
  align-items: center;
  justify-content: center;

  font-weight: 550;
  transition: background-color 0.3s ease;
  border: 1px solid #fcfcfcad;
}

#postSearchTagsSelected:hover {
  background-color: #f0f0eb97;
}

.communityFilterColumn {
  flex: 1;
  min-width: 0;

  background: #ffffff12;
  border: 1px solid #ffffff40;
  border-radius: 16px;

  padding: 12px 0 12px 12px;
  box-sizing: border-box;
  height: 100%;
  scrollbar-gutter: stable;
}

.communityTagSubText {
  font-size: 12px;
  opacity: 0.7;
  margin-bottom: 14px;
}

.communityToggleList {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.communityToggleRow {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 12px;

  font-size: 13px;
}

.communityFilterToggle {
  width: 18px;
  height: 18px;
}


.threadStateText {
  font-size: 14px;
  font-weight: 500;
  color: #f6d3eb;
  margin-top: 12px;
}
.threadStateUnderBar {
  height: 1px;
  width: 100%;
  background: linear-gradient(
    to right,
    #d9e2e8 0%,
    rgba(68, 68, 68, 0) 100%
  );
}

body.theme-natsu .threadStateText {
  color: #a8cde5;
}
body.theme-natsu .threadStateUnderBar {
  background: linear-gradient(to right, #b5ceb5, #031e0800);
}

body.theme-haru .threadStateText {
  color: #062e48;
}
body.theme-haru .threadStateUnderBar {
  background: linear-gradient(to right, #975b98, #d8cfd800);
}

body.theme-aki .threadStateText {
  color: #a8cde5;
}
body.theme-aki .threadStateUnderBar {
  background: linear-gradient(to right, #dab9b9, #1e030300);
}

body.theme-fuyu .threadStateText {
  color: #062e48;
}
body.theme-fuyu .threadStateUnderBar {
  background: linear-gradient(to right, #516679, #d9e2e800);
}



.postWrapper {
  position: relative;
  overflow: hidden;
}

.newPostGlow {
  position: absolute;
  top: 0;
  left: -140px;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 1;
  z-index: 1001;

  transition:
    left 1s ease,
    opacity 1s ease;
}

.newPostGlow.anime {
  left: 100%;
  opacity: 0.1;
}

body.theme-natsu .newPostGlow {
  background: linear-gradient(to right, #0a391200, #0a391250, #0a391280, #0a391200, #0a391200 140px, #0a391200 100%);
}
body.theme-haru .newPostGlow {
  background: linear-gradient(to right, #975b9800, #975b9850, #975b9880, #975b9800, #975b9800 140px, #975b9800 100%);
}
body.theme-aki .newPostGlow {
  background: linear-gradient(to right, #50171700, #50171750, #50171780, #50171700, #50171700 140px, #50171700 100%);
}
body.theme-fuyu .newPostGlow {
  background: linear-gradient(to right, #51667900, #51667950, #51667980, #51667900, #51667900 140px, #51667900 100%);
}

.newPostGlowVertical {
  position: absolute;
  left: 0;
  top: -140px;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 1;
  z-index: 1000;

  transition:
    top 1s ease,
    opacity 1s ease;
}

.newPostGlowVertical.anime {
  top: 100%;
  opacity: 0.1;
}

body.theme-natsu .newPostGlowVertical {
  background: linear-gradient(
    to bottom,
    #0a391200,
    #0a391250,
    #0a391280,
    #0a391200,
    #0a391200 140px,
    #0a391200 100%
  );
}

body.theme-haru .newPostGlowVertical {
  background: linear-gradient(
    to bottom,
    #975b9800,
    #975b9850,
    #975b9880,
    #975b9800,
    #975b9800 140px,
    #975b9800 100%
  );
}

body.theme-aki .newPostGlowVertical {
  background: linear-gradient(
    to bottom,
    #50171700,
    #50171750,
    #50171780,
    #50171700,
    #50171700 140px,
    #50171700 100%
  );
}

body.theme-fuyu .newPostGlowVertical {
  background: linear-gradient(
    to bottom,
    #51667900,
    #51667950,
    #51667980,
    #51667900,
    #51667900 140px,
    #51667900 100%
  );
}

.planCompare {
  margin: 16px 0;
  border: 1px solid var(--border-color, #ddd);
  border-radius: 10px;
  overflow: hidden;
  font-size: 0.9rem;
}

.planCompareHeader,
.planCompareRow {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  align-items: center;
}

.planCompareHeader {
  font-weight: 600;
  background: var(--sub-bg-color, #f5f5f5);
}

.planCompareHeader > div,
.planCompareRow > span {
  padding: 10px 12px;
  text-align: center;
}

.planCompareHeader > div:first-child,
.planCompareRow > span:first-child {
  text-align: left;
}

.planCompareRow {
  border-top: 1px solid var(--border-color, #ddd);
}

.planCompareRow:nth-child(even) {
  background: rgba(255, 255, 255, 0.03);
}

/* Studio列を少し強調 */
.planCompareHeader > div:last-child,
.planCompareRow > span:last-child {
  font-weight: 600;
}

/* モバイル対応 */
@media (max-width: 480px) {
  .planCompare {
    font-size: 0.8rem;
  }

  .planCompareHeader > div,
  .planCompareRow > span {
    padding: 8px;
  }
}


#reportBoxBtn {
  position: absolute;
  bottom: 4rem;
  right: 4rem;
  font-size: 14px;
  pointer-events: auto;
  cursor: pointer;
  display: none;
}

#editorTabInfo.show-arrow::after {
  content: " ◀";
}


/*
body.theme-natsu .chatMessageActions button {
  background: linear-gradient(to right, #336133, #336133 40%, #07451200 100%);
  color: #e0e0e0;
}

body.theme-haru .chatMessageActions button {
  background: linear-gradient(to right, #bd87bd, #bd87bd 40%, #d9bcd900 100%);
  color: #1e1d1d;
}

body.theme-aki .chatMessageActions button {
  background: linear-gradient(to right, #a45151, #a45151 40%, #40060600 100%);
  color: #e0e0e0;
}

body.theme-fuyu .chatMessageActions button {
  background: linear-gradient(to right, #8da8bf, #8da8bf 40%, #c4dbeb00 100%);
  color: #1e1d1d;
}


body.theme-natsu .chatMessageActions button:hover {
  background: linear-gradient(to right, #336133aa, #336133 40%, #07451200 100%);
}

body.theme-haru .chatMessageActions button:hover {
  background: linear-gradient(to right, #bd87bdaa, #bd87bd 40%, #d9bcd900 100%);
}

body.theme-aki .chatMessageActions button:hover {
  background: linear-gradient(to right, #a45151aa, #a45151 40%, #40060600 100%);
}

body.theme-fuyu .chatMessageActions button:hover {
  background: linear-gradient(to right, #8da8bfaa, #8da8bf 40%, #c4dbeb00 100%);
}
*/