/* 静的公開（CENTOS_MIGRATION-280）での見た目の調整。元の style.css は変えずに上書きする */
@media (min-width: 1181px) {
  /* 左のメニューが画面に固定されるのは 1181px 以上のとき（それ以下はメニューボタンになる）。
     左はメニューの幅、右は「購読案内」「採用情報」のタブの幅だけ空け、
     残りの場所の中央に写真・本文・フッターをそろえる */
  .mt-main,
  footer {
    padding-left: 240px;
    padding-right: 64px;
  }
  .mt-topvisual-bottom,
  .mt-imagevisual-bottom,  /* 会社案内などの各ページの見出しの写真も、トップの写真と同じ位置にそろえる */
  nav.mt-container-inner.breadclumb {  /* ページの下のパンくず（トップ ＞ 〜）も本文の外にあるので、同じ位置にそろえる */
    position: relative; /* 写真の下のお知らせ欄を、この枠の中央に置くため */
    width: auto;
    max-width: none;
    margin-left: calc(240px + max(0px, (100% - 304px - 988px) / 2));
    margin-right: calc(64px + max(0px, (100% - 304px - 988px) / 2));
  }
}

/* フッターの規約・ポリシーへのリンク：項目の途中で折り返さず、入りきらない分は次の行へ送る */
.mt-footer-sub-nav-list {
  flex-wrap: wrap;
  row-gap: 8px;
}
.mt-footer-sub-nav-list-link {
  white-space: nowrap;
}
@media (max-width: 940px) {
  /* 元は右下に重ねて置いていたが、項目が増えたので通常の流れで下に並べる */
  .mt-footer-sub-nav {
    position: static;
    width: 100%;
    margin: 32px 0 0;
  }
  .mt-footer-sub-nav-list {
    flex-direction: row;
  }
}

