/* エンジニアリングモールニュースページ専用CSS */

/* 記事全体の背景色を無色に設定（singles.cssの薄オレンジ色を上書き） */
/* 複数のセレクタパターンに対応（body class、wrapper class、page template） */
.engineering-mall-page .engineering-mall-news article,
.engineering-mall-page .engineering-mall-news .hentry,
.engineering-mall-page #engineering-mall-news-content article,
.engineering-mall-page #engineering-mall-news-content .hentry,
body.engineering-mall-page .content-area.engineering-mall-news article,
body.engineering-mall-page .content-area.engineering-mall-news .hentry,
body.engineering-mall-page #engineering-mall-news-content article,
body.engineering-mall-page #engineering-mall-news-content .hentry,
body.page-template-page-engineering_mall-news .content-area article,
body.page-template-page-engineering_mall-news .content-area .hentry,
body.page-template-page-engineering_mall-news #engineering-mall-news-content article,
body.page-template-page-engineering_mall-news #engineering-mall-news-content .hentry {
  background-color: transparent !important; /* 親要素の背景色（グレー）を表示 */
  padding: 0 !important;
  border-radius: 0 !important;
  max-width: 100% !important; /* 親要素の幅いっぱいに */
  margin: 0 auto !important;
  box-shadow: none !important;
}

/* 記事コンテンツエリア全体の背景色 */
.engineering-mall-page #engineering-mall-news-content,
body.engineering-mall-page #engineering-mall-news-content,
body.page-template-page-engineering_mall-news #engineering-mall-news-content {
  background-color: transparent !important; /* 親要素の背景色（グレー）を表示 */
  max-width: 100% !important; /* 親要素の幅いっぱいに */
  margin: 0 auto !important;
  width: 100% !important;
  padding: 0 !important;
}

/* article要素も透明にして親要素のグレー背景を表示 */
.engineering-mall-page #engineering-mall-news-content article,
.engineering-mall-page #engineering-mall-news-content .hentry {
  background-color: transparent !important;
  width: 100% !important;
  max-width: 100% !important;
}

/* entry-headerの背景色とレイアウトを修正 */
.engineering-mall-page .engineering-mall-news .entry-header,
.engineering-mall-page .engineering-mall-news .hentry .entry-header,
body.engineering-mall-page .site .site-content .wrap .content-area .site-main .hentry .entry-header,
body.engineering-mall-page .content-area.engineering-mall-news .entry-header,
body.engineering-mall-page .content-area.engineering-mall-news .hentry .entry-header,
body.page-template-page-engineering_mall-news .content-area .entry-header,
body.page-template-page-engineering_mall-news .content-area .hentry .entry-header,
body.engineering-mall-page #engineering-mall-news-content .entry-header,
body.engineering-mall-page #engineering-mall-news-content .hentry .entry-header {
  background-color: #bddafa !important; /* 薄い青色の背景 */
  background: #bddafa !important; /* singles.cssの#fff7e3を上書き */
  padding: 30px 20px 20px !important;
  padding-bottom: 20px !important;
  margin: 0 auto !important;
  border-radius: 0 !important;
  max-width: 1280px !important; /* メニュー幅（1600px）の80% */
  width: 80% !important;
}

/* entry-header内のcategoryラベルのスタイル */
.engineering-mall-page .engineering-mall-news .entry-header .category,
.engineering-mall-page .engineering-mall-news .hentry .entry-header .category,
body.engineering-mall-page .site .site-content .wrap .content-area .site-main .hentry .entry-header .category {
  background-color: #194373 !important; /* 濃い青色 */
  background: #194373 !important; /* singles.cssの#f8b500を上書き */
  width: auto !important;
  line-height: normal !important;
  text-align: center !important;
  color: #fff !important;
  padding: 5px 15px !important;
  font-size: 14px !important;
  border-radius: 3px !important;
  margin-bottom: 15px !important;
  display: inline-block !important;
}

/* entry-header内のdateのスタイル */
.engineering-mall-page .engineering-mall-news .entry-header .date,
.engineering-mall-page .engineering-mall-news .hentry .entry-header .date,
body.engineering-mall-page .site .site-content .wrap .content-area .site-main .hentry .entry-header .date {
  width: auto !important;
  margin: 0 0 15px 0 !important;
  border-bottom: none !important;
  font-size: 16px !important;
  padding-bottom: 0 !important;
  color: #666 !important;
  display: block !important;
}

