/* ========================================
PHS ニュース 記事ページ共通スタイル
/phs/news/assets/css/article.css
======================================== */

/* ---- ラッパー ---- */
.article-wrap {
max-width: 980px;
margin: 0 auto;
padding: 0 15px;
font-family: 'Noto Sans JP', sans-serif;
font-size: 16px;
line-height: 1.8;
color: #333;
}

/* ---- パンくずリスト（記事内） ---- */
.article-breadcrumbs {
padding: 16px 0 0;
}
.article-breadcrumbs__list {
display: flex;
flex-wrap: wrap;
list-style: none !important;
padding: 0;
margin: 0;
font-size: 12px;
color: #666;
}
.article-breadcrumbs__item {
display: flex;
align-items: center;
}
.article-breadcrumbs__item::after {
content: ">";
margin: 0 6px;
color: #999;
}
.article-breadcrumbs__item:last-child::after {
display: none;
}
.article-breadcrumbs__item a {
color: #666;
text-decoration: none;
}
.article-breadcrumbs__item a:hover {
text-decoration: underline;
}

/* ---- 日付 ---- */
.article-date {
text-align: right;
padding: 30px 0 10px;
}
.article-date time {
font-size: 14px;
color: #666;
}

/* ---- タイトルブロック ---- */
.article-title-block {
margin-bottom: 30px;
padding-bottom: 20px;
border-bottom: 1px solid #ccc;
}
.article-subtitle-top {
font-size: 14px;
color: #666;
margin-bottom: 8px;
margin-top: 0;
}
.article-title-block h1 {
font-size: 26px;
font-weight: bold;
line-height: 1.5;
margin: 0 0 6px;
}
.article-subtitle-bottom {
font-size: 16px;
color: #444;
margin: 0;
}

/* ---- 本文エリア（タイトルより内側に余白） ---- */
.article-body {
padding: 0 30px;
}
.article-body p + p {
margin-top: 1em;
}
.article-body p.mt-0 {
margin-top: 0;
}

/* ---- リード文 ---- */
.article-lead {
margin-bottom: 30px;
}

/* ---- セクション（背景・概要など） ---- */
.article-section {
margin-bottom: 40px;
}
.article-section h2 {
font-size: 22px;
font-weight: bold;
margin-bottom: 16px;
padding: 2px 14px;
border-left: 4px solid #333;
}

/* h4 / h5 / h6（article-body 内共通） */
.article-body h4,
.article-body h5,
.article-body h6 {
font-size: 16px;
font-weight: bold;
margin-bottom: 8px;
}

/* ---- 特長セクション ---- */
.article-features {
margin-bottom: 40px;
}
/* 〈特長〉見出し */
.article-features__heading {
font-size: 24px;
font-weight: bold;
text-align: left;
margin-bottom: 10px;
}

/* 特長サマリーリスト（パターンA：数字） */
.article-feature-summary {
margin-bottom: 30px;
padding-left: 1.5em;
list-style-type: decimal !important;
font-size: 22px;
font-weight: bold;
line-height: 1.6;
}
.article-feature-summary > li {
margin-bottom: 16px;
}
/* 各特長の簡易説明（不要なら p ごと削除） */
.article-feature-summary > li > p {
font-size: 16px;
font-weight: normal;
color: #555;
margin: 4px 0 0;
line-height: 1.7;
}

/* 特長サマリーリスト（パターンB：ビュレット●） */
.article-feature-summary--bullet {
list-style: none !important;
padding-left: 0;
}
.article-feature-summary--bullet > li {
padding-left: 1.2em;
text-indent: -1.2em;
}

/* 特長サマリーリスト（パターンC：テキストのみ） */
.article-feature-summary--text {
list-style: none;
padding-left: 0;
}
.article-feature-summary--text > div {
margin-bottom: 16px;
}
.article-feature-summary--text > div > p:first-child {
margin-bottom: 0;
}
.article-feature-summary--text > div > p:last-child {
font-size: 16px;
font-weight: normal;
color: #555;
margin: 4px 0 0;
line-height: 1.7;
}

/* 【特長】ラベル見出し */
.article-features__label {
font-size: 24px;
font-weight: bold;
text-align: left;
margin: 40px 0 10px 0px;
}

/* 特長詳細ブロック */
.article-feature {
margin-bottom: 40px;
}
.article-feature h3 {
font-size: 22px;
font-weight: bold;
margin: 16px 0 ;
padding-bottom: 8px;
/* border-bottom: 2px solid #ccc; */
}
/* 特長の説明テキスト（不要なら p ごと削除） */
.article-feature > p {
margin-bottom: 12px;
}

