@charset "utf-8";

/*TOPページ
---------------------------------------------------------------------------*/
.secTopBase{
  padding: 40px 0;
}
.secTopBase h3{
  font-size: 1.8rem;
  font-weight: 700;
  margin: 30px 0 15px;
}
.secTopBase p{
  margin: 15px 0;
}
.secTopBase ul li{
  text-indent: -1em;
  padding-left: 1em;
}
/* 目次
----------------------------------------*/
.topToc {
  margin:0 auto 30px;
  border: 2px solid #2589d0;
  border-radius: 3px;
  width: 50%;
}
.topToc div {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0;
  padding: 10px 0;
  background-color: #2589d0;
  color: #fff;
  font-weight: 600;
  font-size: 1.1em;
  cursor: pointer;
  user-select: none;
}
.topToc div::before {
  display: inline-block;
  width: 1em;
  height: 1em;
  margin-right: 5px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M8 4H21V6H8V4ZM3 3.5H6V6.5H3V3.5ZM3 10.5H6V13.5H3V10.5ZM3 17.5H6V20.5H3V17.5ZM8 11H21V13H8V11ZM8 18H21V20H8V18Z' fill='%23fff'%3E%3C/path%3E%3C/svg%3E");
  content: '';
}
.topToc ol {
  list-style-type: decimal;
  margin: 0;
  overflow: hidden;
}
.topToc > ol {
  height: auto;
  padding: 1em 1em 1em 3em;
  display: none;
}
.topToc ol ol {
  margin-top: 5px;
  padding-left: 1.1em;
}
.topToc li {
  padding: 5px 0;
  font-weight: 600;
}
.topToc ol ol li {
  font-weight: 500;
  font-size: .9em;
}
.topToc a {
  color: #333;
  text-decoration: none;
}
/*secTopAct
----------------------------------------*/
.sta_btnWrap{
  display: flex;
  justify-content: center;
}
.sta_btnWrap a{
  margin: 0 10px;
  text-align: center;
  width: 20%;
}
/*ログインページ
---------------------------------------------------------------------------*/
.auth-container {
  max-width: 500px;
  margin: auto;
  text-align: center;
}

