@charset "utf-8";

/* ==================================================
   ##01: 黄色の帯タイトル (#F4B942)
================================================== */
.page-head {
  margin-top: 100px;
  padding: 50px 0;
  background-color: #F4B942;
  /* 黄色の帯 */
  text-align: center;
}

.page-head .ttl {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 15px;
  color: #fff;
  font-weight: 700;
  margin: 0;
}

.page-head .ttl .en {
  font-size: 2.8rem;
  letter-spacing: 0.08em;
}

.page-head .ttl .jp {
  font-size: 2.2rem;
  letter-spacing: 0.05em;
}

/* 縦に並べる（改行）ための設定 */
.page-head .ttl {
  display: flex !important;
  flex-direction: column !important;
  /* ここで縦並び（改行）に強制変更 */
  align-items: flex-start !important;
  /* 左寄せ */
  justify-content: center !important;
  gap: 8px !important;
  /* 上下の文字の隙間 */
  margin: 0 !important;
}

/* ABOUT：サイズ28px、色：#FFFFFF、不透明度：40% */
.page-head .ttl .en {
  font-size: 28px !important;
  color: #ffffff !important;
  opacity: 0.4 !important;
  /* 不透明度40% */
  font-weight: 700 !important;
  letter-spacing: 0.08em !important;
  line-height: 1 !important;
}

/* 私たちについて：サイズ42px、色：#FFFFFF */
.page-head .ttl .jp {
  font-size: 42px !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  letter-spacing: 0.05em !important;
  line-height: 1.2 !important;
}

/* スマホ用サイズ調整 (767px以下) */
@media (max-width: 767px) {
  .page-head {
    margin-top: 70px !important;
    padding: 30px 0 !important;
  }

  .page-head .ttl .en {
    font-size: 18px !important;
  }

  .page-head .ttl .jp {
    font-size: 28px !important;
  }
}

/* ==================================================
   ABOUT：トップメッセージ画像のサイズ＆比率統一（巨大化防止）
================================================== */
/* 枠自体の大きさを制限 */
body.page-about .message-top-grid .message-right {
  width: 100% !important;
  max-width: 380px !important;
  /* 横幅の最大値 */
  flex-shrink: 0 !important;
}

/* 画像が入るボックスを「正方形」に固定 */
body.page-about .message-top-grid .message-right .img-box {
  width: 100% !important;
  aspect-ratio: 4 / 3 !important;
  /* 1:1（正方形）に固定 */
  border-radius: 16px !important;
  overflow: hidden !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06) !important;
}

/* 縦長画像でも枠内に綺麗に収まるようトリミング */
body.page-about .message-top-grid .message-right .img-box img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  /* 写真が歪まず綺麗にはまります */
  display: block !important;
}

/* ==================================================
   ABOUT：トップメッセージの全体幅と配置調整（BUSINESSと統一）
================================================== */
/* コンテナ全体の幅をBUSINESSページ(1100px)と揃えて中央に配置 */
body.page-about .sec-about-message .inner {
  max-width: 1000px !important;
  margin: 0 auto !important;
  padding: 0 20px !important;
}

/* テキストと画像の配置バランス（隙間）を調整 */
body.page-about .sec-about-message .message-top-grid {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 60px !important;
}


/* ==================================================
   ##02 & ##03: メッセージセクション（2カラム・SVG・指定画像）
================================================== */
.sec-about-message {
  padding: 80px 0;
}

/* 2カラムレイアウト（強制的にFlexと左寄せを適用） */
.message-top-grid {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 50px !important;
  margin-bottom: 60px !important;
  text-align: left !important;
}

.message-top-grid .message-left {
  flex: 1 !important;
  text-align: left !important;
}

.message-top-grid .message-right {
  width: 480px !important;
  max-width: 45% !important;
  flex-shrink: 0 !important;
}

.message-top-grid .message-right .img-box {
  border-radius: 16px !important;
  overflow: hidden !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06) !important;
}

