@charset "UTF-8";

/*//////////////////////////////////////////////////////////

スタッフページ用CSS
------------------------------------------------------------

//////////////////////////////////////////////////////////*/

/* ====================================
   共通スタイル
==================================== */
/* パスワード保護フォーム */
.staff_password_form {
  max-width: 500px;
  margin: 60px auto;
  padding: 40px;
  background-color: #f7f7f7;
  border-radius: 8px;
  text-align: center;
}

@media screen and (max-width: 767px) {
  .staff_password_form {
    margin: 40px auto;
    padding: 30px 20px;
  }
}

.staff_password_form form {
  margin-top: 20px;
}

.staff_password_form p {
  font-size: 1em;
  line-height: 1.8;
  color: #3e3a39;
  margin-bottom: 20px;
}

.staff_password_form label {
  display: block;
  font-size: 0.9375em;
  font-weight: 500;
  color: #3e3a39;
  margin-bottom: 10px;
  text-align: left;
}

.staff_password_form input[type="password"] {
  width: 100%;
  padding: 12px 15px;
  font-size: 1em;
  border: 1px solid #e0e0e0;
  border-radius: 5px;
  margin-bottom: 15px;
  box-sizing: border-box;
}

.staff_password_form input[type="password"]:focus {
  outline: none;
  border-color: #08214e;
}

.staff_password_form input[type="submit"] {
  width: 100%;
  padding: 12px 20px;
  font-size: 1em;
  font-weight: 500;
  color: #fff;
  background-color: #08214e;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.staff_password_form input[type="submit"]:hover {
  background-color: #0a2d6b;
}

/* leadテキストのスタイル調整 */
.staff_lead {
  font-size: 1.125em;
  line-height: 1.8;
  text-align: center;
  letter-spacing: 0.1em;
  font-weight: 400;
  margin-bottom: 60px;
  color: #3e3a39;
}

@media screen and (max-width: 767px) {
  .staff_lead {
    font-size: 1em;
    line-height: 1.7;
    margin-bottom: 40px;
  }
}

/* ====================================
   スタッフ一覧ページ
==================================== */
/* メインコンテンツエリア */
.staff_main {
  width: 100%;
  max-width: 100%;
}

/* 投稿がない場合のメッセージ */
.staff_empty {
  text-align: center;
  font-size: 1em;
  color: #666;
  padding: 60px 20px;
}

@media screen and (max-width: 767px) {
  .staff_empty {
    padding: 40px 20px;
    font-size: 0.9375em;
  }
}

.list_staff {
  display: flex;
  flex-wrap: wrap;
  gap: 60px 40px;
  margin-bottom: 80px;
}

@media screen and (max-width: 767px) {
  .list_staff {
    gap: 40px 20px;
    margin-bottom: 60px;
  }
}

.list_staff:last-child {
  margin-bottom: 0;
}

.list_staff li {
  width: calc(33.333% - 27px);
}

@media screen and (max-width: 767px) {
  .list_staff li {
    width: calc(50% - 10px);
  }
}

.list_staff li a {
  display: block;
  height: 100%;
}

.list_staff li a:hover .staff_image::after {
  transform: scale(1, 1);
  transform-origin: top left;
}

.list_staff li a:hover .staff_image img {
  transform: scale(1.05);
}

/* スタッフ画像（縦画像） */
.list_staff li a .staff_image {
  position: relative;
  overflow: hidden;
  aspect-ratio: 3/4;
  margin-bottom: 20px;
}

@media screen and (max-width: 767px) {
  .list_staff li a .staff_image {
    margin-bottom: 15px;
  }
}

.list_staff li a .staff_image::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: rgba(8, 33, 78, 0.35);
  top: 0;
  left: 0;
  transform: scale(0, 1);
  transition: transform 0.3s;
  transform-origin: top right;
}

.list_staff li a .staff_image img {
  object-fit: cover;
  width: 100%;
  height: 100%;
  transition: 0.3s;
}

/* スタッフコンテンツ */
.list_staff li a .staff_content {
  padding: 0 5px;
}

/* スタッフ名 */
.list_staff li a .staff_content .staff_name {
  font-size: 1.125em;
  font-weight: 500;
  line-height: 1.6;
  margin-bottom: 10px;
  color: #3e3a39;
}

@media screen and (max-width: 767px) {
  .list_staff li a .staff_content .staff_name {
    font-size: 1em;
    margin-bottom: 8px;
  }
}

/* メッセージ */
.list_staff li a .staff_content .staff_message {
  font-size: 0.875em;
  line-height: 1.7;
  color: #666;
}

@media screen and (max-width: 767px) {
  .list_staff li a .staff_content .staff_message {
    font-size: 0.8125em;
    line-height: 1.6;
  }
}

/* ====================================
   スタッフ詳細ページ
==================================== */
/* セクション */
.staff_section {
  margin-bottom: 60px;
}

@media screen and (max-width: 767px) {
  .staff_section {
    margin-bottom: 40px;
  }
}

.staff_section:last-child {
  margin-bottom: 0;
}

/* スタッフ名 */
.staff_name {
  font-size: 2em;
  font-weight: 500;
  line-height: 1.5;
  margin-bottom: 40px;
  padding-bottom: 20px;
  border-bottom: 1px solid #3e3a39;
}

@media screen and (max-width: 767px) {
  .staff_name {
    font-size: 1.5em;
    margin-bottom: 30px;
    padding-bottom: 15px;
  }
}

/* スタッフプロフィール */
.staff_profile {
  display: flex;
  gap: 60px;
  margin-bottom: 60px;
}

