@charset "utf-8";

/* --------------------------------------------------------------
   幅 900px 未満の端末での組み替え（仕様 1-12・1-12-A、K-5）。
   中身は @media (max-width: 899px)（と (max-width: 359px)）の中だけに書く。
   900px 以上では1行も効かない＝PC の見た目は現行のまま（厳命 0-0）。

   1. トップ以外の全ページ（`base1.dwt` の上部を持つページ）と特設5ページ
      … 見本『スマートフォンの特設ページ_マグマ_案 v1.0』に入っていた提案の CSS。
        値は見本のまま（hpmj8014916939 4-1「見本の CSS の値を採る」）。
        トップに効かないよう `body:has(#header_twitter)` で囲む
        （`#header_twitter` はトップ以外の全ページにあり、トップには無い）。
   2. トップ … hpmj8012951497 の「スマートフォンのトップ レイアウト案 v1.4」。
   3. 1. が扱っていない中身（作品ページ・一覧・サイトマップ・表）。
   -------------------------------------------------------------- */


/* ==============================================================
   1. トップ以外の全ページの上部と、特設ページの中身（見本の CSS）
   ============================================================== */

/* ---- 提案：トップ以外の全ページの上部（幅899px以下） ---- */
@media (max-width: 899px){
  body:has(#header_twitter){width:auto}
  body:has(#header_twitter) #header{height:auto}
  /* ヘッダの背景の2行だけは見本と同じ「囲まない形」で書く。
     トップ以外のページは自分の <style> で `div#header-bg{position:absolute}` `img{float:left}` を
     後から指定しているため、同じ強さのこの2つは見本でも効かず、画像は今までどおり
     後ろに敷かれて題字がその上に載る。高さ110pxと中央の切り出しだけが効く（見本の見え方）。
     トップは `body > div#header-bg`（下の 2.）の方が強いので、こちらの影響を受けない。 */
  div#header-bg{position:static;width:100%;height:110px;overflow:hidden}
  div#header-bg img{float:none;width:100%;height:110px;object-fit:cover}
  body:has(#header_twitter) #header_container{width:auto;padding:0 12px;box-sizing:border-box}
  body:has(#header_twitter) #header_title{width:auto;float:none;text-align:left;padding:10px 0 6px 0}
  body:has(#header_twitter) #header_title img{max-width:100%;height:auto}
  body:has(#header_twitter) #header_navi{width:auto;height:auto;float:none;margin:0}
  body:has(#header_twitter) #header_navi ul.head_navi{display:flex;justify-content:space-between;margin:0;padding:0}
  body:has(#header_twitter) #header_navi li{float:none;height:auto;text-indent:0;overflow:visible}
  body:has(#header_twitter) #header_navi li a{height:auto;background:none;color:#fff;font-size:12px;white-space:nowrap}
  body:has(#header_twitter) #header_navi li#navi01,
  body:has(#header_twitter) #header_navi li#navi02,
  body:has(#header_twitter) #header_navi li#navi03,
  body:has(#header_twitter) #header_navi li#navi04,
  body:has(#header_twitter) #header_navi li#navi05,
  body:has(#header_twitter) #header_navi li#navi06{width:auto}
  body:has(#header_twitter) #header_twitter{width:auto;float:none;padding:8px 0 10px 0}
  body:has(#header_twitter) #header_twitter ul.bana_navi{display:flex;gap:10px;margin:0;padding:0}
  body:has(#header_twitter) #header_twitter li{float:none;margin:0;background:none}
  body:has(#header_twitter) #header_twitter li a{background:none}
  body:has(#header_twitter) #header_twitter li a:hover img{visibility:visible}
  body:has(#header_twitter) #header_twitter img{height:28px;width:auto}
  body:has(#header_twitter) #header_2_container{height:0;line-height:0;overflow:hidden;background:none}
  body:has(#header_twitter) #line{margin:0;height:33px}
  body:has(#header_twitter) #obi_container{width:auto;padding:0 12px;box-sizing:border-box}
  body:has(#header_twitter) #obi{width:auto;float:none;padding:6px 0 0 0}
  body:has(#header_twitter) #obi img{height:20px;width:auto}
  body:has(#header_twitter) #ashiato{width:auto;float:none;text-align:left;padding:6px 12px 4px 12px;background:#fff}
  body:has(#header_twitter) #container_F,
  body:has(#header_twitter) #container{width:auto;padding:0 8px;box-sizing:border-box}
  body:has(#header_twitter) .anchor{width:auto;text-align:left}
  body:has(#header_twitter) .title{width:auto;height:auto;background-image:none;background-color:#89212f;font-size:18px;padding:4px 0 4px 10px}
  body:has(#header_twitter) #books_ichiran{width:auto}
  body:has(#header_twitter) #books_ichiran ul.book_ichiran{display:grid;grid-template-columns:repeat(4,1fr);gap:8px 6px;width:auto}
  body:has(#header_twitter) #books_ichiran ul.book_ichiran li.books{width:auto;height:auto;margin:0;float:none;background-image:none!important}
  body:has(#header_twitter) #books_ichiran ul.book_ichiran li.books img{width:100%;height:auto}
  body:has(#header_twitter) #books_ichiran ul.book_ichiran li a:hover img{visibility:visible}
  body:has(#header_twitter) img{max-width:100%}
}

/* ---- 提案：特設ページの中身の一般規則（幅899px以下） ---- */
@media (max-width: 899px){
  body:has(#header_twitter) #container_F,
  body:has(#header_twitter) #container,
  body:has(#header_twitter) #container_F10,
  body:has(#header_twitter) #container_F50,
  body:has(#header_twitter) #container_F100,
  body:has(#header_twitter) #container_F200,
  body:has(#header_twitter) #container_F500,
  body:has(#header_twitter) #back_gradation,
  body:has(#header_twitter) #back_gradation_index{width:auto!important;max-width:100%;padding:0 8px;box-sizing:border-box}
  body:has(#header_twitter) #container div[style*="width"]{width:auto!important;max-width:100%}
  body:has(#header_twitter) #container div[style*="float"]{float:none!important}
  body:has(#header_twitter) #container table{display:block;max-width:100%;overflow-x:auto}
  body:has(#header_twitter) #container img{max-width:100%;height:auto}
  body:has(#header_twitter) #container iframe,
  body:has(#header_twitter) #container object,
  body:has(#header_twitter) #container embed{max-width:100%}
  body:has(#header_twitter) #container .text,
  body:has(#header_twitter) #container .text0,
  body:has(#header_twitter) #container .title,
  body:has(#header_twitter) #container .anchor{width:auto!important}
}

@media (max-width: 899px){
  body:has(#header_twitter) #header_2 > *,
  body:has(#header_twitter) #container_F,
  body:has(#header_twitter) #container_F *{max-width:100%;box-sizing:border-box}
  body:has(#header_twitter) #container_F [style*="float:left"],
  body:has(#header_twitter) #container_F [style*="float:right"],
  body:has(#header_twitter) #container_F [style*="float: left"],
  body:has(#header_twitter) #container_F [style*="float: right"]{float:none!important}
  body:has(#header_twitter) #container_F table{display:block;overflow-x:auto}
  body:has(#header_twitter) #container_F td,
  body:has(#header_twitter) #container_F th{display:block;width:auto!important}
  body:has(#header_twitter) #ashiato{position:static;clear:both}
}

@media (max-width: 899px){
  body:has(#header_twitter) #container_F [id$="_container"],
  body:has(#header_twitter) #container_F [id$="_main"],
  body:has(#header_twitter) #container_F [id^="back_gradation"]{margin-left:0!important;margin-right:0!important;width:auto!important}
  body:has(#header_twitter) #footer,
  body:has(#header_twitter) #footer_container{width:auto!important;height:auto!important;padding:10px 12px;box-sizing:border-box}
  body:has(#header_twitter) #footer #fnavi,
  body:has(#header_twitter) #footer #copy{float:none!important;width:auto!important;margin:6px 0 0 0!important;text-align:left}
  body:has(#header_twitter) #copy img{max-width:100%;height:auto}
}

@media (max-width: 899px){
  body:has(#header_twitter) #container_F table,
  body:has(#header_twitter) #container_F td{height:auto!important}
  body:has(#header_twitter) #container_F .twitter-share-button,
  body:has(#header_twitter) #container_F [class*="twitter-share"]{display:block;margin:4px 0}
}

@media (max-width: 899px){
  body:has(#header_twitter) #container_F table{width:100%!important;max-width:100%;box-sizing:border-box}
  body:has(#header_twitter) #container_F td,
  body:has(#header_twitter) #container_F th{box-sizing:border-box;max-width:100%}
}

@media (max-width: 899px){
  body:has(#header_twitter) #line{height:auto!important;min-height:33px}
  body:has(#header_twitter) #obi_container{overflow:visible}
  body:has(#header_twitter) #ashiato{display:block;background:#fff;margin:0 -12px!important;padding:6px 12px!important}
}

@media (max-width: 899px){
  /* SNS のアイコン群（#header_twitter）を最下部へ */
  body:has(#header_twitter){display:flex;flex-direction:column;background:#000}
  body:has(#header_twitter) #header,
  body:has(#header_twitter) #header_container{display:contents}
  body:has(#header_twitter) #header-bg{order:1}
  body:has(#header_twitter) #header_title{order:2}
  body:has(#header_twitter) #header_navi{order:3}
  body:has(#header_twitter) #header_2{order:4}
  body:has(#header_twitter) #header_twitter{order:9;padding:14px 12px 20px 12px!important;background:#000}
  body:has(#header_twitter) #header_twitter ul.bana_navi{justify-content:flex-start}
}


/* ==============================================================
   2. トップ（hpmj8012951497。レイアウト案 v1.4）
      並び：ヘッダの背景 → 題字 → ナビ → 特設ページ案内 → 上部の告知
           → 新刊バナー（枠1が上）→ 一行告知 → 最新NEWS
           → SNSバナー → SNS の窓 → ページの先頭にもどる → フッタ
      公開サイトの HTML は変えず、CSS だけで組み替える。
   ============================================================== */

@media (max-width: 899px) {

	/* トップの区画は左右 12px の余白を自分で持つので、枠の 8px は外す */
	#container:has(#top) { padding-left: 0; padding-right: 0; }

	/* ---- ヘッダの背景：高さ110px、中央を切り出して幅いっぱい ---- */
	body > div#header-bg {
		position: static;
		z-index: auto;
		width: 100%;
		height: 110px;
		overflow: hidden;
	}
	body > div#header-bg img {
		float: none;
		display: block;
		width: 100%;
		height: 110px;
		object-fit: cover;
		object-position: center;
	}

	/* ---- #top を縦に積む。#mein02 は HTML が画面の右からの順なので order で戻す ---- */
	#container #top {
		width: auto;
		height: auto;
		display: flex;
		flex-direction: column;
	}
	#container #top > div:nth-of-type(1) { order: 1; }   /* #mein01 */
	#container #top > div:nth-of-type(2) { order: 5; }   /* HTML の1つ目の #mein02 ＝ 画面のいちばん右 */
	#container #top > div:nth-of-type(3) { order: 4; }
	#container #top > div:nth-of-type(4) { order: 3; }   /* HTML の最後 ＝ 枠1 ＝ いちばん上 */

	#container #top #mein01 {
		width: auto;
		float: none;
		margin: 0;
		padding: 0;
	}

	/* ---- 題字 ---- */
	#container #top #mein01 > img {
		display: block;
		width: 100%;
		height: auto;
		padding: 10px 12px 4px;
		box-sizing: border-box;
	}
	#container #top #mein01 > br { display: none; }

	/* ---- ナビ5項目：1行に均等配置、文字12px ---- */
	#container #top #mein01 #top_navi,
	#container #top #mein01 #top_navi2,
	#container #top #mein01 #top_navi3 {
		position: static;
		width: auto;
		height: auto;
		float: none;
	}
	#container #top #mein01 #top_navi { margin: 0; padding: 6px 12px; }
	#container #top #mein01 #top_navi ul.head_navi {
		display: flex;
		justify-content: space-between;
		float: none;
		margin: 0;
		padding: 0;
	}
	#container #top #mein01 #top_navi li {
		float: none;
		display: block;
		text-indent: 0;
		height: auto;
		width: auto;
	}
	#container #top #mein01 #top_navi li#navi01,
	#container #top #mein01 #top_navi li#navi02,
	#container #top #mein01 #top_navi li#navi03,
	#container #top #mein01 #top_navi li#navi04,
	#container #top #mein01 #top_navi li#navi05 { width: auto; }
	#container #top #mein01 #top_navi li a {
		display: block;
		height: auto;
		background: none;
		color: #DDDDDD;
		font-size: 12px;
		white-space: nowrap;
	}
	#container #top #mein01 #top_navi li a::before {
		content: "\25B6 ";
		color: #CC3333;
		font-size: 9px;
	}

	/* ---- 特設ページ案内6つ：3列2段、中央揃え、横スクロールなし ---- */
	#container #top #mein01 #top_navi2 { margin: 0; padding: 8px 12px; }
	#container #top #mein01 #top_navi2 ul {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 8px 10px;
		align-items: center;
		justify-items: center;
		float: none;
		margin: 0;
		padding: 0;
	}
	#container #top #mein01 #top_navi2 ul li {
		float: none;
		margin: 0;
		padding: 0;
		background: none;
	}
	#container #top #mein01 #top_navi2 ul li a { display: block; }
	#container #top #mein01 #top_navi2 ul li img {
		display: block;
		height: 21px;
		width: auto;
		max-width: 100%;
	}

	/* ---- 上部の告知：幅いっぱいの黒い枠。文言と書式は PC のまま ---- */
	#container #top #mein01 #top_navi3 { margin: 8px 12px; padding: 0; }
	#container #top #mein01 #top_navi3 ul { margin: 0 !important; padding: 0; float: none; }
	#container #top #mein01 #top_navi3 li.navi08 { float: none; width: auto; background: none; }
	#container #top #mein01 #top_navi3 li.navi08 a { display: block; width: auto; height: auto; }
	#container #top #mein01 #top_navi3 .hpmj_kokuchi {
		width: 100%;
		height: auto;
		box-sizing: border-box;
		border: 1px solid #333333;
	}

	/* ---- 新刊バナーの枠：左半分に書影、右半分に「新刊！」と紹介文 ---- */
	#container #top #mein02 {
		display: grid;
		grid-template-columns: 1fr 1fr;
		grid-template-rows: auto auto;
		column-gap: 10px;
		width: auto !important;
		height: auto !important;
		margin: 0 12px 8px !important;
		padding: 10px 8px 12px;
		box-sizing: border-box;
		float: none;
		/* 網掛けは現行の画像を繰り返して敷く（cover で引き伸ばさない） */
		background-image: url(../images/top/sinkan_back.png) !important;
		background-repeat: repeat !important;
		background-size: auto !important;
		border: 1px solid #4b4b4b;
	}
	#container #top #mein02 #shinkan {
		grid-column: 1;
		grid-row: 1 / span 2;
		display: flex;
		gap: 6px;
		align-items: flex-start;
		width: auto !important;
		height: auto !important;
		margin: 0 !important;
	}
	#container #top #mein02 #shinkan a,
	#container #top #mein02 #shinkan a.shinkan_img {
		display: block;
		flex: 1 1 0;
		min-width: 0;
		margin: 0 !important;
	}
	#container #top #mein02 #shinkan img {
		display: block;
		width: 100%;
		height: auto;
	}
	#container #top #mein02 #shinkan_mark {
		grid-column: 2;
		grid-row: 1;
		justify-self: start;
		align-self: start;
		width: auto !important;
		height: auto !important;
		margin: 0 0 6px 0 !important;
		padding: 0 8px;
		font-size: 11px;
		line-height: 1.7;
	}
	#container #top #mein02 #shinkan_mark .shinkanmozi { font-size: 11px; }
	#container #top #mein02 #shinkan_text {
		grid-column: 2;
		grid-row: 2;
		width: auto !important;
		height: auto !important;
		margin: 0 !important;
		font-size: 13px;
		line-height: 1.6;
	}
	#container #top #mein02 { grid-template-rows: auto 1fr; }
	#container #top #mein02 #shinkan { flex-direction: column; }

	/* ---- 一行告知：幅いっぱいの横長の区画。幅を超える文字列は流れる（headline.js が .scroll を付ける）
        hpmj8037221779 の厳命 0-7・束10-g：横長の区画を「帯」と呼ばない ---- */
	#top ~ #info01 {
		width: auto;
		height: auto;
		margin: 10px 0;
		padding: 5px 12px;
		box-sizing: border-box;
		background-color: #222222;
		font-size: 12px;
	}

	/* ---- 最新NEWS：1行目に日付と札、2行目に本文 ---- */
	#top ~ #info02 { width: auto; height: auto; margin: 0; }
	#top ~ #info02 dl.list01 { margin: 0; }
	#top ~ #info02 dl.list01 dt {
		float: left;
		clear: both;
		margin: 0;
		padding: 8px 0 0 12px;
		font-size: 11px;
		line-height: 15px;
		color: #CCCCCC;
	}
	#top ~ #info02 dl.list01 dd {
		margin: 0;
		padding: 8px 12px 8px 0;
		border-bottom: 1px solid #222222;
	}
	#top ~ #info02 dl.list01 dd img {
		float: none;
		margin: 0 0 0 6px;
		vertical-align: middle;
	}
	#top ~ #info02 dl.list01 dd a {
		display: block;
		clear: both;
		margin: 2px 0 0 12px;
		padding: 0;
		font-size: 12px;
		line-height: 1.5;
		color: #EE3333;
	}

	#top ~ #space { width: auto; height: 0; }

	/* ---- SNSバナー4つ：2列2段 ---- */
	#top ~ #bana { width: auto; height: auto; margin: 0; padding: 0; }
	#top ~ #bana ul#bana {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 8px;
		width: auto;
		height: auto;
		margin: 0;
		padding: 12px;
		box-sizing: border-box;
		float: none;
	}
	#top ~ #bana ul#bana li { float: none; margin: 0; padding: 0; background: none; }
	#top ~ #bana ul#bana li a { display: block; }
	#top ~ #bana ul#bana li img { display: block; width: 100%; height: auto; }

	/* ---- SNS の窓：幅いっぱい。Facebook と X を縦に ---- */
	#top ~ #sns { margin: 8px 12px; }
	#sns > * { float: none !important; width: 100% !important; }

	/* ---- ページの先頭にもどる・フッタ ---- */
	#top ~ .pagetop {
		width: auto;
		background: none;
		text-align: right;
		margin: 0;
		padding: 8px 12px;
		font-size: 11px;
	}
	#top ~ #footer {
		width: auto;
		height: auto;
		margin: 0;
		padding: 10px 12px 20px;
	}
	#top ~ #footer #fnavi { float: none; margin: 0; font-size: 11px; }
	#top ~ #footer #copy { float: none; margin: 6px 0 0 0; }
}


/* ==============================================================
   3. 1. が扱っていない中身（作品ページ・一覧・サイトマップ・表）
   ============================================================== */

@media (max-width: 899px) {

	/* ---- 固定幅の解除（1. が名前で挙げていない区画。#container はトップにもあるので囲まない） ---- */
	#container,
	#container_F10,
	#container_F50,
	#container_F100,
	#container_F200,
	#container_F500,
	#header_2_container,
	#footer_container,
	#information_container,
	#books_container,
	#hatugen_container,
	#hatugen_main,
	#sitemap_container,
	#privacy_container,
	#profile_container,
	#contact_container,
	#contact_main,
	#books_shosai,
	#back_gradation,
	#back_gradation_index,
	.text,
	.text0,
	.list02,
	.sanko,
	.sanko02,
	.anchor01,
	.pagetop,
	#sns {
		width: auto !important;
		max-width: 100%;
		margin-left: 0;
		margin-right: 0;
		float: none;
	}

	body { width: auto; }
	.pagetop { background: none; }
	#copy img { max-width: 100%; height: auto; }

	/* ---- 作品ページ ---- */
	#books_title { width: auto; height: auto; background-image: none; background-color: #89212f; }
	.books_title001 { float: none; font-size: 16px; padding: 6px 0 6px 10px; }
	#kategori_mark { margin: 6px 10px 6px 0; }
	#books_l, #books_l1, #books_r, #books_r1 { width: auto; float: none; }
	.books_picture1, .books_picture2, .books_picture3,
	.books_picture4, .books_picture5, .books_picture6 {
		width: auto;
		float: none;
		margin: 12px 0;
	}
	.books_picture1 img, .books_picture2 img { max-width: 100%; height: auto; }
	.books01 { width: auto; float: none; }
	.books_picture_s { float: none; margin: 0 0 6px 0; }
	.books_title_s { width: auto; float: none; }
	.books_amazon, .books_amazon_s, .books_amazon_s1 { float: none; margin: 6px 0; text-align: left; }

	/* ---- 一覧・サイトマップ ---- */
	dl.list02 dt, dl.list03 dt, dl.list04 dt, dl.list05 dt, dl.list06 dt { float: none; }
	dl.list02 dd, dl.list03 dd, dl.list04 dd, dl.list05 dd, dl.list06 dd { margin-left: 20px; }
	.sitemap01, .sitemap02, .sitemap03, .sitemap04, .sitemap05,
	.sitemap_3_1, .sitemap_3_2 { width: auto; float: none; margin: 0 0 18px 0; }
	ul.text04 { width: auto; }
	.r_space { width: auto; height: auto; float: none; margin: 0; }
	.text05 { height: auto; background-image: none; margin: 0; }
	.midashi02 { background-size: contain; }

	/* ---- 表・整形済みは、その中だけで横に送る ---- */
	table, pre { display: block; max-width: 100%; overflow-x: auto; }
	img { max-width: 100%; }
}

/* 幅 360px を下回るときは3列（hpmj8066645661long924 S-b。利用者決定 2026-09-24）
   hpmj8067231527long2738：幅899px 以下の4列の指定（body:has(#header_twitter) …）より強く効くよう、同じ書き方にそろえた */
@media (max-width: 359px) {
	body:has(#header_twitter) #books_ichiran ul.book_ichiran { grid-template-columns: repeat(3, 1fr); }
}

/* 幅 899px 以下では、横に並べた画像（2枚・3枚）を縦に積む（hpmj8067231527long2738。利用者決定 2026-09-24「写真は縦に積んでください」） */
@media (max-width: 899px) {
	body .figrow.figrow-2, body .figrow.figrow-3 { grid-template-columns: 1fr; }
}

/* 幅 899px 以下でも、画像1枚の回り込み（右寄せ・左寄せ）は本文と横に並べたままにする（hpmj8069218377。
   利用者決定 2026-09-25 #16「文章作成者の意図を断ち切らない」・#18「上限 50%」）。
   画像の幅の上限は本文の入れ物の幅の 50%。上限を超える画像は上限まで縮め、引き伸ばさない。
   キャプションは画像の幅で折り返す（contain: inline-size でキャプションが入れ物を広げないようにする）。
   上の 97 行の #container_F * { max-width: 100% } より強く効かせるため、同じ書き方（body:has(#header_twitter) #container_F）にそろえる。 */
@media (max-width: 899px) {
	body:has(#header_twitter) #container_F figure.right, body:has(#header_twitter) #container_F figure.left { display: block; max-width: 50%; }
	body:has(#header_twitter) #container_F figure.right > img, body:has(#header_twitter) #container_F figure.left > img { max-width: 100%; height: auto; }
	body:has(#header_twitter) #container_F figure.right > figcaption, body:has(#header_twitter) #container_F figure.left > figcaption { display: block; contain: inline-size; }
}
/* VF6025512：作品の個ページのスマートフォン表示。メインの巻を、書影を左・巻の名前と情報と amazon のボタンを右に並べる（利用者の決定 2026-10-12 00:18「OKです。とてもきれい」。見本 v1.1）。関連本（.books_picture_s など）は対象外 */
@media (max-width: 899px) {
  /* 作品の個ページのメインの巻（関連本は対象外）：書影を左に、巻の名前・情報・amazon のボタンを右に並べる */
  /* 巻が2つ以上の作品：#books_l の中で、巻ごとに書影と情報が1つの枠（.books_pictureN）に入っている */
  /* #books_l の中に余白を閉じ込める（最初の巻の上の余白 12px が #books_l の外へ抜け、書影が灰色の背景の上端に付いていた。巻が1つの作品の #books_l1 は grid なので抜けない） */
  #books_l { display: flow-root; }
  #books_l > .books_picture1, #books_l > .books_picture2, #books_l > .books_picture3,
  #books_l > .books_picture4, #books_l > .books_picture5, #books_l > .books_picture6 {
    display: grid; grid-template-columns: min(40%, 175px) 1fr; grid-template-rows: auto auto 1fr;
    column-gap: 12px; align-items: start;
  }
  #books_l > .books_picture1 > img, #books_l > .books_picture2 > img, #books_l > .books_picture3 > img,
  #books_l > .books_picture4 > img, #books_l > .books_picture5 > img, #books_l > .books_picture6 > img {
    grid-column: 1; grid-row: 1 / span 3; width: 100%; height: auto;
  }
  #books_l > .books_picture1 > :not(img), #books_l > .books_picture2 > :not(img), #books_l > .books_picture3 > :not(img),
  #books_l > .books_picture4 > :not(img), #books_l > .books_picture5 > :not(img), #books_l > .books_picture6 > :not(img) {
    grid-column: 2;
  }
  /* 巻が1つの作品：#books_l1 の中に、書影の枠（.books_picture1）と情報の枠（.books_picture3）が並んでいる */
  #books_l1 { display: grid; grid-template-columns: min(40%, 175px) 1fr; column-gap: 12px; align-items: start; }
  #books_l1 > .books_picture1 { grid-column: 1; }
  #books_l1 > .books_picture1 > img { width: 100%; height: auto; }
  #books_l1 > .books_picture3 { grid-column: 2; }
  /* 巻の名前の回り込みを解く（PC の style.css の .books_title { float: left; } が残り、名前が書影や情報の横に回り込んでいた） */
  #books_l .books_title, #books_l1 .books_title { float: none; }
}