@charset "utf-8";

/*PC・タブレット・スマホ(全端末)共通設定
------------------------------------------------------------------------------------------------------------------------------------------------------*/
h1.fe {
  margin-bottom: 20px;
}
.contents-original-top {
  display: flex;
  justify-content: center;
}

.h1-right .img-feature{
  width: 500px;
  height: 300px;
  object-fit: cover;
}

.fe-cont {
  margin: 39px 0;
}

.fe-cont2 {
  margin: 39px 0 50px;
  display: flex;
  align-items: center;
}

.fe-cont2:last-child {
  margin: 39px 0 120px;
}

.fe-cont3 {
  border-top: 1px solid #e7e9ea;
  display: flex;
  align-items: center;
  padding: 35px 0;
}

.fe-cont2 h3 {
  white-space: nowrap;
  padding-right: 23px;
  font-size: 22px;
  font-weight: bold;
  color: #007ccd;
}

.fe-cont2 p {
  border-left: 2px solid #e7e9ea;
  padding-left: 23px;
  line-height: 1.8;
}

/*組織体制*/
.yakuin {
  display: block;
  width: 688px;
  margin: 74px auto 100px;
}

/*with*/
.with {
  display: block;
  width: 881px;
  margin: 74px auto 130px;
}

.logo-box {
  width: 278px;
  padding: 0 20px;
}

.company-box {
  width: 400px;
}

th {
  width: 93px;
  text-align: center;
  font-weight: normal;
  background: #e7e9ea;
  display: block;
  margin-right: 27px;
  margin-bottom: 10px;
}

th:last-child {
  margin-bottom: 0;
}

.link-btn-box a {
  display: block;
  width: 179px;
  height: 52px;
  line-height: 52px;
  background: #17a3de;
  color: #fff;
  text-align: center;
  padding-right: 0.3em;
  position: relative;
  border-radius: 50px;
}

.link-btn-box a:after {
  content: url(../../../images/common/arrow-w.png);
  position: absolute;
  right: 1em;
}

/*画面幅1024px以下の設定
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width: 1024px) {
}

/*画面幅789px以下の設定
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width: 789px) {
  h1.fe {
    margin: 0 auto 40px;
  }

  .fe-cont {
    margin: 0 auto 0;
    font-size: 14px;
    line-height: 1.6;
    letter-spacing: -0.05em;
  }

  .fe-cont3 {
    display: block;
  }

  .yakuin {
    width: 90%;
    margin: 40px auto 50px;
  }

  .fe-cont2 h3 {
    font-size: 20px;
  }

  .fe-cont2 p {
    font-size: 14px;
    letter-spacing: -0.03em;
  }

  .fe-cont2:last-child {
    margin: 39px 0;
  }

  /*with*/
  .with {
    display: block;
    width: 100%;
    margin: 30px auto;
  }

  .company-box {
    width: 90%;
  }

  .logo-box {
    width: 100%;
    text-align: center;
    padding: 0;
    margin-bottom: 29px;
  }

  .logo-box img {
    max-height: 94px;
  }

  .company-box {
    margin: 0 auto 29px;
  }

  table {
    font-size: 14px;
  }

  .link-btn-box a {
    font-size: 14px;
    margin: 0 auto;
    height: 42px;
    line-height: 42px;
  }

  .link-btn-box a:after {
    right: 1.5em;
  }
}

/*画面幅580px以下の設定
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media screen and (max-width: 580px) {
}

/* MISSIONセクションのレイアウト設定 */
.mvv-container {
  display: flex; /* Flexboxレイアウトを有効にする */
  align-items: center; /* 子要素を垂直方向の中央に揃える */
  gap: 15px; /* 題目と説明文の間の余白 */
  margin-top: 2em; /* 上の見出しとの余白 */
  margin-bottom: 4em; /*ブロック間の余白 */
}

/* 題目のブロック（左側） */
.mvv-title {
  flex: 0 0 33%; /* コンテナの幅に対して33%で幅を固定（伸び縮みしない） */
  font-size: 1.6rem; /* 文字を少し大きめに */
  text-align: center; /* 中央揃え */
  line-height: 1.6;
}

/* 説明文のブロック（右側） */
.mvv-description {
  flex: 1; /* 残りのスペースをすべて埋める */
  line-height: 1.8; /* 行間を広げて読みやすくする */
  text-align: left;
}


/* ===== スマートフォン表示への対応 ===== */
@media screen and (max-width: 768px) {
  .mvv-container {
    flex-direction: column; /* 縦並びに変更 */
    align-items: center; /* 左揃えに戻す */
    gap: 20px; /* 上下の余白を調整 */
  }

  /* SP表示では幅の固定を解除 */
  .mvv-title {
    flex-basis: auto;
    width: 100%;
    text-align: center; /* 中央揃えの方が見やすい場合もある */
  }
  .mvv-description  p{
   text-align: center;
   width: 100%;           /* ← 要素の幅を親要素の90%に設定 */
   margin-left: auto;    /* ← 左の余白を自動計算 */
   margin-right: auto;   /* ← 右の余白を自動計算 */
  }
}