.message-top-grid .message-right .img-box img {
  width: 100% !important;
  height: auto !important;
  display: block !important;
}

.message-left .catch {
  font-size: 3.2rem !important;
  line-height: 1.5 !important;
  margin-bottom: 24px !important;
  color: #030303 !important;
  font-weight: 700 !important;
  text-align: left !important;
}

.message-left .txt-box {
  font-size: 1.8rem !important;
  line-height: 1.8 !important;
  color: #030303 !important;
  text-align: left !important;
}

/* スマホ対応（767px以下は縦並びに戻す） */
@media (max-width: 767px) {
  .message-top-grid {
    flex-direction: column !important;
    gap: 30px !important;
  }

  .message-top-grid .message-right {
    width: 100% !important;
    max-width: 100% !important;
  }

  .message-left .catch {
    font-size: 2.2rem !important;
  }
}

/* SVG装飾 & 強調文（#FA8028） */
.message-sub-box {
  text-align: center;
  max-width: 860px;
  margin: 0 auto 70px;
}

.message-sub-box .logo-svg {
  display: flex;
  justify-content: center;
  margin-bottom: 20px;
}

/* ==================================================
   メッセージエリア（テキスト側）の基準設定
================================================== */
body.page-about .message-left {
  flex: 1 !important;
  text-align: left !important;
  position: relative !important;
  /* ★SVGの絶対配置の基準にするため追加 */
}

/* ==================================================
   SVG装飾の配置設定
================================================== */
/* SVGを囲む共通の箱 */
body.page-about .deco-svg {
  position: absolute !important;
  width: 61px !important;
  height: 61px !important;
  z-index: 1 !important;
}

body.page-about .deco-svg svg {
  width: 100% !important;
  height: 100% !important;
  display: block !important;
}

/* 右上のSVGの位置 */
body.page-about .deco-top-right {
  top: -30px !important;
  /* テキストより少し上 */
  right: 0 !important;
  /* テキストの右端に合わせる */
}

/* 左下のSVGの位置 */
body.page-about .deco-bottom-left {
  bottom: -60px !important;
  /* テキストより少し下 */
  left: -90px !important;
  /* テキストの左端より少し外側に出す */
}

/* スマホ対応（767px以下） */
@media (max-width: 767px) {

  /* スマホの時は少し内側に寄せるか、サイズを調整します */
  body.page-about .deco-top-right {
    top: -40px !important;
    right: 10px !important;
  }

  body.page-about .deco-bottom-left {
    bottom: -20px !important;
    left: -10px !important;
  }
}

/* ==================================================
   強調文章（行ごとに背景オレンジ・白文字）
================================================== */
body.page-about .message-sub-box {
  text-align: center;
  max-width: 860px;
  margin: 0 auto 60px;
  position: relative;
  z-index: 2;
}

body.page-about .message-sub-box .highlight-txt {
  text-align: center !important;
  margin-bottom: 30px !important;
  line-height: 2 !important;
  /* 行間を広げて上下の隙間を作る */
}

/* <span> に対して背景色と余白をつける */
body.page-about .message-sub-box .highlight-txt span {
  display: inline-block !important;
  /* テキストの長さに合わせる */
  background-color: #FA8028 !important;
  /* 背景オレンジ */
  color: #FFFFFF !important;
  /* 文字白 */
  font-size: 24px !important;
  font-weight: 700 !important;
  padding: 8px 24px !important;
  /* 文字の周りのオレンジの余白（上下・左右） */
  margin-bottom: 12px !important;
  /* 1行目と2行目の間の隙間 */
}


/* ##03: 代表プロフィールボックス (staff_01.jpg) */
.ceo-box {
  display: flex;
  align-items: center;
  gap: 40px;
  max-width: 860px;
  margin: 0 auto;
  background: #fff;
  padding: 30px;
  border-radius: 16px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.05);
}

.ceo-box .ceo-img {
  width: 220px;
  flex-shrink: 0;
  border-radius: 12px;
  overflow: hidden;
}

