@charset "UTF-8";

*,
*::before,
*::after {
  box-sizing: border-box;
}

@import url('https://fonts.googleapis.com/css2?family=Dela+Gothic+One&family=Lusitana:wght@400;700&family=Montserrat:ital,wght@0,100..900;1,100..900&family=Noto+Sans+JP:wght@100..900&family=Noto+Sans:ital,wght@0,100..900;1,100..900&family=Noto+Serif+JP:wght@200..900&family=Noto+Serif:ital,wght@0,100..900;1,100..900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Raleway:ital,wght@0,100..900;1,100..900&family=Roboto+Condensed:ital,wght@0,100..900;1,100..900&family=Roboto:ital,wght@0,100..900;1,100..900&family=Shippori+Mincho&family=Work+Sans:ital,wght@0,100..900;1,100..900&family=Yuji+Syuku&family=Zen+Old+Mincho&display=swap');


html,
body {
  width: 100%;
  overflow-x: hidden;
}


/* 全体背景 */
body {
  margin: 0;
  padding: 0;
  background: rgba(251, 255, 218, 1);
  font-family: "Noto Sans JP", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
}

/* セクション */
#senior-voice-head {
  padding: 110px 0 0 0;
}

/* 幅 1100px のコンテナ */
.sv-container {
  width: 1100px;
  max-width: 100%;
  margin: 0 auto;
}

/* 見出し H2 */
.sv-title {
  margin: 0 0 24px 0;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 800; /* ExtraBold */
  font-size: 65.83px;
  line-height: 1.1;
  color: rgba(16, 179, 127, 1);
}

/* タイトル下の下線 */
.sv-title-border {
  width: 100%;
  height: 0;
  border-bottom: 1px solid rgba(0, 0, 0, 1);
  margin-bottom: 40px;
}

/* 下の1行（バッジ・名前・部署） */
.sv-info-row {
  display: flex;
  align-items: center;
  gap: 40px;
}

/* 新卒入社 ◯年目 バッジ */
.sv-badge {
  display: inline-block;
  padding: 12px 24px;
  border-radius: 8px;
  background: rgba(16, 179, 127, 1);
  color: #ffffff;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 700;
  font-size: 24px;
}

/* Hさん */
.sv-name {
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 700;
  font-size: 36px;
}

/* 部署＋説明をまとめるブロック */
.sv-text-block {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* 製造部 */
.sv-dept {
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 700;
  font-size: 20px;
  color: rgba(16, 179, 127, 1);
}

/* 加工プログラム作成… */
.sv-desc {
  margin: 0;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 500;       /* Medium */
  font-size: 16px;
  line-height: 1.7;
  color: #000000;
}





/* セクション全体 */
#senior-detail {
  background: rgba(251, 255, 218, 1);
  padding: 60px 0;
}

/* コンテナ（幅 1100px） */
.sd-container {
  width: 1100px;
  max-width: 100%;
  margin: 0 auto;
  font-family: "Noto Sans JP", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
}

/* 共通の行レイアウト */
.sd-row {
  display: flex;
  align-items: flex-start;
  column-gap: 60px;
}

/* 上段・下段の間隔 */
.sd-row-top {
  margin-bottom: 60px;
}

.sd-row-bottom {
  margin-top: 40px;
}

/* ── 画像 ── */

.sd-main-photo img {
  display: block;
  width: 472px;   /* 必要なら実寸に合わせて調整OK */
  height: auto;
  /* radius は付けない */
}

.sd-sub-column {
  display: flex;
  flex-direction: column;
  row-gap: 24px;
}

.sd-sub-photo {
  display: block;
  width: 490px;  /* 必要なら実寸に合わせて調整OK */
  height: auto;
  /* radius なし */
}

/* ── Q&A 共通 ── */

.sd-qa-column {
  flex: 1;
}

/* 上段の2つだけ少し余白 */
.sd-row-top .sd-qa-item + .sd-qa-item {
  margin-top: 32px;
}

/* 下段の3つの間隔 */
.sd-qa-column-bottom .sd-qa-item + .sd-qa-item {
  margin-top: 32px;
}

/* 質問行（アイコン＋テキスト） */
.sd-question {
  display: flex;
  align-items: center;
  column-gap: 12px;
  margin-bottom: 10px;
}

.sd-q-icon {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
}

/* 質問テキスト */
.sd-question-text {
  margin: 0;
  font-weight: 600;
  font-size: 20.98px;
  line-height: 1.6;
  color: rgba(1, 152, 104, 1);
}

/* 回答テキスト */
.sd-answer {
  margin: 0;
  font-weight: 400;
  font-size: 16px;
  line-height: 2;
  color: #000;
}




/* セクション全体 */
#senior-others {
  background: #f5ffa7; /* 背景色 f5ffa7 */
  padding: 60px 0;
}

.others-container {
  width: 1100px;
  max-width: 100%;
  margin: 0 auto;
  font-family: "Noto Sans JP", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
}

/* 見出し */
.others-title {
  margin: 0 0 16px;
  font-weight: 800;               /* ExtraBold */
  font-size: 32px;
  color: rgba(16, 179, 127, 1);
}

.others-title-border {
  width: 100%;
  border-bottom: 1px solid rgba(0, 0, 0, 1);
  margin-bottom: 40px;
}

