/* =========================================================
   MIZUHO BISO
   COMPANY PAGE
   /css/pages/company.css
========================================================= */


/* =========================================================
   01. SWELL RESET
========================================================= */

/* SWELL標準ページタイトルを非表示 */
.c-pageTitle,
.p-articleHead,
.l-topTitleArea {
  display: none !important;
}

/* パンくず */
.p-breadcrumb {
  margin-bottom: 0 !important;
}

/* サイドバーなし */
.l-sidebar {
  display: none !important;
}

/* 会社案内ページの基本幅 */
#content .l-content,
#content .l-container {
  width: calc(100% - 48px) !important;
  max-width: 1180px !important;

  margin-left: auto !important;
  margin-right: auto !important;

  padding-left: 0 !important;
  padding-right: 0 !important;
}

#main_content,
.l-mainContent,
.l-mainContent__inner,
.post_content {
  width: 100% !important;
  max-width: none !important;

  margin-left: 0 !important;
  margin-right: 0 !important;

  padding-left: 0 !important;
  padding-right: 0 !important;
}

.l-mainContent {
  float: none !important;
}

/* SWELL本文余白を解除 */
.post_content > * {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* SWELL標準見出し装飾を解除 */
.post_content h1,
.post_content h2,
.post_content h3 {
  margin: 0;
  padding: 0;

  color: inherit;

  border: 0;
  background: none;
}

.post_content h1::before,
.post_content h1::after,
.post_content h2::before,
.post_content h2::after,
.post_content h3::before,
.post_content h3::after {
  display: none !important;
  content: none !important;
}


/* =========================================================
   02. ROOT
========================================================= */

.mz-company {
  --mz-width: 1180px;

  --mz-text: #17282e;
  --mz-sub: #626d6f;
  --mz-line: #d7ddda;

  --mz-white: #ffffff;
  --mz-soft: #f7f8f6;

  --mz-beige: #b7ad98;
  --mz-dark: #162d33;

  width: 100%;

  color: var(--mz-text);
  background: #ffffff;

  font-family:
    "Noto Sans JP",
    "Hiragino Sans",
    "Yu Gothic",
    sans-serif;

  line-height: 1.8;
  letter-spacing: 0.04em;
}

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

.mz-company :where(
  h1,
  h2,
  h3,
  p,
  figure,
  figcaption,
  dl,
  dt,
  dd
) {
  margin: 0;
  padding: 0;
}

.mz-company img {
  display: block;

  width: 100%;
  height: auto;
}

.mz-company a {
  color: inherit;
  text-decoration: none;
}


/* =========================================================
   03. TYPOGRAPHY
========================================================= */

.mz-company h1,
.mz-company h2,
.mz-company h3,
.mz-company-hero__copy,
.mz-company-about__image figcaption {
  font-family:
    "Yu Mincho",
    "Hiragino Mincho ProN",
    "Hiragino Mincho Pro",
    serif;
}


/* =========================================================
   04. INNER
========================================================= */

.mz-company-inner {
  width: 100%;
  max-width: var(--mz-width);

  margin-left: auto;
  margin-right: auto;
}


/* =========================================================
   05. COMMON HEADING
========================================================= */

.mz-company-heading {
  position: relative;

  margin-bottom: 34px;
  padding-left: 20px;
}

.mz-company-heading::before {
  content: "";

  position: absolute;

  top: 0;
  bottom: 0;
  left: 0;

  width: 1px;

  background: #adb8b5;
}

.mz-company-heading__en {
  margin-bottom: 8px;

  color: #7d8989;

  font-family: Arial, sans-serif;

  font-size: 9px;
  font-weight: 500;

  line-height: 1;

  letter-spacing: 0.22em;
}

.mz-company-heading h2 {
  color: var(--mz-text);

  font-size: clamp(27px, 2.25vw, 36px);
  font-weight: 400;

  line-height: 1.35;

  letter-spacing: 0.075em;
}

.mz-company-heading--small {
  margin-bottom: 27px;
}

.mz-company-heading--small h2 {
  font-size: 27px;
}


/* =========================================================
   06. COMMON COPY
========================================================= */

.mz-company-copy {
  max-width: 620px;
}

.mz-company-copy p {
  color: #5b6769;

  font-size: 12.5px;

  line-height: 1.95;

  letter-spacing: 0.035em;
}

.mz-company-copy p + p {
  margin-top: 8px;
}


/* =========================================================
   07. HERO
   TEXT LEFT / PHOTO RIGHT
========================================================= */

.mz-company-hero {
  padding: 42px 0 76px;
}

.mz-company-hero__inner {
  display: grid;

  grid-template-columns:
    minmax(300px, 0.78fr)
    minmax(0, 1.42fr);

  align-items: stretch;

  gap: 58px;

  width: 100%;
  max-width: var(--mz-width);

  margin-left: auto;
  margin-right: auto;
}

.mz-company-hero__text {
  display: flex;

  flex-direction: column;
  justify-content: center;

  min-width: 0;
}

.mz-company-eyebrow {
  margin-bottom: 13px;

  color: #7d8988;

  font-family: Arial, sans-serif;

  font-size: 9px;

  letter-spacing: 0.24em;
}

.mz-company-hero__title {
  color: var(--mz-text);

  font-size: clamp(41px, 4vw, 58px);
  font-weight: 400;

  line-height: 1.15;

  letter-spacing: 0.075em;
}

.mz-company-hero__copy {
  max-width: 330px;

  margin-top: 34px;

  color: #263a3f;

  font-size: clamp(21px, 2vw, 29px);
  font-weight: 400;

  line-height: 1.6;

  letter-spacing: 0.09em;
}

.mz-company-hero__lead {
  max-width: 340px;

  margin-top: 22px;

  color: #596568;

  font-size: 12px;

  line-height: 1.95;

  letter-spacing: 0.045em;
}

.mz-company-hero__image {
  position: relative;

  overflow: hidden;
}

.mz-company-hero__image img {
  width: 100%;
  height: 420px;

  object-fit: cover;
  object-position: center;
}

.mz-company-hero__vertical {
  position: absolute;

  top: 50%;
  right: 16px;

  transform: translateY(-50%);

  color: #748082;

  font-family: Arial, sans-serif;

  font-size: 8px;

  letter-spacing: 0.19em;

  writing-mode: vertical-rl;
}


/* =========================================================
   08. ABOUT
   PHOTO LEFT / TEXT RIGHT
========================================================= */

.mz-company-about {
  padding: 72px 0 80px;

  background: #ffffff;
}

.mz-company-about__grid {
  display: grid;

  grid-template-columns:
    minmax(0, 1.15fr)
    minmax(320px, 0.85fr);

  align-items: center;

  gap: 70px;
}

.mz-company-about__image {
  position: relative;

  overflow: hidden;
}

.mz-company-about__image img {
  width: 100%;

  aspect-ratio: 1.85 / 1;

  object-fit: cover;
}

.mz-company-about__image figcaption {
  position: absolute;

  top: 22%;
  right: 8%;

  color: #263a3f;

  font-size: 19px;

  line-height: 1.7;

  letter-spacing: 0.1em;
}

.mz-company-about__content {
  max-width: 410px;
}

.mz-company-about__content h3 {
  margin-bottom: 23px;

  color: var(--mz-text);

  font-size: clamp(21px, 1.9vw, 27px);
  font-weight: 400;

  line-height: 1.65;

  letter-spacing: 0.075em;
}


/* =========================================================
   09. MESSAGE
   TEXT LEFT / PHOTO RIGHT
========================================================= */

.mz-company-message {
  padding: 68px 0 74px;

  background: #f8f8f7;
}

.mz-company-message__grid {
  display: grid;

  /*
   * 写真を以前より左へ寄せる
   */
  grid-template-columns:
    minmax(0, 1.25fr)
    minmax(280px, 0.75fr);

  align-items: start;

  gap: 38px;
}

.mz-company-message__content {
  max-width: 650px;

  padding-top: 0;
}

.mz-company-message__content h3 {
  margin-bottom: 22px;

  color: var(--mz-text);

  font-size: clamp(22px, 2vw, 29px);
  font-weight: 400;

  line-height: 1.6;

  letter-spacing: 0.075em;
}


/* PHOTO */

.mz-company-message__photo {
  justify-self: start;

  width: 310px;
  max-width: 100%;

  margin: 0;
}

.mz-company-message__photo img,
.mz-company-message__placeholder {
  width: 100%;

  aspect-ratio: 4 / 4.65;

  object-fit: cover;
}

.mz-company-message__placeholder {
  display: flex;

  align-items: center;
  justify-content: center;

  color: #afb6b2;

  background:
    linear-gradient(
      135deg,
      #eaede9,
      #dde1dd
    );

  font-family: Arial, sans-serif;

  font-size: 9px;

  letter-spacing: 0.2em;
}


/* REPRESENTATIVE NAME
   写真左端と完全に合わせる */

.mz-company-message__name {
  width: 100%;

  margin-top: 17px;

  padding: 0;

  text-align: left;
}

.mz-company-message__company {
  display: block;

  margin-bottom: 3px;

  color: #20363b;

  font-size: 22px;
  font-weight: 500;

  line-height: 1.45;

  letter-spacing: 0.08em;
}

.mz-company-message__representative {
  display: block;

  color: #425255;

  font-size: 17px;
  font-weight: 500;

  line-height: 1.5;

  letter-spacing: 0.07em;
}


/* =========================================================
   10. VALUES
   PC = 01 / 02 / 03 / 04 ONE ROW
========================================================= */

.mz-company-values {
  padding: 66px 0 74px;

  background: #ffffff;
}

.mz-company-values .mz-company-heading {
  margin-bottom: 40px;
}


/*
 * PC・タブレットでは必ず4つ横一列。
 * 他CSSから上書きされないよう !important。
 */
.mz-company-values__grid {
  display: grid !important;

  grid-template-columns:
    repeat(4, minmax(0, 1fr)) !important;

  width: 100% !important;

  gap: 0 !important;
}

.mz-company-value {
  min-width: 0;

  padding: 0 22px;

  border-right: 1px solid var(--mz-line);
}

.mz-company-value:first-child {
  padding-left: 0;
}

.mz-company-value:last-child {
  padding-right: 0;

  border-right: 0;
}

.mz-company-value__number {
  display: block;

  margin-bottom: 11px;

  color: var(--mz-beige);

  font-family:
    Georgia,
    "Times New Roman",
    serif;

  font-size: 31px;

  line-height: 1;
}

.mz-company-value h3 {
  margin-bottom: 9px;

  color: var(--mz-text);

  font-size: 15px;
  font-weight: 400;

  line-height: 1.5;

  letter-spacing: 0.065em;
}

.mz-company-value > p {
  min-height: 56px;

  margin-bottom: 14px;

  color: #606b6d;

  font-size: 10.5px;

  line-height: 1.7;
}

.mz-company-value figure {
  overflow: hidden;
}

.mz-company-value img {
  width: 100%;

  aspect-ratio: 1.72 / 1;

  object-fit: cover;

  transition: transform 0.5s ease;
}

.mz-company-value:hover img {
  transform: scale(1.025);
}


/* =========================================================
   11. PROFILE + ACCESS
   LEFT / RIGHT SAME ROW
========================================================= */

.mz-company-info {
  padding: 50px 0 76px;

  background: #ffffff;
}

.mz-company-info__grid {
  display: grid !important;

  /*
   * 左：会社概要
   * 右：ACCESS
   */
  grid-template-columns:
    minmax(0, 0.94fr)
    minmax(0, 1.06fr) !important;

  align-items: start !important;

  gap: 64px !important;
}


/* =========================================================
   12. COMPANY PROFILE
========================================================= */

.mz-company-profile {
  width: 100%;

  margin: 0;

  justify-self: start;
}

.mz-company-profile .mz-company-heading {
  margin-left: 0;
}

.mz-company-profile__table {
  width: 100%;

  border-top: 1px solid var(--mz-line);
}

.mz-company-profile__table > div {
  display: grid;

  grid-template-columns:
    125px
    minmax(0, 1fr);

  border-bottom: 1px solid var(--mz-line);
}

.mz-company-profile dt,
.mz-company-profile dd {
  padding: 9px 10px;

  font-size: 11.5px;

  line-height: 1.6;
}

.mz-company-profile dt {
  color: #455254;

  font-weight: 600;
}

.mz-company-profile dd {
  color: #616c6e;
}


/* =========================================================
   13. ACCESS
========================================================= */

.mz-company-access {
  width: 100%;

  margin: 0;
}

.mz-company-access__grid {
  display: grid !important;

  grid-template-columns:
    repeat(2, minmax(0, 1fr)) !important;

  gap: 20px;
}

.mz-company-access__item h3 {
  margin-bottom: 6px;

  color: #283c40;

  font-family:
    "Noto Sans JP",
    sans-serif;

  font-size: 12px;
  font-weight: 600;
}

.mz-company-access__item > p {
  min-height: 49px;

  margin-bottom: 11px;

  color: #687375;

  font-size: 10.5px;

  line-height: 1.65;
}

.mz-company-access iframe {
  display: block;

  width: 100%;
  height: 190px;

  border: 0;

  filter:
    grayscale(88%)
    contrast(0.9);
}


/* =========================================================
   14. CTA
========================================================= */

.mz-company-cta {
  position: relative;

  overflow: hidden;

  min-height: 168px;

  background:
    url(
      "https://mizuhobiso.jp/wp-content/uploads/2026/09/mizuho-biso-company-hero.png"
    )
    center 47% / cover no-repeat;
}

.mz-company-cta__shade {
  position: absolute;

  inset: 0;

  background:
    rgba(
      255,
      255,
      255,
      0.80
    );
}

.mz-company-cta__inner {
  position: relative;

  z-index: 2;

  /*
   * 左右を1つのまとまりにする
   */
  display: grid;

  grid-template-columns:
    minmax(0, 1fr)
    335px;

  align-items: center;

  gap: 44px;

  width: 100%;
  max-width: 920px;

  min-height: 168px;

  margin-left: auto;
  margin-right: auto;
}

.mz-company-cta__text {
  text-align: left;
}

.mz-company-cta__en {
  margin-bottom: 7px;

  color: #768183;

  font-family: Arial, sans-serif;

  font-size: 9px;

  letter-spacing: 0.22em;
}

.mz-company-cta h2 {
  margin-bottom: 7px;

  color: #263a3f;

  font-size: clamp(20px, 1.9vw, 27px);
  font-weight: 400;

  line-height: 1.55;

  letter-spacing: 0.075em;
}

.mz-company-cta__lead {
  color: #687375;

  font-size: 10.5px;

  line-height: 1.7;
}


/* =========================================================
   15. CTA BUTTON
   濃紺BOXはこれ1個だけ
========================================================= */

.mz-company-cta__button {
  display: flex !important;

  align-items: center !important;
  justify-content: space-between !important;

  width: 100% !important;
  min-height: 84px !important;

  margin: 0 !important;

  padding:
    0
    30px !important;

  color: #ffffff !important;

  background:
    var(--mz-dark) !important;

  border: 0 !important;
  border-radius: 0 !important;

  box-shadow: none !important;

  text-decoration: none !important;

  transition:
    background 0.25s ease,
    transform 0.25s ease;
}

.mz-company-cta__button::before,
.mz-company-cta__button::after {
  display: none !important;

  content: none !important;
}

.mz-company-cta__button span {
  margin: 0 !important;
  padding: 0 !important;

  color: #ffffff !important;

  background: transparent !important;

  border: 0 !important;

  box-shadow: none !important;
}

.mz-company-cta__buttonText {
  font-size: 18px !important;
  font-weight: 500;

  line-height: 1.4;

  letter-spacing: 0.075em;
}

.mz-company-cta__arrow {
  font-family: Arial, sans-serif;

  font-size: 24px !important;

  line-height: 1;
}

.mz-company-cta__button:hover {
  color: #ffffff !important;

  background:
    #203e46 !important;

  transform:
    translateY(-2px);
}


/* =========================================================
   16. DESKTOP / TABLET
   760px以上は
   VALUES 4列
   PROFILE + ACCESS 左右
========================================================= */

@media (min-width: 760px) {

  .mz-company-values__grid {
    display: grid !important;

    grid-template-columns:
      repeat(4, minmax(0, 1fr)) !important;
  }


  .mz-company-info__grid {
    display: grid !important;

    grid-template-columns:
      minmax(0, 0.94fr)
      minmax(0, 1.06fr) !important;
  }


  .mz-company-access__grid {
    display: grid !important;

    grid-template-columns:
      repeat(2, minmax(0, 1fr)) !important;
  }

}


/* =========================================================
   17. MID SIZE
   760px - 980px
========================================================= */

@media (min-width: 760px) and (max-width: 980px) {

  #content .l-content,
  #content .l-container {
    width:
      calc(
        100% - 36px
      ) !important;
  }


  /* HERO */

  .mz-company-hero__inner {
    grid-template-columns:
      minmax(225px, 0.72fr)
      minmax(0, 1.28fr);

    gap: 32px;
  }

  .mz-company-hero__image img {
    height: 350px;
  }


  /* ABOUT */

  .mz-company-about__grid {
    grid-template-columns:
      1.05fr
      0.95fr;

    gap: 34px;
  }


  /* MESSAGE */

  .mz-company-message__grid {
    grid-template-columns:
      1.18fr
      0.82fr;

    gap: 28px;
  }

  .mz-company-message__photo {
    width: 230px;
  }


  /* VALUES
     4列維持 */

  .mz-company-value {
    padding: 0 11px;
  }

  .mz-company-value h3 {
    font-size: 13px;
  }

  .mz-company-value > p {
    min-height: 52px;

    font-size: 9px;
  }


  /* COMPANY + ACCESS
     左右維持 */

  .mz-company-info__grid {
    gap: 30px !important;
  }

  .mz-company-profile__table > div {
    grid-template-columns:
      95px
      minmax(0, 1fr);
  }

  .mz-company-profile dt,
  .mz-company-profile dd {
    font-size: 9.5px;
  }

  .mz-company-access__grid {
    gap: 10px;
  }

  .mz-company-access iframe {
    height: 155px;
  }


  /* CTA */

  .mz-company-cta__inner {
    max-width: 760px;

    grid-template-columns:
      minmax(0, 1fr)
      285px;

    gap: 28px;
  }

}