/* entry-titleのスタイル */
.engineering-mall-page .engineering-mall-news .entry-title,
.engineering-mall-page .engineering-mall-news .hentry .entry-title,
body.engineering-mall-page .site .site-content .wrap .content-area .site-main .hentry .entry-header .entry-title {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  font-size: 28px !important;
  color: #333 !important;
  font-weight: bold !important;
  line-height: 1.5 !important;
  padding: 0 !important;
  display: block !important;
}

/* entry-contentのスタイル */
.engineering-mall-page .engineering-mall-news .entry-content,
.engineering-mall-page .engineering-mall-news .hentry .entry-content,
body.engineering-mall-page .site .site-content .wrap .content-area .site-main .hentry .entry-content,
body.engineering-mall-page .content-area.engineering-mall-news .entry-content,
body.engineering-mall-page .content-area.engineering-mall-news .hentry .entry-content,
body.page-template-page-engineering_mall-news .content-area .entry-content,
body.page-template-page-engineering_mall-news .content-area .hentry .entry-content,
body.engineering-mall-page #engineering-mall-news-content .entry-content,
body.engineering-mall-page #engineering-mall-news-content .hentry .entry-content {
  font-size: 16px !important;
  color: #333 !important;
  background-color: #ffffff !important; /* 背景色を白（無色）に設定 */
  background: #ffffff !important;
  padding: 20px 20px 40px !important; /* singles.cssのpadding: 50px 130px 80px 130pxを上書き */
  margin: 0 auto !important;
  max-width: 1280px !important; /* メニュー幅（1600px）の80% */
  width: 80% !important;
  line-height: 2.0 !important;
}

.engineering-mall-page .engineering-mall-news .entry-content p {
  margin-bottom: 20px !important;
  font-size: 16px !important;
}

.engineering-mall-page .engineering-mall-news .entry-content p span {
  font-size: 16px !important;
}

.engineering-mall-page .engineering-mall-news .entry-content img {
  max-width: 100% !important;
  height: auto !important;
  display: block !important;
  margin: 20px auto !important;
}

.engineering-mall-page .engineering-mall-news .entry-content img.aligncenter {
  display: block !important;
  margin: 20px auto !important;
  float: none !important;
}

.engineering-mall-page .engineering-mall-news .entry-content img.alignnone {
  display: block !important;
  margin: 20px auto !important;
  float: none !important;
}

/* 画像ラッパーのスタイル */
.engineering-mall-page .engineering-mall-news .entry-content .news-image-wrapper,
body.engineering-mall-page .entry-content .news-image-wrapper,
body.page-template-page-engineering_mall-news .entry-content .news-image-wrapper,
body.engineering-mall-page #engineering-mall-news-content .entry-content .news-image-wrapper {
  text-align: center !important;
  margin: 30px 0 !important;
}

.engineering-mall-page .engineering-mall-news .entry-content .news-image-wrapper img,
body.engineering-mall-page .entry-content .news-image-wrapper img,
body.page-template-page-engineering_mall-news .entry-content .news-image-wrapper img,
body.engineering-mall-page #engineering-mall-news-content .entry-content .news-image-wrapper img {
  width: 60% !important;
  height: auto !important;
  max-width: 800px !important;
  display: block !important;
  margin: 0 auto !important;
}

/* 画像キャプションのスタイル */
.engineering-mall-page .engineering-mall-news .entry-content .news-image-caption,
body.engineering-mall-page .entry-content .news-image-caption,
body.page-template-page-engineering_mall-news .entry-content .news-image-caption,
body.engineering-mall-page #engineering-mall-news-content .entry-content .news-image-caption {
  text-align: center !important;
  font-size: 16px !important;
  margin-top: 10px !important;
  color: #333 !important;
}

