/* ============================
   IIJ 2509 固有スタイル
   （tu/article-template/common.css を前提とする）
   ============================ */

.tu-container.tu-200622iijmio{
  --color-main: #d05e80;  /* IIJカラーで--color-mainを上書き */
  background-image: url(../images/bg.png);
  background-repeat: repeat;
  background-size: auto;
  margin: 0;
  padding-block: 40px;
}
.tu-container .main-content{
  margin: 0 auto;
  max-width: 768px;
}

/* PRテキストのスタイル */
.tu-pr-line {
  margin-top: 15px;
  margin-bottom: 5px;
  font-size: 1.2rem;
  color: var(--color-third);
  font-weight: var(--font-bold-weight);
  text-align: right;
}

/* メインビジュアルのスタイル */
.tu-article .tu-main-visual {
  width: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

.tu-article .tu-main-visual img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: contain; /* 画像全体を表示（見切れない） */
}

/* 前後の記事ナビゲーション - IIJカラー上書き */
.tu-article-navigation .post-nav-label {
  color: var(--color-main);
}

/* IIJ記事では著作権表記と著者ボタンを非表示 */
.tu-200622iijmio .article-note,
.tu-200622iijmio .article-more-by-author {
  display: none;
}

/* ============================
   PR記事専用: メイン画像の見切れ防止（モバイル）
   ============================ */
.tu-container.tu-200622iijmio .article-hero--pr {
  height: auto;
}

.tu-container.tu-200622iijmio .article-hero--pr img {
  width: 100%;
  height: auto;
  object-fit: contain;
  object-position: center;
}

/* ============================
   レスポンシブ: タブレット・PC
   ============================ */
@media screen and (min-width: 768px) {
  /* アイキャッチ画像の表示修正（通常記事） */
  .tu-200622iijmio .article-hero {
    height: auto !important;
    display: block !important;
    position: static !important;
  }

  .tu-200622iijmio .article-hero img {
    position: static !important;
    transform: none !important;
    object-fit: cover;
  }

  /* PR記事専用: メイン画像の見切れ防止 */
  .tu-container.tu-200622iijmio .article-hero--pr {
    height: auto !important;
    display: block !important;
    position: static !important;
  }

  .tu-container.tu-200622iijmio .article-hero--pr img {
    width: 100%;
    height: auto !important;
    object-fit: contain !important;
    object-position: center;
    position: static !important;
    transform: none !important;
  }
}