@media screen and (max-width: 767px) {
  .staff_profile {
    flex-direction: column;
    gap: 30px;
    margin-bottom: 40px;
  }
}

/* スタッフ画像（詳細ページ） */
.staff_profile .staff_image {
  width: 35%;
  flex-shrink: 0;
}

@media screen and (max-width: 767px) {
  .staff_profile .staff_image {
    width: 100%;
  }
}

.staff_profile .staff_image img {
  width: 100%;
  height: auto;
  object-fit: cover;
  aspect-ratio: 3/4;
}

/* スタッフ情報 */
.staff_profile .staff_info {
  flex: 1;
}

/* メッセージセクション */
/* メッセージタイトル（見出しスタイル） */
.staff_message_title {
  font-size: 1.5em;
  font-weight: 500;
  line-height: 1.6;
  color: #08214e;
  margin-bottom: 30px;
}

@media screen and (max-width: 767px) {
  .staff_message_title {
    font-size: 1.25em;
    line-height: 1.5;
    margin-bottom: 20px;
  }
}

/* メッセージ詳細（本文スタイル） */
.staff_message_detail {
  margin-bottom: 40px;
}

@media screen and (max-width: 767px) {
  .staff_message_detail {
    margin-bottom: 30px;
  }
}

.staff_message_detail:last-child {
  margin-bottom: 0;
}

/* 追加情報項目 */
.info_item {
  margin-bottom: 40px;
}

@media screen and (max-width: 767px) {
  .info_item {
    margin-bottom: 30px;
  }
}

.info_item:last-child {
  margin-bottom: 0;
}

/* 見出しスタイル */
.staff_title {
  font-size: 1.25em;
  font-weight: 500;
  margin-bottom: 15px;
  color: #3e3a39;
  padding-left: 15px;
  border-left: 4px solid #08214e;
}

@media screen and (max-width: 767px) {
  .staff_title {
    font-size: 1.125em;
    margin-bottom: 12px;
    padding-left: 12px;
    border-left: 3px solid #08214e;
  }
}

/* メッセージ詳細と追加情報の本文スタイル */
.staff_message_detail,
.info_item .info_content {
  font-size: 1.1em;
  line-height: 1.8;
  color: #3e3a39;
}

@media screen and (max-width: 767px) {
  .staff_message_detail,
  .info_item .info_content {
    font-size: 0.9375em;
    line-height: 1.7;
  }
}

.staff_message_detail p,
.info_item .info_content p {
  margin-bottom: 1em;
}

.staff_message_detail p:last-child,
.info_item .info_content p:last-child {
  margin-bottom: 0;
}

/* 追加情報セクション */
.staff_additional_info {
  margin-top: 40px;
}

@media screen and (max-width: 767px) {
  .staff_additional_info {
    margin-top: 30px;
  }
}

/* 投稿コンテンツエリア */
.staff_content_area {
  margin-top: 60px;
  padding-top: 60px;
  border-top: 1px solid #e0e0e0;
}

@media screen and (max-width: 767px) {
  .staff_content_area {
    margin-top: 40px;
    padding-top: 40px;
  }
}

/* カテゴリー表示 */
.staff_category {
  display: inline-block;
  font-size: 0.875em;
  color: #08214e;
  background-color: #f0f5ff;
  padding: 5px 15px;
  margin-bottom: 15px;
  border-radius: 3px;
}

@media screen and (max-width: 767px) {
  .staff_category {
    font-size: 0.8125em;
    padding: 4px 12px;
    margin-bottom: 12px;
  }
}

/* ====================================
   ページネーション
==================================== */
.staff_pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0;
  margin-top: 60px;
  padding-top: 60px;
  border-top: 1px solid #e0e0e0;
}

@media screen and (max-width: 767px) {
  .staff_pagination {
    margin-top: 40px;
    padding-top: 40px;
  }
}

.staff_pagination_prev,
.staff_pagination_list,
.staff_pagination_next {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px 30px;
  font-size: 0.9375em;
  text-decoration: none;
  transition: background-color 0.3s, color 0.3s;
  background-color: #fff;
  color: #3e3a39;
  border: 1px solid #e0e0e0;
}

@media screen and (max-width: 767px) {
  .staff_pagination_prev,
  .staff_pagination_list,
  .staff_pagination_next {
    padding: 10px 20px;
    font-size: 0.875em;
  }
}

/* 前へ */
.staff_pagination_prev {
  border-right: none;
  border-radius: 5px 0 0 5px;
}

/* 一覧へ戻る */
.staff_pagination_list {
  border-right: none;
  min-width: 160px;
}

@media screen and (max-width: 767px) {
  .staff_pagination_list {
    min-width: 120px;
  }
}

/* 次へ */
.staff_pagination_next {
  border-radius: 0 5px 5px 0;
}

/* ホバー */
.staff_pagination_prev:hover,
.staff_pagination_list:hover,
.staff_pagination_next:hover {
  background-color: #f7f7f7;
  color: #08214e;
}

/* 無効状態 */
.staff_pagination_prev.disabled,
.staff_pagination_next.disabled {
  color: #ccc;
  cursor: not-allowed;
  pointer-events: none;
}

/* 関連スタッフセクション */
.staff_related {
  margin-top: 80px;
  padding-top: 60px;
}

@media screen and (max-width: 767px) {
  .staff_related {
    margin-top: 60px;
    padding-top: 40px;
  }
}

.staff_related .staff_title {
  text-align: center;
  border-left: none;
  padding-left: 0;
  margin-bottom: 40px;
  font-size: 1.5em;
}

@media screen and (max-width: 767px) {
  .staff_related .staff_title {
    font-size: 1.25em;
    margin-bottom: 30px;
  }
}