/* 画像プレースホルダーのスタイル */
.engineering-mall-page .engineering-mall-news .entry-content .news-image-placeholder,
body.engineering-mall-page .entry-content .news-image-placeholder,
body.page-template-page-engineering_mall-news .entry-content .news-image-placeholder,
body.engineering-mall-page #engineering-mall-news-content .entry-content .news-image-placeholder {
  background-color: #f0f0f0 !important;
  padding: 100px 20px !important;
  margin: 0 auto !important;
  max-width: 800px !important;
  border: 2px dashed #ccc !important;
}

.engineering-mall-page .engineering-mall-news .entry-content .news-image-placeholder p,
body.engineering-mall-page .entry-content .news-image-placeholder p,
body.page-template-page-engineering_mall-news .entry-content .news-image-placeholder p,
body.engineering-mall-page #engineering-mall-news-content .entry-content .news-image-placeholder p {
  color: #666 !important;
  font-size: 18px !important;
  margin: 0 !important;
}

.engineering-mall-page .engineering-mall-news .entry-content .news-image-placeholder .news-image-filename,
body.engineering-mall-page .entry-content .news-image-placeholder .news-image-filename,
body.page-template-page-engineering_mall-news .entry-content .news-image-placeholder .news-image-filename,
body.engineering-mall-page #engineering-mall-news-content .entry-content .news-image-placeholder .news-image-filename {
  color: #999 !important;
  font-size: 14px !important;
  margin-top: 10px !important;
}

/* entry-metaのスタイル（1枚目のレイアウトに合わせて縦並びに） */
.engineering-mall-page .engineering-mall-news .entry-meta,
.engineering-mall-page .engineering-mall-news .hentry .entry-meta {
  display: block !important;
  margin-bottom: 15px !important;
}

.engineering-mall-page .engineering-mall-news .entry-meta .category,
.engineering-mall-page .engineering-mall-news .hentry .entry-meta .category {
  display: inline-block !important;
  margin-bottom: 15px !important;
}

.engineering-mall-page .engineering-mall-news .entry-meta .date,
.engineering-mall-page .engineering-mall-news .hentry .entry-meta .date {
  display: block !important;
  margin-bottom: 15px !important;
}

/* content-areaの背景色をグレーに設定（上下左右の余白） */
.engineering-mall-page .engineering-mall-news .content-area,
body.engineering-mall-page .site .site-content .wrap .content-area,
body.engineering-mall-page .content-area.engineering-mall-news,
body.page-template-page-engineering_mall-news .content-area {
  background: #ededed !important; /* グレー色の背景 */
  margin-bottom: 0 !important;
  padding: 30px 0 !important; /* 上下の余白 */
}

.engineering-mall-page .engineering-mall-news .site-main,
body.engineering-mall-page .site .site-content .wrap .content-area .site-main {
  width: 100% !important;
  margin: 0 auto !important;
  padding: 0 !important; /* singles.cssのpadding: 40px 0を上書き */
  max-width: 1600px !important;
}

/* メニューの下に余白を追加 */
.engineering-mall-page .engineering-mall-news .engineering-mall-header {
  margin-bottom: 30px !important;
}

.engineering-mall-page .wrap-breadcrumb.engineering-mall-news {
  margin: 0;
  margin-top: 30px !important; /* メニューの下に余白 */
}

.engineering-mall-page .wrap-main-img.engineering-mall-news {
  margin-bottom: 0;
}

/* お知らせコンテンツの周りにグレー色の余白を追加 */
.engineering-mall-page .engineering-mall-news .content-area {
  background-color: #ededed !important; /* グレー色の背景 */
  padding: 30px 0 !important; /* 上下の余白 */
  margin: 0 !important;
}

.engineering-mall-page #engineering-mall-news-content {
  background-color: transparent !important;
  max-width: 1600px !important;
  margin: 0 auto !important;
  padding: 0 !important; /* 左右の余白はentry-headerとentry-contentで制御 */
}

/* パンくずリストとページタイトルもグレー背景の中に含める */
.engineering-mall-page .engineering-mall-news .wrap-breadcrumb.engineering-mall-news {
  background-color: #ededed !important; /* グレー色の背景 */
  margin: 0 !important;
  padding: 15px 0 !important; /* 上下の余白 */
}

