/* ==========================================
   名前プロファイル & 見出し基本スタイル
   ========================================== */
.profile-name {
  font-size: 1.15rem;
  font-weight: bold;
  color: #fff;                             /* 白文字に戻す */
  border-bottom: 2px solid rgba(255, 255, 255, 0.6); /* 薄い白の下線 */
  padding-bottom: 6px;
  display: inline-block;
  letter-spacing: 0.05em;
}

.profile-title {
  font-size: 1.8rem !important;
  font-weight: bold;
  line-height: 1.5;
  color: #fff !important;                  /* 白文字に戻す */
  margin-bottom: 15px;
}

/* ==========================================
   スタッフコメントブロック（半透明囲み装飾）
   ========================================== */
#ditail .houto .profile-block {
  background-color: rgba(255, 255, 255, 0.12); /* 青背景になじむ半透明の白 */
  border-radius: 12px;
  padding: 30px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);    /* 控えめな影 */
  margin-bottom: 50px;
  border: 1px solid rgba(255, 255, 255, 0.25); /* 境界を示すうっすらとした白枠 */
  backdrop-filter: blur(4px);                  /* 背景をほんのりぼかす効果（対応ブラウザのみ） */
}

#ditail .houto .profile-block .txtbox {
  color: #fff;                                 /* テキスト色を白に戻す */
}

/* ==========================================
   PC表示時（769px以上）
   ========================================== */
@media screen and (min-width: 769px) {
  #ditail .houto .profile-inner {
    align-items: flex-start;
    width: 100%;
  }

  /* テキストエリアの幅制限を解除して残りの幅いっぱいに広げる */
  #ditail .houto .profile-inner .txtbox {
    flex: 1;
    width: auto;
    max-width: none;
  }

  /* 画像の幅指定 */
  #ditail .houto .profile-figure {
    width: 260px;
    height: auto;
    flex-shrink: 0;
    margin-right: 30px;
    margin-left: 0;
  }

  /* レスポンシブ 6:4 レイアウト設定 */
  #ditail .houto .layout-6to4 {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 30px;
  }

  #ditail .houto .layout-6to4 .layout-left {
    width: calc(60% - 15px) !important;
    max-width: 60%;
    margin-right: 0 !important;
  }

  #ditail .houto .layout-6to4 .layout-right {
    width: calc(40% - 15px) !important;
    max-width: 40%;
  }
}

/* ==========================================
   スマホ表示時（768px以下）
   ========================================== */
@media screen and (max-width: 768px) {
  /* コメントブロックの余白調整 */
  #ditail .houto .profile-block {
    padding: 20px;
    margin-bottom: 35px;
    display: flex;
    flex-direction: column;
  }

  /* 見出しの文字サイズ調整 */
  .profile-title {
    font-size: 1.2rem !important;
    line-height: 1.4;
    margin-bottom: 20px;
  }

  /* 順序制御（1: 見出し ➔ 2: 画像・本文エリア） */
  #ditail .houto .profile-block > .txtbox {
    order: 1;
  }

  #ditail .houto .profile-block .profile-inner {
    order: 2;
    display: flex;
    flex-direction: column;
  }

  #ditail .houto .profile-figure {
    order: 1;
    width: 100%;
    max-width: 240px;
    margin: 0 auto 15px auto;
  }

  #ditail .houto .profile-inner .txtbox {
    order: 2;
    text-align: center;
  }

  #ditail .houto .profile-inner .txtbox .text {
    text-align: left;
  }

  /* レスポンシブ 6:4 レイアウト（スマホ） */
  #ditail .houto .layout-6to4 {
    display: flex;
    flex-direction: column;
  }

  #ditail .houto .layout-6to4 .layout-left,
  #ditail .houto .layout-6to4 .layout-right {
    width: 100% !important;
    max-width: 100%;
    margin-right: 0 !important;
  }

  #ditail .houto .layout-6to4 .layout-left {
    margin-bottom: 20px;
  }

  #ditail .houto .layout-6to4 .layout-right {
    margin-top: 0;
  }

  /* ポインター・注記設定 */
  .pic .popup {
    cursor: default;
  }

  .caption_click {
    display: none;
  }
}