/* =========================================================
   18. MOBILE
========================================================= */

@media (max-width: 759px) {

  #content .l-content,
  #content .l-container {
    width:
      calc(
        100% - 36px
      ) !important;
  }


  /* COMMON */

  .mz-company-heading {
    margin-bottom: 29px;

    padding-left: 16px;
  }

  .mz-company-heading h2 {
    font-size: 26px;
  }


  /* HERO */

  .mz-company-hero {
    padding:
      31px
      0
      57px;
  }

  .mz-company-hero__inner {
    display: flex;

    flex-direction: column;

    gap: 32px;
  }

  .mz-company-hero__title {
    font-size: 39px;
  }

  .mz-company-hero__copy {
    margin-top: 26px;

    font-size: 21px;
  }

  .mz-company-hero__image img {
    height: auto;

    aspect-ratio: 4 / 3;
  }


  /* ABOUT */

  .mz-company-about {
    padding:
      56px
      0
      62px;
  }

  .mz-company-about__grid {
    display: flex;

    flex-direction: column;

    gap: 34px;
  }

  .mz-company-about__content {
    max-width: none;
  }

  .mz-company-about__image figcaption {
    font-size: 16px;
  }


  /* MESSAGE */

  .mz-company-message {
    padding:
      56px
      0
      62px;
  }

  .mz-company-message__grid {
    display: flex;

    flex-direction: column;

    gap: 36px;
  }

  .mz-company-message__photo {
    width: 72%;
    max-width: 280px;

    margin-left: 0;
    margin-right: auto;
  }

  .mz-company-message__company {
    font-size: 19px;
  }

  .mz-company-message__representative {
    font-size: 15px;
  }


  /* VALUES
     スマホのみ2列 */

  .mz-company-values {
    padding:
      56px
      0
      60px;
  }

  .mz-company-values__grid {
    grid-template-columns:
      repeat(2, minmax(0, 1fr)) !important;

    gap:
      40px
      0 !important;
  }

  .mz-company-value {
    padding:
      0
      13px;
  }

  .mz-company-value:nth-child(odd) {
    padding-left: 0;
  }

  .mz-company-value:nth-child(even) {
    padding-right: 0;

    border-right: 0;
  }


  /* INFO
     スマホのみ縦 */

  .mz-company-info {
    padding:
      40px
      0
      58px;
  }

  .mz-company-info__grid {
    display: block !important;
  }

  .mz-company-access {
    margin-top: 55px;
  }

  .mz-company-profile__table > div {
    grid-template-columns:
      105px
      minmax(0, 1fr);
  }

  .mz-company-access__grid {
    grid-template-columns:
      1fr !important;

    gap: 30px;
  }

  .mz-company-access iframe {
    height: 220px;
  }


  /* CTA */

  .mz-company-cta__inner {
    display: block;

    width:
      calc(
        100% - 36px
      );

    min-height: 0;

    padding:
      35px
      0;
  }

  .mz-company-cta h2 {
    font-size: 20px;
  }

  .mz-company-cta__button {
    min-height: 74px !important;

    margin-top:
      25px !important;
  }

  .mz-company-cta__buttonText {
    font-size: 16px !important;
  }

}