.engineering-mall-page .engineering-mall-news .wrap-main-img.engineering-mall-news {
  background-color: #ededed !important; /* グレー色の背景 */
  margin: 0 !important;
  padding: 0 !important;
}

.engineering-mall-page .engineering-mall-news .wrap-breadcrumb.engineering-mall-news .breadcrumb {
  max-width: 1600px !important;
  margin: 0 auto !important;
  padding: 0 20px !important; /* 左右の余白 */
}

.engineering-mall-page .engineering-mall-news .wrap-main-img.engineering-mall-news .main-img {
  max-width: 1600px !important;
  margin: 0 auto !important;
  padding: 30px 20px !important; /* 上下左右の余白 */
}

/* 前/次のナビゲーション */
.engineering-mall-page .engineering-mall-news-navigation,
body.engineering-mall-page .engineering-mall-news-navigation,
body.page-template-page-engineering_mall-news .engineering-mall-news-navigation {
  max-width: 1600px !important;
  margin: 40px auto 0 !important;
  padding: 0 20px 40px !important;
}

.engineering-mall-page .engineering-mall-news-nav-inner,
body.engineering-mall-page .engineering-mall-news-nav-inner,
body.page-template-page-engineering_mall-news .engineering-mall-news-nav-inner {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 15px !important;
  flex-wrap: wrap !important;
}

.engineering-mall-page .engineering-mall-news-navigation a:hover,
body.engineering-mall-page .engineering-mall-news-navigation a:hover,
body.page-template-page-engineering_mall-news .engineering-mall-news-navigation a:hover {
  opacity: 0.8 !important;
  text-decoration: none !important;
}

.engineering-mall-page .engineering-mall-news-navigation .nav-prev-link,
.engineering-mall-page .engineering-mall-news-navigation .nav-next-link,
body.engineering-mall-page .engineering-mall-news-navigation .nav-prev-link,
body.engineering-mall-page .engineering-mall-news-navigation .nav-next-link,
body.page-template-page-engineering_mall-news .engineering-mall-news-navigation .nav-prev-link,
body.page-template-page-engineering_mall-news .engineering-mall-news-navigation .nav-next-link {
  transition: opacity 0.3s !important;
}

/* ページ番号のスタイル */
.engineering-mall-page .engineering-mall-news-page-numbers,
body.engineering-mall-page .engineering-mall-news-page-numbers,
body.page-template-page-engineering_mall-news .engineering-mall-news-page-numbers {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin: 0 10px !important;
}

.engineering-mall-page .engineering-mall-news-page-number,
body.engineering-mall-page .engineering-mall-news-page-number,
body.page-template-page-engineering_mall-news .engineering-mall-news-page-number {
  display: inline-block !important;
  min-width: 32px !important;
  height: 32px !important;
  line-height: 32px !important;
  text-align: center !important;
  background-color: #f0f0f0 !important;
  color: #194373 !important;
  border-radius: 4px !important;
  font-size: 14px !important;
  font-weight: bold !important;
  text-decoration: none !important;
  transition: background-color 0.3s !important;
  cursor: pointer !important;
}

.engineering-mall-page .engineering-mall-news-page-number:hover,
body.engineering-mall-page .engineering-mall-news-page-number:hover,
body.page-template-page-engineering_mall-news .engineering-mall-news-page-number:hover {
  background-color: #d0d0d0 !important;
}

.engineering-mall-page .engineering-mall-news-page-number.current,
body.engineering-mall-page .engineering-mall-news-page-number.current,
body.page-template-page-engineering_mall-news .engineering-mall-news-page-number.current {
  background-color: #194373 !important;
  color: #fff !important;
  cursor: default !important;
}

/* スマホ版 */
@media screen and (max-width: 750px) {
  .engineering-mall-page .engineering-mall-news .entry-header {
    padding: 20px 15px 15px !important;
  }
  
  .engineering-mall-page .engineering-mall-news .entry-title {
    font-size: 22px !important;
  }
  
  .engineering-mall-page .engineering-mall-news .entry-content {
    padding: 0 15px 30px !important;
    font-size: 14px;
  }
  
  .engineering-mall-page .engineering-mall-news .entry-meta {
    flex-direction: column;
    align-items: flex-start !important;
    gap: 10px !important;
  }
}