/* サブ項目タイトル（● ○ など） */
.article-subitem-title {
font-weight: bold;
margin-bottom: 6px;
}
/* サブ項目リスト（● disc） */
.article-subitem-list {
margin-bottom: 16px;
padding-left: 1.5em;
list-style-type: disc !important;
}
.article-subitem-list li {
margin-bottom: 4px;
}
/* ネスト付きサブ項目のタイトル（インデントで親リストと区別） */
.article-subitem-title-nested {
font-weight: bold;
margin-bottom: 6px;
padding-left: 1.5em;
}

/* ネストされた子リスト */
.article-subitem-list ul {
margin-top: 4px;
padding-left: 1.5em;
list-style-type: circle !important;
}
.article-subitem-list ul li {
margin-bottom: 2px;
}

/* サブ項目リスト（・ 中点） */
.article-subitem-list-dot {
margin-bottom: 16px;
padding-left: 1.5em;
list-style: none;
}
.article-subitem-list-dot li {
margin-bottom: 4px;
padding-left: 1em;
text-indent: -1em;
}

/* ---- 製品概要テーブル ---- */
.article-table-title {
margin-bottom: 8px;
}
.article-table {
width: 100%;
border-collapse: collapse;
margin-bottom: 40px;
font-size: 15px;
}
.article-table th {
background: #f2f2f2;
border: 1px solid #ccc;
padding: 10px 16px;
width: 30%;
text-align: left;
font-weight: bold;
white-space: nowrap;
}
.article-table td {
border: 1px solid #ccc;
padding: 10px 16px;
}

/* ---- 脚注（不要な p は削除） ---- */
.article-footnotes {
margin-bottom: 40px;
font-size: 13px;
color: #555;
line-height: 1.8;
}
.article-footnotes p {
margin: 0 0 2px;
}
.article-footnotes p + p {
margin-top: 0;
}

/* ---- お問い合わせ先 ---- */
.article-contact {
margin-bottom: 40px;
}
.article-contact h2 {
font-size: 20px;
font-weight: bold;
margin-bottom: 14px;
letter-spacing: 0.05em;
}
.article-contact p {
/* margin-bottom: 4px; */
}
.article-contact p + p {
margin-top: 0;
}
.article-contact p:last-child {
margin-bottom: 0;
}

/* ---- リンク共通色 ---- */
.article-link {
color: #0058a3;
}

/* ---- 関連情報 ---- */
.article-related {
margin-bottom: 40px;
}
.article-related h2 {
font-size: 20px;
font-weight: bold;
margin-bottom: 16px;
/* padding-bottom: 6px; */
/* border-bottom: 2px solid #ccc; */
}
.article-related ul {
padding-left: 1.5em;
list-style-type: disc !important;
line-height: 1.6;
}
.article-related li {
margin-bottom: 12px;
}

/* ---- タグエリア（#カテゴリ #タグ） ---- */
.article-tags {
margin: 16px 0 20px;
padding-bottom: 16px;
border-bottom: 1px solid #ddd;
}
.article-tag {
display: inline-block;
font-size: 13px;
color: #0058a3;
margin-right: 14px;
}

/* ---- PDFダウンロードカード ---- */
.article-pdf-card {
margin: 20px 0 40px;
}
.article-pdf-card a {
display: flex;
align-items: center;
gap: 20px;
padding: 16px;
border: 1px solid #ddd;
text-decoration: none;
color: #333;
max-width: 520px;
}
.article-pdf-card a:hover {
background: #f8f8f8;
text-decoration: none;
}
.article-pdf-card a * {
color: #333;
text-decoration: none;
}
.article-pdf-card__thumb {
width: 160px;
min-width: 160px;
height: 100px;
background: #efefef url('/phs/news/assets/img/default_pdf.jpg') center / cover no-repeat;
overflow: hidden;
font-size: 0;
}
.article-pdf-card__title {
font-weight: bold;
font-size: 15px;
line-height: 1.6;
margin: 0 0 6px;
}
.article-pdf-card__size {
font-size: 13px;
color: #666;
margin: 0;
}

/* ---- 免責文 ---- */
.article-disclaimer {
margin-bottom: 60px;
padding: 20px 24px;
border: 1px solid #e0e0e0;
background: #f8f8f8;
font-size: 13px;
line-height: 1.8;
color: #555;
}
.article-disclaimer p {
margin: 0 0 4px;
}
.article-disclaimer p:last-child {
margin: 0;
}

/* ---- em ハイライト ---- */
em {
font-style: normal;
background: linear-gradient(transparent 60%, rgba(0, 88, 163, 0.2) 60%);
}