/* =========================================================
   19. SMALL MOBILE
========================================================= */

@media (max-width: 450px) {

  .mz-company-values__grid {
    grid-template-columns:
      1fr !important;

    gap: 38px !important;
  }

  .mz-company-value,
  .mz-company-value:nth-child(odd),
  .mz-company-value:nth-child(even) {
    padding: 0;

    border-right: 0;
  }

  .mz-company-value > p {
    min-height: 0;
  }

  .mz-company-value img {
    aspect-ratio: 16 / 9;
  }

}
/* Company hero: no extra gap below the breadcrumb. 2026-11-04 */
#body_wrap.page-id-70 #content { padding-top:0 !important; }
.mz-company .mz-company-hero { margin-top:0 !important; padding-top:0 !important; }

/* Company representative and equal value photos. 2026-11-04 */
body .mz-company .mz-company-value { display:flex; flex-direction:column; }
body .mz-company .mz-company-value figure { width:100%; aspect-ratio:3 / 2; margin: auto 0 0; overflow:hidden; }
body .mz-company .mz-company-value figure img { display:block; width:100%; height:100% !important; aspect-ratio:auto !important; object-fit:cover; }
@media (min-width:760px) {
  body .mz-company .mz-company-value { padding-left:22px; padding-right:22px; }
  body .mz-company .mz-company-value:last-child { border-right:1px solid transparent; }
}
@media (min-width:760px) and (max-width:980px) {
  body .mz-company .mz-company-value { padding-left:11px; padding-right:11px; }
}

@media (min-width:451px) and (max-width:759px) {
  body .mz-company .mz-company-value:nth-child(even) { border-right:1px solid transparent; }
}