/* layout.css — 最終読み込み。全レイアウトルールを上書き */

/* =========================================
   PC: コンテンツレイアウト (769px以上)
   ========================================= */
@media screen and (min-width: 769px) {

  /* --- ヒーロー: サブページ中央配置 --- */
  .block_main:not(.is_top) {
    min-height: 560px !important;
  }
  .block_main:not(.is_top) .img_main,
  .block_main:not(.is_top) .bg_red,
  .block_main:not(.is_top) .info_main {
    min-height: 560px !important;
    height: 560px !important;
  }
  .block_main:not(.is_top) .info_main .txt_main,
  .block_main:not(.is_top) .info_main .txt_main.sub {
    top: 50% !important;
    left: 50% !important;
    right: auto !important;
    transform: translate(-50%, -50%) !important;
    width: min(80%, 860px) !important;
    text-align: center !important;
  }
  .block_main:not(.is_top) .info_main {
    color: #fff !important;
  }
  .block_main:not(.is_top) .info_main .txt_main .title_main {
    color: #fff !important;
    text-shadow: 0 1px 8px rgba(0,0,0,0.3);
  }
  .block_main:not(.is_top) .info_main .txt_main .title_main,
  .block_main:not(.is_top) .info_main .txt_main p,
  .block_main:not(.is_top) .info_main .txt_main p.size_medium,
  .block_main:not(.is_top) .info_main .txt_main p.title_copy {
    text-align: center !important;
    color: #fff !important;
  }
  .block_main:not(.is_top) .info_main .txt_main p.size_medium {
    text-shadow: 0 1px 4px rgba(0,0,0,0.25);
  }
  .block_main:not(.is_top) .info_main .txt_main p.title_copy {
    color: rgba(255,255,255,0.85) !important;
  }
  .block_main:not(.is_top) .info_main .txt_main p.title_copy:before {
    background: rgba(255,255,255,0.6) !important;
  }

  /* --- block_intro: flex外 = フル幅 + 中央寄せ --- */
  .wrapper > .content > section > .block_intro,
  .area_sub .content > section > .block_intro,
  .area_business .inner > section > .block_intro {
    width: 100% !important;
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-top: 48px !important;
    text-align: center !important;
  }

  /* title_intro: ブロック化 + 中央テキスト + 下線 */
  .wrapper > .content > section > .block_intro > .title_intro,
  .area_sub .content > section > .block_intro > .title_intro,
  .area_business .inner > section > .block_intro > .title_intro {
    display: block !important;
    text-align: center !important;
    border-bottom: 1px solid rgba(20,20,20,.12) !important;
    padding-bottom: 14px !important;
    margin-bottom: 28px !important;
  }
  .wrapper > .content > section > .block_intro > .title_intro:after,
  .area_sub .content > section > .block_intro > .title_intro:after,
  .area_business .inner > section > .block_intro > .title_intro:after {
    display: none !important;
  }

  /* title_head: fit-content + margin auto = 中央配置 */
  .wrapper > .content > section > .block_intro > .title_head,
  .wrapper > .content > section > .title_head,
  .area_sub .content > section > .block_intro > .title_head,
  .area_sub .content > section .title_head,
  .area_business .inner > section > .block_intro > .title_head,
  .area_business .inner > section .title_head,
  .area_business .inner > .title_head,
  .area_recruit .inner .title_head {
    display: block !important;
    width: fit-content !important;
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: left !important;
  }

  /* 本文 p/ul/ol: max-width制限 + 中央ブロック + 左テキスト */
  .wrapper > .content > section > .block_intro > p,
  .wrapper > .content > section > .block_intro > ul,
  .wrapper > .content > section > .block_intro > ol,
  .area_sub .content > section > .block_intro > p,
  .area_sub .content > section > .block_intro > ul,
  .area_business .inner > section > .block_intro > p,
  .area_business .inner > section > .block_intro > ul {
    max-width: 760px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: left !important;
  }
  .block_intro .maestro-cards p { text-align: center !important; max-width: none !important; }
  .block_intro .maestro-cards .maestro-bio { text-align: left !important; }

  /* --- flex内 block_intro (TOPページ): 2カラム維持 --- */
  .flex > .block_intro {
    width: 54% !important;
    text-align: left !important;
  }
  .flex > .block_intro > .title_intro {
    display: inline-block !important;
    text-align: left !important;
    border-bottom: none !important;
  }
  .flex > .block_intro > .title_intro:after {
    display: block !important;
  }
  .flex > .block_intro > p,
  .flex > .block_intro > ul {
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}

/* =========================================
   MOBILE: ≤768px — 全て左寄せに戻す
   ========================================= */
@media screen and (max-width: 768px) {
  .wrapper > .content > section > .block_intro,
  .area_sub .content > section > .block_intro,
  .area_business .inner > section > .block_intro {
    text-align: left !important;
    padding-top: 20px !important;
  }
  .wrapper > .content > section > .block_intro > .title_intro,
  .area_sub .content > section > .block_intro > .title_intro,
  .area_business .inner > section > .block_intro > .title_intro {
    display: block !important;
    text-align: left !important;
    border-bottom: none !important;
  }
  .wrapper > .content > section > .block_intro > .title_intro:after,
  .area_sub .content > section > .block_intro > .title_intro:after {
    display: block !important;
  }
  .wrapper > .content > section > .block_intro > p,
  .wrapper > .content > section > .block_intro > ul,
  .wrapper > .content > section > .block_intro > ol,
  .area_sub .content > section > .block_intro > p,
  .area_business .inner > section > .block_intro > p {
    max-width: none !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  .wrapper > .content > section > .block_intro > .title_head,
  .wrapper > .content > section > .title_head,
  .area_sub .content > section .title_head,
  .area_business .inner .title_head,
  .area_recruit .inner .title_head {
    width: auto !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}

/* SP: ヒーローの下に出る灰色を解消（高さを内容にフィット） */
@media screen and (max-width: 768px) {
  .block_main,
  .block_main.is_top {
    min-height: 0 !important;
    height: auto !important;
  }
  .block_main .info_main,
  .block_main.is_top .info_main {
    min-height: 0 !important;
    padding-top: 80px !important;
    padding-bottom: 24px !important;
  }
  .block_main .img_main,
  .block_main .img_main.bg_red {
    height: 100% !important;
    min-height: 0 !important;
  }
}

/* SP: ヒーロー全体を白背景に統一して、obj_main 周りの灰色を消す */
@media screen and (max-width: 768px) {
  .block_main.is_top {
    background: #ffffff !important;
  }
  .block_main.is_top .info_main {
    background: #ffffff !important;
    padding-top: 80px !important;
    padding-bottom: 0 !important;
  }
  .block_main.is_top .info_main .obj_main {
    margin: 16px auto 0 !important;
    display: block !important;
  }
}

/* SP: 全体背景の灰色／クリームを白に統一 */
@media screen and (max-width: 768px) {
  body {
    background: #ffffff !important;
  }
  body > section,
  .wrapper,
  .wrapper > .content {
    background: #ffffff !important;
  }
  .wrapper {
    padding-top: 0 !important;
  }
}

/* SP: 画像の下に出るグレーの縁/帯を消す
   原因: .business_section の border + box-shadow、.list_press li の border-bottom */
@media (max-width: 768px) {
  .business_section {
    border: none !important;
    box-shadow: none !important;
  }
  .list_press li {
    border-bottom: none !important;
  }
  .biz-card {
    box-shadow: none !important;
    border: none !important;
  }
  .biz-card img {
    display: block !important;
    vertical-align: bottom !important;
    margin-bottom: 12px !important;
  }
  /* HTML内インラインの薄グレー背景を白に上書き */
  [style*="background:#f9f9f9"],
  [style*="background-color:#f9f9f9"],
  [style*="background: #f9f9f9"],
  [style*="background:#f8f8f8"],
  [style*="background:#fafafa"] {
    background: #ffffff !important;
  }
  /* hero と コンテンツの間に出るbody bgを白に */
  html, body { background: #ffffff !important; background-image: none !important; }
  article.wrapper, .area_sub { background: #ffffff !important; }
  /* hero下に出るグレー帯: img_main の padding-bottom と ::after を解除 */
  .block_main:not(.is_top) .img_main {
    padding-bottom: 0 !important;
  }
  .block_main .img_main::after {
    display: none !important;
  }
}