/* =============================================================
   会社概要ページ専用
   ----------------------------------------------------------------
   ▸ 既存 base.css / layout.css / public.css の上に読み込む想定
   ▸ 画像アセットを必ず使用（CSS での図形生成は行わない）
   ▸ 現行 HTML に合わせ、hero__box など存在しないクラスを除去
   =============================================================*/

/* ----------------------------
   1. Hero Section
-----------------------------*/
#fv_child {
  padding: 150px 0;
}
.hero {
  padding-block: 6rem;
}
/* HTML に <div class="hero__wrapper">… がある想定 */
.hero__wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: center;
}
.hero__image {
  width: 100%;
  height: auto;
  object-fit: cover;
}

.hero__content h2 {
  margin-bottom: 50px;
  font-size: 64px;
}
.hero__content h4 {
  font-size: 24px;
  margin-bottom: 30px;
}
@media (max-width: 480px) {
  .hero__wrapper {
    grid-template-columns: 1fr;
  }
  .hero__image {
    order: 1; /* 画像を先頭に */
  }
  #fv_child {
    padding: 0;
    padding-top: 50px;
    padding-bottom: 50px;
    }
  .hero__content h2 {
    margin-bottom: 50px;
    font-size: 40px;
}
.hero__content h4 {
    margin-bottom: 25px;
}
}
/* ----------------------------
   2. About
-----------------------------*/
#about {
  background-color: #F5F5F5;
  padding-top:150px ;
  padding-bottom: 150px;
}
#about .section-title__image{
  width: 570px;
  max-width: 100%;
}
.about-table-cards {
    max-width: 800px;
    margin: 0 auto;
}
.about-table-card {
  display: flex;
  gap: 4px;
  justify-content: center;
  align-items: center;
  background-color: #fff;
  margin-bottom: 10px;
}

.about-table-card_title {
  max-width: 100%;
  padding: 15px 63px;
  text-align: center;
  flex: 1;
  background-color: #006036;
  color: #fff;
}
.about-table-card_title p{
  width: 100%;
}
.about-table-card_body {
  max-width: 100%;
  padding: 0px 63px;
  text-align: left;
  flex: 4;
}
.about-table-card_body p{
  width: 100%;
}

.map__wrap {
    text-align: center;
    margin-top: 5rem;
}
@media (max-width: 480px) {
  #about {
    background-color: #F5F5F5;
    padding-top: 70px;
    padding-bottom: 70px;
}
.about-table-card {
    display: flex
;
    gap: 4px;
    justify-content: normal;
    align-items: normal;
    background-color: #fff;
    margin-bottom: 10px;
    flex-direction: column;
} 
.about-table-card_body {
    padding: 0;
    text-align: center;
}
.map__wrap iframe {
  max-width: 100%;
}
}

/* ----------------------------
   3. MVV
-----------------------------*/
#mvv {
  padding-block: 8rem;
  background-image: url('../img/company_img/mvv_bg.png');
  text-align: center;
}
#mvv .section-title {
  margin-bottom: 0;
}
#mvv .section-title__image {
  width: 860px;
  max-width: 100%;
}
.mvv__wrap {
    margin-bottom: 120px;
}
.mvv__wrap:last-child {
    margin-bottom: 0;
}
.mvv_body {
  color: #fff;
  font-size: 24px;
  margin-top: 20px;
}

@media (max-width: 480px) {
  #mvv {
    padding-top: 70px;
    padding-bottom: 70px;
    background-image: url(../img/company_img/mvv_bg.png);
    text-align: center;
}
  .mvv__wrap {
    margin-bottom: 80px;
  }
  #mvv .mvv__wrap .section-title__image:nth-child(2) {
    width: 372px;
    max-width: 100%;
  }
  #mvv .mvv__wrap:nth-child(2) .section-title__image:nth-child(2) {
    width: 300px;
    max-width: 100%;
  }
  #mvv .mvv__wrap:nth-child(3) .section-title__image:nth-child(2) {
    width: 270px;
    max-width: 100%;
  }
  .mvv_body {
      font-size: 16px;
  }
}
/* ----------------------------
   4. MESSAGE
-----------------------------*/
#message {
  padding-top: 150px;
  padding-bottom: 150px;
}
#message .section-title__image {
  width: 790px;
  max-width: 100%;
}
/* <div class="about__wrapper">… の想定 */
.message-card {
  display: flex;
  gap: 6rem;
  align-items: center;
  justify-content: center;
}
.message-card_body {
  max-width: 500px;
}
.message-card_image {
  width: 300px;

}
.message-card_img {
  max-width: 230px;
  height: auto;
}
.message-card_body {
  margin-bottom: 1rem;
}

@media (max-width: 480px) {
  #message {
      padding-top: 70px;
      padding-bottom: 70px;
  }
  .message-card {
    flex-direction: column;
    gap: 0;
}
  .message-card_image {
    width: auto;
}
.message-card_image_name {
    text-align: center;
}
}
/* ----------------------------
   5. Utilities
-----------------------------*/
.u-mb-120 { margin-bottom: 120px; }