.ceo-box .ceo-img img {
  width: 100%;
  height: auto;
  display: block;
}

.ceo-box .ceo-info .company {
  font-size: 1.5rem;
  color: #666;
  margin-bottom: 6px;
}

.ceo-box .ceo-info .name {
  font-size: 2.4rem;
  font-weight: 700;
  color: #030303;
}

.ceo-box .ceo-info .name span {
  font-size: 2.8rem;
  margin-left: 8px;
}

/* ==================================================
   代表メッセージエリア (左テキスト、右画像)
================================================== */
body.page-about .ceo-message-box {
  display: flex !important;
  align-items: stretch !important;
  justify-content: space-between !important;
  gap: 50px !important;
  max-width: 950px;
  margin: 0 auto 80px;
}

body.page-about .ceo-message-box .ceo-txt p:not(.sign) {
  font-size: 1.6rem !important;
  line-height: 2.8 !important;
  /* ★ 文章の行間（参考画像に合わせてかなり広め） */
  margin-bottom: 32px !important;
  /* ★ 段落と段落の間の余白 */
  color: #333 !important;
  font-weight: 700 !important;
}

/* ==================================================
   ABOUT：代表メッセージ スマホ時の改行(<br>)無効化
================================================== */
@media screen and (max-width: 767px) {

  /* 本文（.sign以外）の中にある <br> を非表示にして自然な折り返しにする */
  body.page-about .ceo-message-box .ceo-txt p:not(.sign) br {
    display: none !important;
  }
}

/* ==================================================
   調整箇所２：「株式会社ヒューマンインフラ〜」署名の高さ調整
================================================== */
body.page-about .ceo-message-box .sign {
  text-align: right !important;
  font-size: 1.6rem !important;
  line-height: 1.8 !important;
  /* ★ 署名の行間（本文より少し狭め） */
  margin-top: 20px !important;
  /* ★ 本文から署名までの距離 */
  font-weight: 700 !important;
  color: #030303 !important;
}

body.page-about .ceo-message-box .text-col p:last-of-type {
  margin-bottom: 0 !important;
}

/* 右寄せの署名 */
body.page-about .ceo-message-box .sign {
  text-align: right !important;
  font-size: 1.6rem !important;
  line-height: 1.6 !important;
  font-weight: 700 !important;
  color: #030303 !important;
  margin-top: 40px !important;
}

/* 右側の写真エリア */
body.page-about .ceo-message-box .img-col {
  width: 320px !important;
  flex-shrink: 0 !important;
  background-color: #e0e0e0;
  /* 画像読み込み前のグレー背景 */
}

body.page-about .ceo-message-box .img-col img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  /* 縦長にトリミングして綺麗に配置 */
  display: block !important;
}

/* スマホ対応 (767px以下) */
@media (max-width: 767px) {
  body.page-about .ceo-message-box {
    flex-direction: column-reverse !important;
    /* スマホでは写真を上に、テキストを下に */
    gap: 30px !important;
  }

  body.page-about .ceo-message-box .img-col {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 3/4;
    /* スマホ時の縦横比 */
  }

  body.page-about .ceo-message-box .text-col p {
    font-size: 1.5rem !important;
  }

  body.page-about .ceo-message-box .sign {
    margin-top: 24px !important;
  }
}

/* 動画セクション */
.sec-movie {
  text-align: center;
  max-width: 860px;
  margin: 0 auto 80px;
  position: relative;
  z-index: 2;
}

.sec-movie .movie-lead {
  font-size: 2.2rem !important;
  font-weight: bold !important;
  color: ##030303 !important;
  margin-bottom: 20px !important;
}

.sec-movie img {
  width: 100%;
  height: auto;
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
  cursor: pointer;
}

/* ==================================================
   スタッフ紹介エリア
================================================== */
body.page-about .sec-about-staff {
  padding: 50px 0 !important;
  background-color: #fcf8f5 !important;
}