.auth-container h1 {
  color: #3a6ea5;
  margin-bottom: 30px;
  font-size: 2.5rem;
  font-weight: 700;
}
.auth-form {
  text-align: left;
}
.auth-box {
  background-color: #FFF;
  padding: 30px;
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
.auth-box table{
  width: 100%;
}
.auth-box table th,
.auth-box table td{
  padding: 5px;
  vertical-align: top;
}
.auth-box table th{
  text-align: right;
  width: 150px;
}
.auth-box table th:after{
  content: " :";
}
.auth-box table td{
  text-align: left;
  word-break: break-all;
}
.auth_note1{
  text-align: center;
}
.auth_note2{
  background-color: #FFF;
  padding: 10px;
  text-align: center;
}

.form-group {
  margin-top: 25px;
}

.form-group label {
  display: block;
  margin-bottom: 5px;
  font-weight: bold;
  color: #4a5568;
  font-size: 1.5rem;
}

.auth-links {
  margin-top: 25px;
  display: inline-flex;
  flex-direction: column;
  gap: 10px;
}

.auth-links a {
  color: #3a6ea5;
  text-decoration: none;
}

.auth-links a:hover {
  text-decoration: underline;
}

/*マイページ
---------------------------------------------------------------------------*/
.mypageInr{
  background-color: white;
  padding: 30px;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  margin-bottom: 30px;
}
.user-info {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
.user-info > *:not(:first-child){
  margin-left: 2rem;
}
.user-info span{
  font-weight: 700;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
.mypage_menu{
  display: flex;
  justify-content: center;
  margin-top: 20px;
}
.mypage_menu_box{
  border-radius: 8px;
  border: 1px solid #ccc;
  padding: 14px;
  margin: 10px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  width: 128px;
  height: 128px;
}
.mypage_menu_box:hover{
  background-color: #f5f5f5;
}
.mypage_menu_box span{
  color: #333;
  font-size: 1.2rem;
  font-weight: 700;
}
.mypage_menu_box.icon-edit{
  background: url(../images/common/icon/edit.svg) no-repeat 50% 40% / 3rem auto;
}
.mypage_menu_box.icon-chalkboard{
  background: url(../images/common/icon/chalkboard.svg) no-repeat 50% 40% / 3rem auto;
}
.mypage_menu_box.icon-edit:hover,
.mypage_menu_box.icon-chalkboard:hover{
  background-color: #f5f5f5;
}
.app-description h2 {
  color: #2d3748;
  margin-bottom: 15px;
}
/* マイページのスレッド一覧テーブル
----------------------------------------*/
.threads-tableWrap {
  overflow: auto;
  margin-top: 15px;
}
.threads-table {
  width: 920px;
  border-collapse: collapse;
  margin-bottom: 15px;
  table-layout: fixed;
}
.threads-table th,
.threads-table td {
  padding: 12px 15px;
  text-align: left;
  border-bottom: 1px solid #e0e0e0;
}
.threads-table th {
  background-color: #f8f9fa;
  font-weight: bold;
  color: #333;
  font-size: 1.4rem;
}
.threads-table td {
  font-size: 1.5rem;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

.threads-table tr:hover {
  background-color: #f5f5f5;
}

.threads-table a {
  text-decoration: none;
}

.threads-table a:hover {
  text-decoration: underline;
}

.no-data-message {
  padding: 20px;
  text-align: center;
  color: #777;
  font-style: italic;
}

.more-link {
  text-align: right;
  margin-top: 10px;
}

.more-link a {
  color: #3498db;
  text-decoration: none;
  font-size: 0.9em;
}

.more-link a:hover {
  text-decoration: underline;
}
/*スレッド一覧
---------------------------------------------------------------------------*/
.thread-actionInr{
  text-align: center;
}
.thread-list {
  margin: 50px 0 0;
}

.thread-item {
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 5px;
  padding: 15px;
  margin-bottom: 15px;
}

.thread-item h3 {
  margin: 0 0 10px 0;
}

.thread-item h3 a {
  text-decoration: none;
  font-weight: 700;
}
.thread-info{
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  margin-top: 20px;
}
.thread-info p:not(.thread-closed){
  color: #666;
  font-size: 1.4rem;
  margin-bottom: 5px;
}
.thread-info p:not(:first-child){
  margin-left: 1rem;
}
.thread-info_name {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  max-width: 300px;
}
.thread-info_num{
  max-width: 100px;
}
.thread-controls{
  margin-top: 10px;
}
/* スレッド検索フォーム
----------------------------------------*/
.thread-search {
  margin: 20px 0;
}

.search-form {
  display: flex;
  gap: 10px;
  max-width: 600px;
  margin: 0 auto;
}

.search-form input[type="text"] {
  flex: 1;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
  font-size: 16px;
}

.search-btn {
  padding: 10px 20px;
  background-color: #3a6ea5;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 16px;
  transition: background-color 0.3s;
}


/* タブのスタイル
----------------------------------------*/
.tabs {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
  border-bottom: 1px solid #ddd;
}
.tab-btn {
  padding: 10px 20px;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  font-size: 1.6rem;
  color: #666;
  transition: all 0.3s;
}
.tab-btn:hover {
  color: #333;
}
.tab-btn.active {
  color: #3a6ea5;
  border-bottom-color: #3a6ea5;
  font-weight: bold;
}
.tab-content {
  display: none;
}
.tab-content.active {
  display: block;
}
/*スレッド内容
---------------------------------------------------------------------------*/
.thread-contentInr {
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 5px;
  padding: 20px;
}
.thread-ttl{
  font-size: 1.8rem;
}
.thread-body {
  margin-top: 15px;
  line-height: 1.6;
}
.thread-admin-actions{
  margin-left: auto;
}
.comment-action{
  text-align: center;
  margin: 30px 0;
}
/* コメントフォーム
----------------------------------------*/
.comment-form {
  margin: 20px 0;
}

.comment-form__flex {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

/* コメント一覧
----------------------------------------*/
.comment-list {
  margin: 20px 0;
}

.comment-item {
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 5px;
  padding: 15px;
  margin-bottom: 15px;
}

.comment-info{
  color: #666;
  font-size: 1.4rem;
  margin: 5px 0;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
}
.comment-info p:not(.comment-closed){
  color: #666;
  font-size: 1.4rem;
  margin-bottom: 5px;
}
.comment-info p:not(:first-child){
  margin-left: 1rem;
}
.comment-info_name {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  max-width: 300px;
}
.comment-info_num{
  max-width: 100px;
}
.comment-body {
  line-height: 1.6;
  margin: 10px 0;
}


.comment-info .comment-id {
  font-weight: bold;
  color: #333;
}

/* レスアンカーのスタイル
----------------------------------------*/
.reply-anchor, .reply-link {
  color: #3498db;
  text-decoration: none;
  padding: 2px 5px;
  border-radius: 3px;
  background-color: #ecf0f1;
  transition: all 0.2s ease;
  cursor: pointer;
}

.reply-anchor:hover, .reply-link:hover {
  background-color: #3498db;
  color: #fff;
  text-decoration: none;
}

/* 返信ボタンのスタイル
----------------------------------------*/
.reply-btn {
  background-color: #4CAF50;
  color: white;
  border: none;
  padding: 5px 10px;
  border-radius: 3px;
  cursor: pointer;
  font-size: 0.9em;
}

.reply-btn:hover {
  background-color: #45a049;
}

.reply-btn:disabled {
  background-color: #cccccc;
  cursor: not-allowed;
}

/* フォームボタンのスタイル
----------------------------------------*/
.form-buttons {
  display: flex;
  gap: 10px;
  margin-top: 20px;
}

.comment-actions {
  display: flex;
  gap: 10px;
  margin-top: 20px;
}

.block-btn,
.unblock-btn {
  padding: 5px;
  border-radius: 4px;
  cursor: pointer;
}

.block-btn {
  background-color: #e53e3e;
  color: white;
  border: none;
}

.unblock-btn {
  background-color: #718096;
  color: white;
  border: none;
}

.block-btn .icon-ban,
.unblock-btn .icon-ban{
  width: 20px;
}

.block-form,
.unblock-form {
  display: inline-block;
}

/* イイネボタンのスタイル
----------------------------------------*/
.like-container {
  display: inline-flex;
  align-items: center;
  margin-right: 15px;
}

.like-btn {
  background-color: #f8f8f8;
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 5px 10px;
  cursor: pointer;
  font-size: 14px;
  display: flex;
  align-items: center;
  transition: all 0.2s ease;
}

.like-btn:hover {
  background-color: #f0f0f0;
}

.like-btn.liked {
  background-color: #ffebee;
  border-color: #ffcdd2;
  color: #e53935;
}

.like-icon {
  margin-right: 5px;
  font-size: 16px;
  transition: transform 0.2s ease;
}

.like-btn.liked .like-icon {
  color: #e53935;
  transform: scale(1.2);
}

.like-count {
  margin-left: 8px;
  font-size: 14px;
  font-weight: bold;
  color: #757575;
}

.like-btn.liked + .like-count {
  color: #e53935;
}

/* スレッド管理機能のスタイル
----------------------------------------*/
.thread-status-form {
  display: inline-block;
}

.btn-close-thread,
.btn-open-thread {
  padding: 8px 15px;
  border: none;
  border-radius: 4px;
  font-size: 1.4rem;
  cursor: pointer;
  transition: all 0.3s ease;
}

.btn-close-thread {
  background-color: #f44336;
  color: white;
}

.btn-open-thread {
  background-color: #4CAF50;
  color: white;
}

.btn-close-thread:hover {
  background-color: #d32f2f;
}

.btn-open-thread:hover {
  background-color: #388e3c;
}

.thread-closed {
  color: #f44336;
  font-weight: 700;
  padding: 5px 10px;
  background-color: rgba(244, 67, 54, 0.1);
  border-radius: 4px;
  display: inline-block;
}

/* コメント返信表示のスタイル
----------------------------------------*/
.comment-replies {
  margin-top: 15px;
  padding: 10px 15px;
  background-color: #f5f8fa;
  border-left: 3px solid #3498db;
  border-radius: 0 4px 4px 0;
}

.comment-replies h4 {
  color: #2c3e50;
  font-size: 14px;
  margin-bottom: 8px;
}

.reply-list {
  list-style: none;
  padding-left: 0;
}

.reply-item {
  padding: 5px 0;
  border-bottom: 1px dotted #e0e0e0;
}

.reply-item:last-child {
  border-bottom: none;
}

.reply-info {
  font-size: 13px;
  color: #555;
  display: flex;
  align-items: center;
}

.reply-user {
  font-weight: bold;
  color: #2c3e50;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  max-width: 300px;
}

/* コメントのページネーション情報
----------------------------------------*/
.comment-pagination-info {
  margin: 10px 0;
  color: #666;
  font-size: 0.9em;
  background-color: #f8f9fa;
  padding: 8px;
  border-radius: 4px;
}

.comment-pagination-info p {
  margin: 0;
  justify-content: center;
}

/* ソート順切り替え
----------------------------------------*/
.comment-sorting-info {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}

.sort-controls {
  display: flex;
  align-items: center;
  background-color: #f8f9fa;
  padding: 8px 12px;
  border-radius: 4px;
  margin: 5px 0;
}

.sort-label {
  margin-right: 10px;
  color: #666;
  font-size: 0.9em;
}

.sort-btn {
  display: inline-block;
  padding: 5px 10px;
  margin: 0 3px;
  border: 1px solid #ddd;
  border-radius: 4px;
  background-color: #fff;
  color: #333;
  text-decoration: none;
  font-size: 0.9em;
  transition: all 0.2s ease;
}

.sort-btn:hover {
  background-color: #e9e9e9;
}

.sort-btn.active {
  background-color: #007bff;
  color: white;
  border-color: #007bff;
}

/* ページ移動後のアンカーリンクハイライト
----------------------------------------*/
:target {
  animation: highlight 3.5s ease-in-out;
  scroll-margin-top: 60px; /* ヘッダーの高さを考慮してスクロール位置を調整 */
}

@keyframes highlight {
  0%, 20% {
    background-color: #fff9c4;
    box-shadow: 0 0 10px #ffd600;
  }
  100% {
    background-color: transparent;
    box-shadow: none;
  }
}
/* ページネーションの上下マージン調整
----------------------------------------*/
.comment-list .pagination {
  margin: 20px 0;
}


/*プロフィール編集
---------------------------------------------------------------------------*/
.profile-form {
  background-color: white;
  padding: 30px;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  margin-bottom: 20px;
  max-width: 600px;
  margin: 0 auto;
}

.profile-form .form-group {
  margin-bottom: 20px;
}

.profile-form .form-group label {
  display: block;
  margin-bottom: 8px;
  font-weight: bold;
}

.profile-form .form-group input {
  width: 100%;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 4px;
}

.profile-form .btn {
  display: inline-block;
  padding: 10px 15px;
  background-color: #f1f1f1;
  color: #333;
  text-decoration: none;
  border-radius: 4px;
  border: none;
  cursor: pointer;
}

.profile-form .btn-primary {
  background-color: #3a6ea5;
  color: #fff;
}
/*スレッド削除
---------------------------------------------------------------------------*/
.delete_content h5{
  font-weight: 700;
  margin:20px 0 15px;
  text-align: left;
}
.delete_content p {
  text-align: left;
}