/* ========================================
   カタログページ専用スタイル
   （共通のレイアウトは global.css を参照）
   ======================================== */

#explain_tex .reader-info {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 16px;
	margin-top: 8px;
}

#explain_tex .reader-info img {
	flex-shrink: 0;
}

#explain_tex .reader-info p {
	margin: 0;
	line-height: 1.6;
}

/* サブメニュー */
#submenue {
	margin: 0 0 24px;
	padding: 18px 24px;
	background: #f7f7f7;
	border: 1px solid #dddddd;
}

#submenue .title {
	font-size: 110%;
	font-weight: bold;
	line-height: 1.5;
	margin-bottom: 6px;
}

#submenue .title + .subtitle {
	margin-top: 4px;
}

#submenue .subtitle {
	list-style: none;
	margin: 0 0 18px 16px;
	padding: 0;
}

#submenue .subtitle:last-child {
	margin-bottom: 0;
}

#submenue .subtitle li {
	margin: 4px 0;
	padding: 0 0 0 16px;
	background: url(../img/icn_ten.gif) no-repeat 0 0.45em;
	line-height: 1.5;
}

#submenue .title-block {
	margin-bottom: 18px;
}

#submenue .title-block:last-child {
	margin-bottom: 0;
}

/* カタログ本体 */
#catalog {
	width: 100%;
	margin: 0;
	padding: 0;
	text-align: left;
}

.catalog_set {
	margin-bottom: 36px;
	padding-bottom: 8px;
	clear: both;
}

.catalog_set:last-child {
	margin-bottom: 0;
}

.catalogtitle {
	font-size: 130%;
	font-weight: bold;
	line-height: 1.4;
	padding: 10px 0 8px;
	margin-bottom: 16px;
	border-bottom: 2px solid #ADACAC;
	color: #555555;
}

.catalogsubtitle {
	font-size: 115%;
	font-weight: bold;
	line-height: 1.4;
	margin: 20px 0 14px;
	padding: 4px 0 4px 12px;
	border-left: 4px solid rgb(1, 32, 148);
	color: #555555;
}

.catalogsubtitle.style1 {
	font-size: 26px;
	border-left: none;
	padding-left: 0;
}

.catalog_set > .setsumei {
	list-style: none;
	margin: 0 0 16px 16px;
	padding: 0;
}

.catalog_set > .setsumei li {
	margin: 4px 0;
	padding: 0 0 0 16px;
	background: url(../img/icn_ten.gif) no-repeat 0 0.45em;
	line-height: 1.5;
}

/* ========================================
   カタログ画像グリッド（編集用）
   ----------------------------------------
   1行に最大5列。1項目 = .catalog-item

   【基本形】
   <article class="catalog-item">
     <a class="catalog-item__image" href="PDFパス">
       <img src="画像パス" alt="説明" width="136" height="192">
     </a>
     <p class="catalog-item__label"><a href="PDFパス">商品名</a></p>
   </article>

   【サブリンクあり】
   <ul class="catalog-item__links">
     <li><a href="リンク">サブ商品名</a></li>
   </ul>

   【テキストのみ】
   <article class="catalog-item catalog-item--text">
     <p class="catalog-item__label">準備中です</p>
   </article>
   ======================================== */

.catalog-grid {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	justify-content: flex-start;
	gap: 24px 16px;
	margin: 0;
	padding: 0;
	list-style: none;
}

@media screen and (max-width: 420px) {
	.catalog-grid {
		justify-content: center;
		gap: 20px 12px;
	}
}

.catalog-item {
	flex: 0 0 130px;
	width: 130px;
	text-align: center;
	line-height: 1.5;
}

.catalog-item__image {
	display: block;
	margin-bottom: 8px;
}

.catalog-item__image img {
	display: block;
	margin: 0 auto;
	max-width: 100%;
	height: auto;
}

.catalog-item__label {
	margin: 0;
	font-size: 95%;
	line-height: 1.45;
}

.catalog-item__label a {
	line-height: 1.45;
}

.catalog-item__links {
	list-style: none;
	margin: 4px 0 0;
	padding: 0;
	font-size: 95%;
	line-height: 1.45;
}

.catalog-item__links li {
	margin: 2px 0;
}

.catalog-item__links a {
	line-height: 1.45;
}

/* テキストのみ項目 */
.catalog-item--text {
	flex: 1 1 100%;
	width: auto;
	text-align: left;
	padding: 20px 0;
}

.catalog-item--text.style2 .catalog-item__label {
	font-size: 12px;
}

/* 2枚並び（特別レイアウト） */
.catalog-grid--pair {
	gap: 24px;
}

.catalog-grid--pair .catalog-item {
	flex: 0 0 auto;
	width: auto;
}

.catalog-grid--pair .catalog-item__image {
	margin-bottom: 0;
}

.catalog-item__caption {
	margin: 8px 0 16px;
	line-height: 1.5;
}