/* カードのグリッド（上段3・下段1） */
.others-grid {
  display: flex;
  flex-wrap: wrap;
  column-gap: 55px;   /* 横の間隔 */
  row-gap: 60px;      /* 縦の間隔 */
}

/* 各メンバーカード */
.member-card {
  width: 330px;       /* 指定どおり */
}

/* 人物画像 */
.member-photo {
  display: block;
  width: 330px;
  height: auto;
  /* radius はつけない */
}

/* 新卒入社 ○年目 バッジ */
.member-badge {
  margin-top: 16px;
  display: inline-block;
  padding: 8px 16px;
  background: rgba(16, 179, 127, 1);
  color: #ffffff;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 700;          /* Bold */
  font-size: 24px;
  border-radius: 8px;
}

/* 名前＋下線 */
.member-name-row {
  width: 330px;
  border-bottom: 1px solid rgba(0, 0, 0, 1);
  margin-top: 12px;
  padding-bottom: 8px;
}

.member-name {
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 700;          /* Bold */
  font-size: 36px;
}

/* 部署 */
.member-dept {
  margin-top: 12px;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 700;          /* Bold */
  font-size: 20px;
}

/* 説明テキスト */
.member-text {
  margin: 4px 0 0;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 500;          /* Medium */
  font-size: 16px;
  line-height: 1.7;
}

/* <a> をブロック化して余白問題を防ぐ */
.member-card-link {
  display: block;
  text-decoration: none;
  color: inherit;    /* リンク色を消す */
}

/* ホバー時の軽いアニメーション（任意） */
.member-card-link:hover .member-card {
  transform: translateY(-4px);
  transition: 0.25s ease;
}

.member-card {
  transition: 0.25s ease;
}


/* =========================================================
   ① 1200px 以下（PC幅を抜けたら余白や行幅を調整）
   ========================================================= */
   @media (max-width: 1200px) {

    .sv-container,
    .sd-container,
    .others-container {
      width: 100%;
      padding: 0 24px;
      box-sizing: border-box;
    }
  
    /* タイトル */
    .sv-title {
      font-size: 48px;
    }
  }
  
  
  /* =========================================================
     ② 1024px 以下（タブレット横 → 縦レイアウトへ移行）
     ========================================================= */
  @media (max-width: 1024px) {
  
    /* 上段のバッジ行 */
    .sv-info-row {
      flex-direction: column;
      align-items: flex-start;
      gap: 12px;
    }
  
    /* ─────────── DETAILセクション ─────────── */
  
    /* 画像＋Q&A の横並びを縦並びへ */
    .sd-row {
      flex-direction: column;
    }
  
    .sd-main-photo img,
    .sd-sub-photo {
      width: 100%;
      max-width: 600px;
    }
  
    .sd-sub-column {
      width: 100%;
    }
  
    .sd-qa-column,
    .sd-qa-column-bottom {
      width: 100%;
    }
  
    .sd-row-top,
    .sd-row-bottom {
      margin: 40px 0;
    }
  
    /* Qタイトルサイズ調整 */
    .sd-question-text {
      font-size: 18px;
    }
  
  
    /* ─────────── OTHERS（他のメンバー）────────── */
  
    .others-grid {
      justify-content: center;
      column-gap: 40px;
    }
  
    .member-card {
      width: 45%;
      max-width: 320px;
    }
  
    .member-photo {
      width: 100%;
    }
  
    .member-name-row {
      width: 100%;
    }
  }
  
  
  /* =========================================================
     ③ 768px 以下（スマホレイアウト）
     ========================================================= */
  @media (max-width: 768px) {
  
    /* 上のタイトル */
    .sv-title {
      font-size: 36px;
    }
  
    .sv-badge {
      font-size: 18px;
      padding: 8px 18px;
    }
  
    .sv-name {
      font-size: 28px;
    }
  
    .sv-dept {
      font-size: 16px;
    }
  
    .sv-desc {
      font-size: 14px;
    }
  
  
    /* DETAILセクション */
    .sd-question-text {
      font-size: 17px;
    }
  
    .sd-answer {
      font-size: 15px;
      line-height: 1.8;
    }
  
    /* 画像 */
    .sd-main-photo img,
    .sd-sub-photo {
      width: 100%;
    }
  
  
    /* OTHERS セクション */
    .others-title {
      font-size: 26px;
    }
  
    .member-card {
      width: 100%;
      max-width: 360px;
    }
  
    .member-photo {
      width: 100%;
    }
  
    .member-name {
      font-size: 28px;
    }
  
    .member-dept {
      font-size: 16px;
    }
  
    .member-text {
      font-size: 14px;
    }
  }
  
  
  /* =========================================================
     ④ 480px 以下（小型スマホ）
     ========================================================= */
  @media (max-width: 480px) {
  
    .sv-title {
      font-size: 30px;
    }
  
    .sv-badge {
      font-size: 16px;
      padding: 6px 14px;
    }
  
    .sv-name {
      font-size: 24px;
    }
  
    .sv-dept {
      font-size: 15px;
    }
  
    .sv-desc {
      font-size: 14px;
    }
  
    .sd-question-text {
      font-size: 16px;
    }
  
    .sd-answer {
      font-size: 14px;
    }
  
    .member-card {
      width: 100%;
    }
  
    .member-name {
      font-size: 24px;
    }
  }