/* ================================================
画像レイアウト
クラスを div に付けるだけで切り替え可能
================================================ */

.img-full,
.img-1\/2,
.img-1\/3,
.img-2\/3,
.img-3\/4,
.img-grid,
.img-grid-2 {
margin-top: 20px;
margin-bottom: 20px;
}
.img-full figure,
.img-1\/2 figure,
.img-1\/3 figure,
.img-2\/3 figure,
.img-3\/4 figure,
.img-grid figure,
.img-grid-2 figure {
margin: 0;
text-align: left;
}
.img-full figcaption,
.img-1\/2 figcaption,
.img-1\/3 figcaption,
.img-2\/3 figcaption,
.img-3\/4 figcaption,
.img-grid figcaption,
.img-grid-2 figcaption {
font-size: 12px;
color: #666;
margin-top: 6px;
}

/* 全幅：1枚 */
.img-full figure img {
width: 100%;
height: auto;
display: block;
}

/* 1/2幅：1枚（デフォルト：センター） */
.img-1\/2 figure {
width: 50%;
margin: 0 auto;
}
.img-1\/2 figure img {
width: 100%;
height: auto;
display: block;
}
/* 寄せ modifier */
.img-1\/2.is-left  figure { margin: 0; }
.img-1\/2.is-right figure { margin: 0 0 0 auto; }

/* 1/3幅：1枚（デフォルト：センター） */
.img-1\/3 figure {
width: 33.333%;
margin: 0 auto;
}
.img-1\/3 figure img {
width: 100%;
height: auto;
display: block;
}
.img-1\/3.is-left  figure { margin: 0; }
.img-1\/3.is-right figure { margin: 0 0 0 auto; }

/* 2/3幅：1枚（デフォルト：センター） */
.img-2\/3 figure {
width: 66.666%;
margin: 0 auto;
}
.img-2\/3 figure img {
width: 100%;
height: auto;
display: block;
}
.img-2\/3.is-left  figure { margin: 0; }
.img-2\/3.is-right figure { margin: 0 0 0 auto; }

/* 3/4幅：1枚（デフォルト：センター） */
.img-3\/4 figure {
width: 75%;
margin: 0 auto;
}
.img-3\/4 figure img {
width: 100%;
height: auto;
display: block;
}
.img-3\/4.is-left  figure { margin: 0; }
.img-3\/4.is-right figure { margin: 0 0 0 auto; }

/* 2カラム */
.img-grid-2 {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 16px;
}
.img-grid-2 figure img {
width: 100%;
height: 220px;
object-fit: cover;
display: block;
}
/* 2カラム：最大高さ揃え＋縦中央（is-natural） */
.img-grid-2.is-natural {
align-items: stretch;
}
.img-grid-2.is-natural figure {
display: flex;
flex-direction: column;
justify-content: center;
}
.img-grid-2.is-natural figure img {
width: 100%;
height: auto;
display: block;
}

/* 3カラム：最大高さ揃え＋縦中央（デフォルト） */
.img-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
align-items: stretch;
}
.img-grid figure {
display: flex;
flex-direction: column;
justify-content: center;
}
.img-grid figure img {
width: 100%;
height: auto;
display: block;
}
/* 3カラム：最小高さ揃え（is-crop）
aspect-ratio の比率は最小画像に合わせて変更 */
.img-grid.is-crop figure {
display: block;
}
.img-grid.is-crop figure img {
width: 100%;
aspect-ratio: 4 / 3;
object-fit: cover;
display: block;
}

/* ---- テキスト＋画像 2カラム ---- */
.img-col-right,
.img-col-left {
display: flex;
gap: 30px;
align-items: flex-start;
margin-top: 20px;
}
.img-col-right { flex-direction: row; }
.img-col-left  { flex-direction: row-reverse; }
.img-col__text {
flex: 1;
}
.img-col-right figure,
.img-col-left figure {
flex: 0 0 45%;
margin: 0;
}
.img-col-right figure img,
.img-col-left figure img {
width: 100%;
height: auto;
display: block;
}
.img-col-right figcaption,
.img-col-left figcaption {
font-size: 12px;
color: #666;
margin-top: 6px;
}

/* ---- テキスト回り込み ---- */
.img-float-right,
.img-float-left {
margin-top: 20px;
}
.img-float-right::after,
.img-float-left::after {
content: "";
display: block;
clear: both;
}
.img-float-right figure {
float: right;
width: 45%;
margin: 0 0 12px 24px;
}
.img-float-left figure {
float: left;
width: 45%;
margin: 0 24px 12px 0;
}
.img-float-right figure img,
.img-float-left figure img {
width: 100%;
height: auto;
display: block;
}
.img-float-right figcaption,
.img-float-left figcaption {
font-size: 12px;
color: #666;
margin-top: 6px;
}
/* figcaption センター寄せ modifier */
.is-caption-center figcaption { text-align: center; }