/* ★ここで全体の最大幅を制限して、写真の巨大化を防ぎます */
body.page-about .sec-about-staff .inner {
  max-width: 1100px !important;
  margin: 0 auto !important;
  padding: 0 20px !important;
}

body.page-about .sec-about-staff .block-ttl {
  text-align: center !important;
  margin-bottom: 40px !important;
}

/* STAFF：グレー（#ADADAD）で大きく */
body.page-about .sec-about-staff .block-ttl .en {
  font-size: 4.8rem !important;
  color: #ADADAD !important;
  font-weight: 700 !important;
  letter-spacing: 0.05em !important;
  line-height: 1 !important;
  margin-bottom: 12px !important;
}

body.page-about .sec-about-staff .block-ttl .jp {
  font-size: 2.2rem !important;
  color: #030303 !important;
  font-weight: 700 !important;
}

/* リード文全体の余白 */
body.page-about .sec-about-staff .staff-lead {
  text-align: center !important;
  margin-bottom: 70px !important;
}

/* 帯デザイン（オレンジ背景・白文字） */
body.page-about .sec-about-staff .staff-lead .highlight-line {
  margin-bottom: 30px !important;
}

body.page-about .sec-about-staff .staff-lead .highlight-line span {
  display: inline-block !important;
  background-color: #FA8028 !important;
  color: #FFFFFF !important;
  font-size: 24px !important;
  font-weight: 700 !important;
  padding: 16px 32px !important;
}

/* 通常テキスト */
body.page-about .sec-about-staff .staff-lead .normal-line {
  font-size: 1.6rem !important;
  line-height: 2.2 !important;
  color: #030303 !important;
  font-weight: 700 !important;
}

/* スタッフリスト（3列） */
body.page-about .staff-list {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 30px !important;
}

/* ==================================================
   スタッフカード本体（背景透明・枠なし）
================================================== */
body.page-about .staff-item {
  background: transparent !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  display: flex !important;
  flex-direction: column !important;
  border-bottom: none !important;
  /* 古い下線をリセット */
}

/* 画像エリア */
body.page-about .staff-item .thumb {
  width: 100% !important;
  aspect-ratio: 4/3 !important;
  background-color: #d9d9d9 !important;
  overflow: hidden !important;
  position: relative !important;
}

body.page-about .staff-item .thumb img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}

/* 左上の事業所名タグ */
body.page-about .staff-item .corp-tag {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  color: #fff !important;
  padding: 6px 16px !important;
  font-size: 1.3rem !important;
  font-weight: bold !important;
  z-index: 2 !important;

  /* ★追加：文字が折り返して重なるのを防ぐ */
  white-space: nowrap !important;
}

/* ★追加：スマホやタブレットで画面が狭い時は、タグを少し小さくして見栄えを整える */
@media (max-width: 1023px) {
  body.page-about .staff-item .corp-tag {
    font-size: 1.1rem !important;
    padding: 4px 10px !important;
  }
}

/* テキストエリア（カード背景と同じ色になるよう余白のみ設定） */
body.page-about .staff-item .cont {
  padding: 16px 0 0 0 !important;
  flex-grow: 1 !important;
  display: flex !important;
  flex-direction: column !important;
}

/* グレーのバッジ（役職・出身地） */
body.page-about .staff-item .badge-wrap {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  margin-bottom: 12px !important;
}

body.page-about .staff-item .role {
  font-size: 1.3rem !important;
  background-color: #818181 !important;
  color: #fff !important;
  padding: 4px 12px !important;
  border-radius: 20px !important;
  font-weight: 700 !important;
  margin-bottom: 0 !important;
}

/* 名前 */
body.page-about .staff-item .name {
  font-size: 2.2rem !important;
  font-weight: 700 !important;
  color: #030303 !important;
  margin-bottom: 14px !important;
  line-height: 1.4 !important;
  display: flex !important;
  align-items: baseline !important;
  gap: 4px !important;
}

body.page-about .staff-item .name span {
  font-size: 1.6rem !important;
  /* 「：代表」などの部分を少し小さく */
}