/* Pickup・トピックスの画像：元画像の縦横比がまちまちなので、枠の形をそろえて中央で切り抜く */
.mt-pickup-list-image {
  aspect-ratio: 1 / 1;
  object-fit: cover;
}
.mt-topics-list-image {
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

/* トピックスのスライダーが左のメニューの下まではみ出さないよう、枠の中だけに表示する */
.mt-topics-section {
  overflow: hidden;
}

/* Pickup の大きな1枠目：正方形に切り抜くと文字が欠けるので、画像全体を枠の中に収める */
.mt-pickup-list > .mt-pickup-list-item > .mt-pickup-list-link .mt-pickup-list-image {
  object-fit: contain;
  background: #fff;
}

/* Story の建物の写真：幅が600px固定で、画面が狭いと説明文に重なるため、セクションの幅に合わせて縮める */
@media (min-width: 941px) {
  .mt-story-section:after {
    width: min(600px, 42%);
    background-size: auto 100%;
    background-position: left top;
  }
}

/* 停止中のお知らせの帯（トップだけ。大きな写真の上＝最初の画面に出す。停止中のお知らせページと同じ水色） */
.static-notice {
  margin: 0 0 16px;
  padding: 14px 24px;
  border: 2px solid #009ce2;
  border-radius: 12px;
  background: #f0f9fe;
  font-size: 1.4rem;
  line-height: 1.8;
}
.static-notice p {
  margin: 0;
}
.static-notice .static-notice-title {
  margin-bottom: 4px;
  color: #0077b0;
  font-size: 1.6rem;
  font-weight: bold;
}
@media (max-width: 1180px) {
  /* 上に固定されたロゴの帯の下から出す */
  .static-notice {
    margin: 70px 16px 12px;
    padding: 12px 16px;
    font-size: 1.3rem;
  }
  .static-notice .static-notice-title {
    font-size: 1.5rem;
  }
}

/* Pickup（PC）：スライダーは使わず、3枠を横に並べる（common.js で動かさないようにしてある） */
@media (min-width: 941px) {
  .mt-main-index .slider1 {
    display: block !important;
  }
  .mt-main-index .mt-pickup-list.swiper-wrapper {
    display: flex;
    align-items: flex-start;
    transform: none !important;
  }
  .mt-main-index .mt-pickup-list > .mt-pickup-list-item {
    flex: 1 1 0;
    width: auto !important;
    min-width: 0;
  }
  .mt-main-index .slider1 .swiper-button-prev,
  .mt-main-index .slider1 .swiper-button-next {
    display: none;
  }
}

/* トップ下の2つのバナー（新聞購読のご案内・河北新報オンライン）の大きさをそろえる。
   オンラインの枠は新着記事（PHP）が無くなって低くなったため、左の画像（460×195）と同じ比率の箱にして中身を中央に置く */
.mt-bannerarea-list {
  gap: 24px;
}
.mt-bannerarea-list-item {
  flex: 1 1 0;
  max-width: none;
}
.mt-banner-area-list-img {
  display: block;
  width: 100%;
  aspect-ratio: 460 / 195;
  object-fit: cover;
  border-radius: 10px;
}
.mt-bannerarea-list .news-feed {
  box-sizing: border-box;
  aspect-ratio: 460 / 195;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 16px;
}
.mt-bannerarea-list .news-feed__head {
  margin-bottom: 4px;
}
.mt-bannerarea-list .news-feed__head img {
  margin: 0 auto 8px !important;
}
.news-feed__lead {
  margin: 0;
  text-align: center;
  font-size: 1.4rem;
  line-height: 1.7;
}
.news-feed__lead a {
  color: #333;
  text-decoration: none;
}
@media (max-width: 740px) {
  .mt-bannerarea-list {
    flex-direction: column;
    gap: 16px;
  }
}

/* トップのトピックス：スライダーは使わず、6件を並べる（PC は3列×2段、スマホは2列×3段。common.js で動かさないようにしてある） */
.mt-main-index .mt-topics-list.swiper-wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px 16px;
  transform: none !important;
}
.mt-main-index .mt-topics-list > .mt-topics-list-item {
  width: auto !important;
  margin: 0 !important;
}
.mt-main-index .slider2 .swiper-pagination {
  display: none;
}
@media (max-width: 740px) {
  .mt-main-index .mt-topics-list.swiper-wrapper {
    grid-template-columns: repeat(2, 1fr);
    gap: 4px 12px;
  }
  .mt-main-index .slider2 {
    padding: 0 16px;
  }
}

/* 企業理念・詳細の、片側が画面の端まで伸びる帯（wl-100・wr-100）。元は画面の幅（100vw）で計算していたが、
   左のメニュー（240px）と右のタブ（64px）の分を空けたので、残りの幅で計算し直す（1181px 以上のとき） */
@media (min-width: 1181px) {
  .wl-100 {
    margin-right: max(0px, calc((100vw - 304px - 988px) / 2));
  }
  .wl-100 .mt-container-inner {
    margin-left: max(0px, calc((100vw - 304px - 988px) / 2));
  }
  .wr-100 {
    margin-left: max(0px, calc((100vw - 304px - 988px) / 2));
  }
  .wr-100 .mt-container-inner {
    margin-right: max(0px, calc((100vw - 304px - 988px) / 2));
  }
}

/* 規約系のページは、ページの中の指定（.mt-container-inner { padding: 0 100px; }）で本文を狭めている。
   これがフッターとパンくずにも効いて、フッターの列が足りなくなり（5列目が下に落ちる）、上下の余白も0になっていた。
   本文はそのまま、フッターとパンくずだけ元の余白（style.css と同じ）に戻す */
footer > .mt-container-inner,
nav.mt-container-inner.breadclumb {
  padding-left: 24px;
  padding-right: 24px;
}
footer > .mt-container-inner.mt-container-vertical {
  padding-top: 80px;
  padding-bottom: 80px;
}
@media (max-width: 740px) {
  footer > .mt-container-inner,
  nav.mt-container-inner.breadclumb {
    padding-left: 16px;
    padding-right: 16px;
  }
  footer > .mt-container-inner.mt-container-vertical {
    padding-top: 48px;
    padding-bottom: 48px;
  }
}