/* 幅を絞るmodifier（QRコード・縦長画像など） */
.img-float-right.is-narrow figure { width: 28%; }
.img-float-left.is-narrow  figure { width: 28%; }
.img-col-right.is-narrow figure,
.img-col-left.is-narrow  figure   { flex: 0 0 28%; }

/* ---- 複数カラムギャラリー（Grid + object-fit: contain） ---- */
/* img に aspect-ratio を持たせることで figcaption を figure の外に出さずに表示できる。
   縦横混在画像は img 内でレターボックス表示（背景色 #f0f0f0）。
   アスペクト比を変えたい場合は figure img の aspect-ratio を上書き。 */
.img-gallery-2,
.img-gallery-3,
.img-gallery-4,
.img-gallery-5,
.img-gallery-6 {
  display: grid;
  gap: 20px;
  margin-top: 20px;
}
.img-gallery-2 { grid-template-columns: repeat(2, 1fr); }
.img-gallery-3 { grid-template-columns: repeat(3, 1fr); }
.img-gallery-4 { grid-template-columns: repeat(4, 1fr); }
.img-gallery-5 { grid-template-columns: repeat(5, 1fr); }
.img-gallery-6 { grid-template-columns: repeat(6, 1fr); }
.img-gallery-2 figure,
.img-gallery-3 figure,
.img-gallery-4 figure,
.img-gallery-5 figure,
.img-gallery-6 figure {
  margin: 0;
}
.img-gallery-2 figure img,
.img-gallery-3 figure img,
.img-gallery-4 figure img,
.img-gallery-5 figure img,
.img-gallery-6 figure img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: contain;
  object-position: center;
  display: block;
  background-color: #f0f0f0;
}
.img-gallery-2 figcaption,
.img-gallery-3 figcaption,
.img-gallery-4 figcaption,
.img-gallery-5 figcaption,
.img-gallery-6 figcaption {
  font-size: 11px;
  color: #666;
  margin-top: 4px;
  line-height: 1.4;
}

/* ---- レスポンシブ（980px 以下） ---- */
@media (max-width: 767px) {
.article-body   { padding: 0 10px; }
.img-1\/2 figure,
.img-1\/3 figure,
.img-2\/3 figure,
.img-3\/4 figure { width: 100%; }
.img-grid-2      { grid-template-columns: 1fr; }
.img-grid        { grid-template-columns: 1fr; }
.img-col-right,
.img-col-left    { flex-direction: column; }
.img-col-right figure,
.img-col-left figure { flex: none; width: 100%; }
.img-float-right figure,
.img-float-left figure { float: none; width: 100%; margin: 0 0 16px; }
.img-float-right.is-narrow figure,
.img-float-left.is-narrow figure { width: 50%; margin: 0 auto 16px; }
.img-gallery-2,
.img-gallery-3,
.img-gallery-4,
.img-gallery-5,
.img-gallery-6 { gap: 6px; }
.img-gallery-2 { grid-template-columns: repeat(2, 1fr); }
.img-gallery-3 { grid-template-columns: repeat(2, 1fr); }
.img-gallery-4 { grid-template-columns: repeat(2, 1fr); }
.img-gallery-5 { grid-template-columns: repeat(3, 1fr); }
.img-gallery-6 { grid-template-columns: repeat(3, 1fr); }
}

/* ---- Tailwind 風ユーティリティ（カスタムグリッド） ---- */
/* grid-cols-[2fr_2fr_2fr_1fr] gap-4 w-full h-40 object-cover */
.grid-cols-2-2-2-1 {
  display: grid;
  grid-template-columns: 2fr 2fr 2fr 1fr;
  margin-top: 40px;
}
.gap-4   { gap: 16px; }
.w-full  { width: 100%; }
.h-40    { height: 160px; }
.object-cover {
  object-fit: cover;
  display: block;
}
@media (max-width: 767px) {
.grid-cols-2-2-2-1 { grid-template-columns: repeat(2, 1fr); }
.h-40 { height: 120px; }
}

/* ---- 余白ユーティリティ（img-* より後に定義して上書き可能にする） ---- */
.u-mb-s  { margin-bottom: 16px; }
.u-mb    { margin-bottom: 30px; }
.u-mb-l  { margin-bottom: 40px; }
.u-mt-s  { margin-top: 16px; }
.u-mt    { margin-top: 30px; }
.u-mt-l  { margin-top: 40px; }