/* メインのリード文（画面幅に合わせて文字を小さくする） */
body.page-about .staff-item .txt {
  font-family: 'Noto Sans JP', sans-serif !important;
  /* ★ここを追加！ */
  font-weight: 500 !important;
  /* ★ 700だと太すぎるため 500 や 400 に変更！ */

  /* ▼ 以下はそのまま ▼ */
  font-size: clamp(1.1rem, 1.5vw, 1.4rem) !important;
  line-height: 1.6 !important;
  color: #030303 !important;
  margin-bottom: 20px !important;
}

/* ==================================================
   白背景の詳細情報ボックス（ここで色付き下線を引く）
================================================== */
body.page-about .staff-item .info-box {
  background-color: #fff !important;
  padding: 16px !important;
  margin-top: auto !important;
  border-bottom: 6px solid transparent !important;

  /* ★ min-height ではなく height でガッチリ固定します */
  height: 80px !important;
  /* ← 75px〜85pxあたりで、一番しっくりくる数字に微調整してください */
  box-sizing: border-box !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  /* 1行のテキストを上下中央に配置 */
}

body.page-about .staff-item .info-box p {
  font-size: 1.34rem !important;
  line-height: 1.6 !important;
  font-weight: 700 !important;
  margin-bottom: 4px !important;
  color: #030303 !important;
}

body.page-about .staff-item .info-box p:last-child {
  margin-bottom: 0 !important;
}

/* ==================================================
   テーマカラー設定（事業所タグ ＆ 白ボックスの下線）
================================================== */
/* 赤 (#FA6128): みかちょ */
body.page-about .theme-red .corp-tag {
  background-color: #FA6128 !important;
}

body.page-about .theme-red .info-box {
  border-bottom-color: #FA6128 !important;
}

/* 黄色 (#F4B942): うっじー、ふじりん、しまちゃん */
body.page-about .theme-yellow .corp-tag {
  background-color: #F4B942 !important;
}

body.page-about .theme-yellow .info-box {
  border-bottom-color: #F4B942 !important;
}

/* オレンジ (#FA8028): しんちゃん、かじ、ひらりん、べこちゃん、みさき */
body.page-about .theme-orange .corp-tag {
  background-color: #FA8028 !important;
}

body.page-about .theme-orange .info-box {
  border-bottom-color: #FA8028 !important;
}

/* グリーン (#8ACCB2): こゆき、よっちゃん */
body.page-about .theme-green .corp-tag {
  background-color: #8ACCB2 !important;
}

body.page-about .theme-green .info-box {
  border-bottom-color: #8ACCB2 !important;
}

/* リード文全体の余白 */
body.page-about .sec-about-staff .staff-lead {
  text-align: center !important;
  margin-bottom: 70px !important;
}

/* 帯デザイン（オレンジ背景・白文字） */
body.page-about .sec-about-staff .staff-lead .highlight-line {
  margin-bottom: 30px !important;
  text-align: center !important;
}

body.page-about .sec-about-staff .staff-lead .highlight-line span {
  display: inline-block !important;
  background-color: #FA8028 !important;
  color: #FFFFFF !important;
  font-size: 24px !important;
  font-weight: 700 !important;
  padding: 12px 32px !important;
}

/* 通常テキスト */
body.page-about .sec-about-staff .staff-lead .normal-line {
  font-size: 1.6rem !important;
  line-height: 2.2 !important;
  color: #030303 !important;
  font-weight: 700 !important;
}

/* ==================================================
   スマホ対応 / タブレット対応
================================================== */
@media (max-width: 1023px) {
  body.page-about .staff-list {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

@media (max-width: 767px) {
  body.page-about .sec-about-staff .block-ttl .en {
    font-size: 3.6rem !important;
  }

  body.page-about .sec-about-staff .staff-lead .highlight-line span {
    font-size: 18px !important;
    padding: 8px 16px !important;
  }

  body.page-about .sec-about-staff .staff-lead .normal-line {
    font-size: 1.4rem !important;
    text-align: left !important;
  }

  body.page-about .staff-list {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 767px) {
  .page-head {
    margin-top: 70px;
    padding: 16px 0;
  }

  .page-head .ttl {
    flex-direction: column;
    gap: 4px;
  }

  .page-head .ttl .en {
    font-size: 2.6rem;
  }

  .page-head .ttl .jp {
    font-size: 1.6rem;
  }

  .sec-about-message {
    padding: 40px 0;
  }

  .message-top-grid {
    flex-direction: column;
    gap: 30px;
  }

  .message-top-grid .message-right {
    width: 100%;
  }

  .message-left .catch {
    font-size: 2.2rem;
  }

  .message-sub-box .highlight-txt {
    font-size: 1.8rem;
  }

  .ceo-box {
    flex-direction: column;
    text-align: center;
  }

  .ceo-box .ceo-img {
    width: 180px;
  }

  .sec-about-staff {
    padding: 60px 0;
  }

  .sec-about-staff .block-ttl .jp {
    font-size: 2.4rem;
  }

  .sec-about-staff .staff-lead {
    font-size: 1.5rem;
    text-align: left;
    margin-bottom: 40px;
  }

  .staff-list {
    grid-template-columns: 1fr;
    gap: 20px;
  }

  .staff-item .thumb {
    height: 220px;
  }

  .staff-item .cont {
    padding: 20px;
  }
}

/* ==================================================
   テーマカラー設定（事業所タグ ＆ 白ボックスの下線）
================================================== */
/* 赤 (#FA6128): みかちょ */
body.page-about .theme-red .corp-tag {
  background-color: #FA6128 !important;
}

body.page-about .theme-red .info-box {
  border-bottom-color: #FA6128 !important;
}

/* 黄色 (#F4B942): うっじー、ふじりん、しまちゃん */
body.page-about .theme-yellow .corp-tag {
  background-color: #F4B942 !important;
}

body.page-about .theme-yellow .info-box {
  border-bottom-color: #F4B942 !important;
}

/* オレンジ (#FA8028): しんちゃん、かじ、ひらりん、べこちゃん、みさき */
body.page-about .theme-orange .corp-tag {
  background-color: #FA8028 !important;
}

body.page-about .theme-orange .info-box {
  border-bottom-color: #FA8028 !important;
}

/* グリーン (#8ACCB2): こゆき、よっちゃん */
body.page-about .theme-green .corp-tag {
  background-color: #8ACCB2 !important;
}

body.page-about .theme-green .info-box {
  border-bottom-color: #8ACCB2 !important;
}

/* ==================================================
   バナーエリア（フッター上）
================================================== */
body.page-about .sec-about-bnr {
  padding: 0 0 100px;
  background-color: #fcf8f5;
  /* スタッフ紹介の背景色と繋げる */
}

body.page-about .bnr-list {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 30px !important;
  max-width: 1000px !important;
  /* 全体の最大幅（ここでサイズ感を制御） */
  margin: 0 auto;
  padding: 0 20px;
}

body.page-about .bnr-item {
  width: 100% !important;
  max-width: none !important;
  /* 上限を解除してグリッドに合わせる */
}

body.page-about .bnr-item a {
  display: block;
}

body.page-about .bnr-item img {
  width: 100% !important;
  height: auto !important;
  border-radius: 16px !important;
  /* 画像の角丸 */
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08) !important;
  transition: opacity 0.3s ease;
  display: block !important;
}

body.page-about .bnr-item a:hover img {
  opacity: 0.7;
}

/* スマホ対応 (767px以下) */
@media (max-width: 767px) {
  body.page-about .sec-about-bnr {
    padding: 0 0 60px;
  }

  body.page-about .bnr-list {
    grid-template-columns: 1fr !important;
    /* 縦1列に変更 */
    gap: 20px !important;
    max-width: 420px !important;
    /* スマホ時は少し幅を絞って綺麗に見せる */
  }

}