@charset "utf-8";
/* ==========================================================================
   responsive.css
   石川県邦楽舞踊協会サイト レスポンシブ対応用 上書きスタイル

   ・既存の main.css / content.css は一切書き換えていません。
   ・このファイルは必ず「既存CSSより後」に読み込んでください。
     index.html の <style> ブロックの直後が確実です。
   ・設置場所は com/css/responsive.css を想定しています
     （画像の相対パス ../img/... がそのまま使えます）
   ========================================================================== */


/* --------------------------------------------------------------------------
   1. 全画面幅で有効な調整（既存の見た目は変わりません）
   -------------------------------------------------------------------------- */

/* 画像がボックス幅を超えないようにする */
img {
	max-width: 100%;
	height: auto;
}

/* 電話番号のリンク化（PCでは今までと同じ見た目に保つ） */
#footer a[href^="tel:"] {
	color: inherit;
	text-decoration: none;
	pointer-events: none;
}

@media screen and (max-width: 768px) {
	#footer a[href^="tel:"] {
		text-decoration: underline;
		pointer-events: auto;
	}
}

/* 既存の linear-gradient(top center, ...) は現在のブラウザでは無効な書式で
   グラデーションが表示されていないため、標準書式を追記して復活させます */
#content2 {
	background: linear-gradient(to bottom, #fffef2 0%, #fdf3b5 100%);
}

#center_box2 {
	background: linear-gradient(to bottom, #d79c14 0%, #f3e99f 100%);
}


/* --------------------------------------------------------------------------
   2. 〜960px : 固定幅レイアウトを流動幅に切り替える
   -------------------------------------------------------------------------- */
@media screen and (max-width: 960px) {

	/* 横スクロールの原因になる最小幅指定を解除 */
	body {
		min-width: 0;
	}

	#header,
	#content,
	#content2,
	#center_box,
	#center_box2,
	#footer,
	#info,
	#info2 {
		width: 100%;
		max-width: 960px;
		box-sizing: border-box;
	}

	#header {
		padding: 0 12px;
	}

	/* メインイメージ：横幅に合わせて等倍で縮小する
	   ※ mainimg.jpg の実寸が960pxより広い場合は
	     aspect-ratio の値（960 / 400）を実際の表示比率に合わせて調整してください */
	#mainimg2 p {
		height: auto;
		aspect-ratio: 960 / 400;
		background-size: 100% auto;
	}

	#mainimg p {
		height: auto;
		aspect-ratio: 960 / 738;
		background-size: 100% auto;
	}

	/* フッターの絶対配置（sticky footer）を解除。
	   狭い画面ではフッターが縦に伸びて本文と重なるため */
	#footer_wrap {
		position: static;
	}

	#content,
	#content2 {
		padding-bottom: 40px;
	}

	#footer {
		padding: 25px 15px 40px;
	}

	/* 下層ページ用の固定幅ブロック */
	#subtt_a,
	.subtt_a,
	#phgallery,
	#phgallery ul li,
	table#table01,
	div#sorry_box,
	div#sorry_box ul,
	div.infobox,
	.txtbox,
	#glist,
	#glist_r,
	#glist2,
	#glist2_r,
	#glist li,
	#glist li .glnv,
	#glist2 li,
	#glist2 li .glnv {
		width: auto;
		max-width: 100%;
		box-sizing: border-box;
	}

	#glist,
	#glist2,
	#glist_r,
	#glist2_r {
		float: none;
		margin-left: 0;
	}

	table#table01,
	div#sorry_box {
		margin-left: 0;
		margin-right: 0;
	}
}


/* --------------------------------------------------------------------------
   3. 〜768px : タブレット縦・スマートフォン
   -------------------------------------------------------------------------- */
@media screen and (max-width: 768px) {

	/* ---- ヘッダー ---- */

	/* ナビが2段になると body 背景の帯（gnavi_bk.jpg）が届かず
	   薄い文字色が読めなくなるので、ヘッダー自身に帯を敷き直す */
	#header_wrap {
		height: auto;
		background-color: #241f16;
		background-image: url(../img/com/gnavi_shadow.png), url(../img/com/gnavi_bk.jpg);
		background-repeat: repeat-x, repeat-x;
		background-position: center bottom, center top;
		background-size: auto, auto 100%;
	}

	#header {
		height: auto;
		padding: 10px 12px 0;
	}

	#header h1 {
		float: none;
		text-align: center;
	}

	#header h1 a {
		width: 200px;
		height: 50px;
		margin: 0 auto;
		background-size: contain;
		background-position: center center;
	}

	/* ---- グローバルナビ：2列グリッド ---- */
	#gnavi {
		float: none;
		display: flex;
		flex-wrap: wrap;
		margin-top: 8px;
		border-top: 1px solid #3A3423;
	}

	#gnavi li,
	#gnavi li:first-child {
		float: none;
		width: 50%;
		height: auto;
		box-sizing: border-box;
		border: 0;
		border-bottom: 1px solid #3A3423;
	}

	#gnavi li:nth-child(odd) {
		border-right: 1px solid #3A3423;
	}

	#gnavi li a,
	#gnavi li:first-child a {
		height: auto;
		line-height: 1.4;
		font-size: 100%;
		padding: 14px 6px;
		text-align: center;
		border: 0;
	}

	/* ---- 2カラムを解除 ---- */
	#left,
	#left2,
	#right,
	#right2 {
		float: none;
		width: auto;
		max-width: 100%;
		box-sizing: border-box;
	}

	#left2 {
		padding: 0 12px;
	}

	#right2 {
		margin: 24px auto 0;
		padding: 0 12px;
		text-align: center;
	}

	/* ---- トップのバナー2枚（table）を縦積みに ---- */
	#center_box2 table {
		width: 100%;
	}

	#center_box2 tbody,
	#center_box2 tr,
	#center_box2 td {
		display: block;
		width: auto;
	}

	/* 中央のスペーサー用セルは非表示 */
	#center_box2 td:not(.over) {
		display: none;
	}

	#center_box2 td.over {
		padding: 10px 12px;
		text-align: center;
	}

	#center_box2 td.over img {
		width: 100%;
		max-width: 350px;
	}

	/* ---- 右カラムのバナー ---- */
	#right2 ul.over li {
		margin-bottom: 12px;
	}

	#right2 ul.over li img {
		width: 100%;
		max-width: 300px;
	}

	/* ---- お知らせ本文（index.html 内の .list 指定を上書き） ---- */
	#left2 .list,
	#left .list {
		width: auto;
		max-width: 100%;
		margin: 1.2em 0;
	}

	#left2 .list dt,
	#left .list dt {
		clear: none;
		float: none;
		width: auto;
		font-weight: bold;
	}

	#left2 .list dd,
	#left .list dd {
		margin-left: 0;
	}

	/* ---- フッター ---- */
	#footer {
		/* 装飾画像は文字と重なるため狭い画面では外す */
		background-image: none;
		padding: 20px 15px 30px;
		text-align: center;
	}

	#footer ul {
		width: auto;
		float: none;
		text-align: center;
		margin-bottom: 14px;
	}

	#footer li:first-child {
		display: block;
		margin: 0 auto 12px;
	}

	#footer li a {
		display: inline-block;
		margin: 0 8px;
	}

	#footer p {
		line-height: 1.7;
	}

	#footer p strong {
		margin-bottom: 6px;
	}

	/* ---- 下層ページの表組み ---- */
	#link table,
	#link td {
		width: auto;
		display: block;
	}

	#link td {
		font-size: 115%;
		padding: 8px 0;
	}
}


/* --------------------------------------------------------------------------
   4. 〜400px : 小型スマートフォン
   -------------------------------------------------------------------------- */
@media screen and (max-width: 400px) {

	body {
		font-size: 13px;
	}

	#header h1 a {
		width: 170px;
		height: 44px;
	}

	#gnavi li a,
	#gnavi li:first-child a {
		font-size: 93%;
		padding: 12px 4px;
	}

	#footer p {
		font-size: 93%;
	}
}


/* --------------------------------------------------------------------------
   5. 下層ページ（特選会・紀祥会・受賞者・役員・ゲスト・リンク集）
      ※ 各ページのHTMLは未確認のため、content.css の指定から
        逆算して当てています。崩れる箇所があればご連絡ください。
   -------------------------------------------------------------------------- */
@media screen and (max-width: 960px) {

	/* ---- ページタイトル帯（#title h2 とふりがなの span） ---- */
	#title {
		height: auto;
	}

	#title h2 {
		width: auto;
		max-width: 960px;
		height: auto;
		padding: 65px 12px 15px;
		box-sizing: border-box;
		line-height: 1.3;
		background-size: 100% auto;
	}

	#title h2 span {
		left: 12px;
	}

	/* ---- 中見出し（「フォトギャラリー」など） ---- */
	#subtt_a,
	.subtt_a {
		height: auto;
		min-height: 42px;
		line-height: 1.4;
		/* bg_suba.gif（950px幅の見出し帯）を枠にぴったり合わせる */
		background-position: 0 0;
		background-size: 100% 100%;
	}

	#subtt_a h6,
	.subtt_a h6 {
		float: none;
		width: auto;
		padding: 11px 12px 11px 26px;
		box-sizing: border-box;
		line-height: 1.4;
	}

	/* ---- フォトギャラリー一覧（#glist / #glist2） ---- */
	#glist ul,
	#glist2 ul {
		padding: 0 12px;
	}

	#glist li,
	#glist2 li {
		width: auto;
		height: auto;
	}

	/* 背景画像 bg_glist.gif は 590×49px 固定で、会場名が長い項目が
	   折り返すとはみ出すため、可変のCSS装飾に差し替えます */
	#glist li .glnv,
	#glist2 li .glnv,
	li .glnv {
		width: auto;
		height: auto;
		min-height: 49px;
		margin-bottom: 8px;
		box-sizing: border-box;
		background-image: none;
		background-color: #f5f1e6;
		border: 1px solid #d8cfb8;
		border-radius: 4px;
	}

	#glist li .glnv:hover,
	#glist2 li .glnv:hover,
	li .glnv:hover {
		background-color: #eae2ce;
	}

	#glist li h6,
	#glist2 li h6 {
		padding: 14px 16px;
		font-size: 108%;
		line-height: 1.5;
	}

	/* ---- 右側のボタン（「これまでの特別ゲスト」など） ---- */
	#glist_r,
	#glist2_r {
		width: auto;
		margin: 20px 0 0;
		padding: 0 12px;
		text-align: center;
	}

	/* ---- 写真ページ（hb_0xx.html など） ---- */
	#phgallery ul li {
		padding: 20px 12px 8px;
		font-size: 115%;
	}

	/* ---- ゲスト一覧の表：列幅を保ったまま横スクロールで見せる ---- */
	table#table01 {
		display: block;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		margin: 20px 0 30px;
	}

	/* ---- お知らせ枠・本文枠 ---- */
	div.infobox,
	.txtbox {
		padding-left: 12px;
		padding-right: 12px;
	}

	div.infobox dt {
		width: auto;
		float: none;
		padding-left: 0;
		font-weight: bold;
	}

	div.infobox dd {
		margin-left: 0;
	}

	div.infobox aside {
		float: none;
		margin: 0 auto 1em;
	}

	/* ---- リンク集 ---- */
	#link table {
		width: 100%;
	}
}

@media screen and (max-width: 400px) {

	#title h2 {
		font-size: 150%;
	}

	#subtt_a h6,
	.subtt_a h6 {
		font-size: 125%;
		padding-left: 20px;
	}

	#glist li h6,
	#glist2 li h6 {
		font-size: 100%;
		padding: 12px 12px;
	}
}


/* --------------------------------------------------------------------------
   6. 下層ページ 768px以下の細部
      対象: tokusenkai/guest.html, prize/index.html, officer/index.html,
            kishokai/index.html, link/index.html
   -------------------------------------------------------------------------- */
@media screen and (max-width: 768px) {

	/* ---- 本文エリアに左右の余白をまとめて持たせる ---- */
	#content {
		padding-left: 12px;
		padding-right: 12px;
		box-sizing: border-box;
	}

	/* 上で #content に余白を付けたので、子要素側の余白は解除 */
	#glist ul,
	#glist2 ul,
	#glist_r,
	#glist2_r,
	div.infobox,
	.txtbox {
		padding-left: 0;
		padding-right: 0;
	}

	#phgallery ul li {
		padding: 20px 0 8px;
	}

	/* ---- ページタイトルのふりがな ----
	   prize/index.html のように読みが長いページでは、絶対配置のままだと
	   折り返して見出し本文に重なるため、通常配置のブロックに変更 */
	#title h2 {
		padding: 18px 12px 14px;
		font-size: 158%;
	}

	#title h2 span {
		position: static;
		display: block;
		margin-bottom: 6px;
		font-size: 55%;
		line-height: 1.5;
	}

	/* ---- 一覧・ゲスト・役員の表（table#table01） ----
	   960px以下では横スクロールにしていますが、スマートフォンでは
	   画面幅に収めて折り返す方が読みやすいため上書きします */
	table#table01 {
		display: table;
		width: 100%;
		table-layout: fixed;
		overflow: visible;
		margin: 16px 0 24px;
	}

	table#table01 th,
	table#table01 th.g02,
	table#table01 th.gt,
	table#table01 th.s,
	table#table01 th.s02,
	table#table01 th.st,
	table#table01 td,
	table#table01 td.g02,
	table#table01 td.gt {
		width: auto;
		padding: 8px 6px;
		font-size: 12px;
		line-height: 1.6;
	}

	table#table01 th.gt,
	table#table01 th.st {
		font-size: 13px;
		padding: 8px 6px;
	}

	/* 役員ページなど、セル内に名前の画像が入っている場合 */
	table#table01 img {
		max-width: 100%;
		height: auto;
	}

	/* ---- 受賞者ページなど、表の中に画像を並べているページ ---- */
	#content table {
		max-width: 100%;
	}

	#content table img {
		max-width: 100%;
		height: auto;
	}

	/* ---- リンク集 ---- */
	/* ---- リンク集（link/index.html：1列の table） ---- */
	#link table {
		width: 100%;
	}

	#link td {
		display: block;
		width: auto;
		box-sizing: border-box;
		padding: 4px 0;
		font-size: 115%;
		line-height: 1.5;
	}

	/* リンク自体をタップしやすい高さに */
	#link td a {
		display: block;
		padding: 12px 8px;
		border-bottom: 1px solid #ddd;
	}
}


/* --------------------------------------------------------------------------
   7. 役員ページ（officer/index.html）
      ページ内 <style> の .flex 系指定を上書きします。
      このファイルは必ず </style> より後に読み込んでください。
   -------------------------------------------------------------------------- */
@media screen and (max-width: 960px) {

	/* 会名・肩書きの span は left:170px の絶対配置で、
	   親の dd が overflow:hidden のため狭い画面では文字が切れます。
	   氏名の下に置く通常配置に変更します */
	.flex dd {
		overflow: visible;
	}

	.flex dd span,
	.flex dd.dbl span,
	.flex dd span.sml,
	.flex dd span.mdl {
		position: static;
		left: auto;
		top: auto;
		display: block;
		margin-top: 0.3em;
		font-size: 0.85em;
		line-height: 1.4;
		color: #555;
	}

	/* 会名が空の項目（杵屋 君千代）で余分な行が空かないように */
	.flex dd span:empty {
		display: none;
	}

	.flex dd.dbl {
		padding: 0.5em 0;
	}

	.flex dd span img {
		display: inline-block;
	}
}

@media screen and (max-width: 768px) {

	/* 2カラムを縦積みに */
	.flex {
		display: block;
		width: 100%;
	}

	.flex div {
		display: block;
		width: 100%;
		margin: 0;
	}

	.flex dl {
		margin-bottom: 1.6em;
		font-size: 1em;
	}

	.flex dt {
		font-size: 1.15em;
	}

	.flex dd {
		padding: 0.6em 0;
	}
}


/* --------------------------------------------------------------------------
   8. 「邦楽舞踊を知る」ページ（know/index.html, know/know_02.html）
      know/css/main.css の固定幅・固定高さを打ち消します。
      responsive.css は know/css/main.css より後ろで読み込んでください。
   -------------------------------------------------------------------------- */

/* 縦書きタイトル画像の代わりに使うテキスト見出し（PCでは非表示） */
.know_title_txt {
	display: none;
}

@media screen and (max-width: 960px) {

	/* .w_box_01 は width:437px + padding-right:490px（合計950px）で組まれており、
	   padding を残すと画面幅に関係なく必ず横に溢れます */
	.w_box_01 {
		width: auto;
		max-width: 100%;
		padding-left: 12px;
		padding-right: 12px;
		box-sizing: border-box;
	}

	/* 950px固定の空要素。これ自体が横スクロールの原因になります */
	.w_clear,
	.w_box_02,
	#w_main_img {
		width: auto;
		max-width: 100%;
	}

	/* 本文カラム（570px固定）を可変に。
	   左カラムと縦書きタイトルは回り込みのまま、本文が残り幅に広がります。
	   ※ 3カラム合計950pxのままだと、この幅では本文カラムが下に落ちてしまう */
	.w_box_right {
		float: none;
		width: auto;
		max-width: 100%;
		overflow: hidden;
		padding-right: 20px;
		box-sizing: border-box;
	}

	#g_navi {
		max-width: 100%;
	}
}

@media screen and (max-width: 768px) {

	/* 3カラムを縦積みに。
	   height:700px / 600px の固定高さも解除しないと、
	   中身の少ないカラムが長大な空白の帯になります */
	.w_box_left,
	.w_box_center,
	.w_box_right {
		float: none;
		width: auto;
		max-width: 100%;
		height: auto;
		margin-left: 0;
		margin-right: 0;
		box-sizing: border-box;
	}

	.w_box_left {
		padding: 16px 12px 0;
		margin-bottom: 1.2em;
		text-align: center;
	}

	.w_box_center {
		padding: 0 12px;
		text-align: center;
	}

	.w_box_right {
		padding: 16px 12px 0;
		line-height: 1.9;
	}

	/* 縦書き75×600pxのタイトル画像は縦積みでは間延びするため、
	   横書きのテキスト見出しに差し替える */
	.w_box_center img {
		display: none;
	}

	.know_title_txt {
		display: block;
		margin: 0.8em 0 1em;
		font-family: 'Hiragino Mincho Pro', 'ヒラギノ明朝 Pro W3', 'ＭＳ Ｐ明朝', serif;
		font-size: 130%;
		font-weight: bold;
		line-height: 1.6;
		color: #333;
		text-align: center;
	}

	/* 本文冒頭の写真：回り込みを解除して本文の上に配置 */
	.w_box_right img {
		float: none;
		display: block;
		margin: 0 auto 1em;
	}

	/* know / learn タブ：437px固定で画面から溢れる。
	   枠の背景画像は幅が合わなくなるため外し、タブ2枚（各145px）を中央寄せ */
	#g_navi {
		width: auto;
		max-width: 100%;
		height: auto;
		background-image: none;
	}

	#g_navi ul {
		display: flex;
		justify-content: center;
	}

	#g_navi li {
		display: block;
	}

	#g_navi li a {
		float: none;
	}

	/* 人物切り替えタブ（185px幅の画像）は中央寄せに */
	#g_navi3 {
		margin: 0 auto;
	}
}


/* --------------------------------------------------------------------------
   9. 受賞者ページ（prize/index.html）
      受賞者名が820px幅のGIF画像に焼き込まれているページ
   -------------------------------------------------------------------------- */

/* HTML側のインライン style="margin-left:20px" を class に移したもの */
.plist {
	margin-left: 20px;
}

/* 「タップで拡大」の案内（PCでは非表示） */
.prize_note {
	display: none;
}

@media screen and (max-width: 960px) {

	.plist {
		width: 100%;
		margin-left: 0;
	}

	.plist th,
	.plist td {
		padding: 0;
	}

	.plist img {
		width: 100%;
		height: auto;
	}
}

@media screen and (max-width: 768px) {

	.prize_note {
		display: block;
		margin: 0 0 1.2em;
		padding: 0.6em 0.8em;
		background: #f5f1e6;
		border: 1px solid #d8cfb8;
		border-radius: 4px;
		font-size: 86%;
		line-height: 1.6;
		color: #555;
	}

	.plist th,
	.plist td {
		display: block;
		padding: 0 0 12px;
	}

	/* 画像をタップすると原寸（820px幅）で開ける */
	.plist a {
		display: block;
	}
}


/* --------------------------------------------------------------------------
   10. ギャラリー各回ページ（kishokai/ks_0xx.html, tokusenkai/hb_0xx.html）
   -------------------------------------------------------------------------- */
@media screen and (max-width: 768px) {

	/* 見出し帯の中にある「戻る」リンク。
	   h6 の回り込みを外した分、下の行に落ちるので独立した行として整える。
	   （.backbtn はCSSで未定義なので、ここで最小限の見た目を与えます） */
	#subtt_a .backbtn,
	.subtt_a .backbtn,
	#subtt_a p,
	.subtt_a p {
		display: block;
		padding: 0 12px 10px 26px;
		font-size: 86%;
	}

	/* 写真キャプション */
	#phgallery ul li {
		line-height: 1.7;
	}

	#phgallery ul li img {
		padding-bottom: 8px;
	}
}


/* --------------------------------------------------------------------------
   11. 特選会トップ／これまでの特別ゲスト（tokusenkai/index.html, guest.html）
   -------------------------------------------------------------------------- */
@media screen and (max-width: 768px) {

	/* 右カラムの「これまでの特別ゲスト」ボタン */
	#right {
		margin: 20px auto 0;
		text-align: center;
	}

	/* ゲスト一覧の列幅配分（table-layout:fixed のとき、
	   1行目のセル幅が全列に効きます） */
	table#table01 tr:first-child > td:nth-child(1),
	table#table01 tr:first-child > th:nth-child(1) {
		width: 28%;
	}

	table#table01 tr:first-child > th:nth-child(2) {
		width: 44%;
	}

	table#table01 tr:first-child > th:nth-child(3) {
		width: 28%;
	}

	/* <font size="-1"> の「五代目」等が小さくなりすぎるのを防ぐ */
	table#table01 font {
		font-size: 92%;
	}
}


/* --------------------------------------------------------------------------
   12. リンク集のリンク装飾（link/index.html）
       画面幅に関係なく適用されます（メディアクエリの外）。
       HTML側は <table> から <ul class="linklist"> に変更しています。
   -------------------------------------------------------------------------- */

#link .linklist {
	max-width: 640px;
	margin: 14px auto 40px;
	padding: 0;
	list-style: none;
	text-align: left;
}

#link .linklist li {
	margin-bottom: 10px;
}

#link .linklist a {
	position: relative;
	display: block;
	padding: 18px 46px 18px 24px;
	background: #fffdf5;
	border: 1px solid #e0d6bc;
	border-left: 4px solid #c9a227;
	font-family: 'Hiragino Mincho Pro', 'ヒラギノ明朝 Pro W3', 'HG明朝E', 'ＭＳ Ｐ明朝', serif;
	font-size: 118%;
	line-height: 1.5;
	color: #2b2519;
	text-decoration: none;
	transition: background-color .2s, border-color .2s, padding-left .2s;
}

/* 別窓で開くことを示す控えめな印 */
#link .linklist a::after {
	content: "\2197";
	position: absolute;
	top: 50%;
	right: 20px;
	transform: translateY(-50%);
	font-size: 88%;
	color: #b09a4e;
}

#link .linklist a:hover,
#link .linklist a:focus {
	background: #fdf6de;
	border-left-color: #8f6f14;
	padding-left: 30px;
	color: #7a1616;
}

#link .linklist a:focus-visible {
	outline: 2px solid #c9a227;
	outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
	#link .linklist a {
		transition: none;
	}
}

@media screen and (max-width: 768px) {

	#link .linklist {
		margin: 10px auto 30px;
	}

	#link .linklist a {
		padding: 16px 40px 16px 18px;
		font-size: 108%;
	}

	#link .linklist a:hover,
	#link .linklist a:focus {
		padding-left: 18px;
	}
}


/* --------------------------------------------------------------------------
   13. トップページのメインイメージ差し替え（スマートフォン用）
       768px以下では mainimg.jpg のかわりに mainimg_01.jpg を表示します。

       背景画像は要素の高さを作らないため、比率を数値で指定すると
       実寸とずれた分がそのまま余白になります。そこで、スマホ用の画像は
       HTML に <img class="mainimg_sp"> として置き、
       画像自身の縦横比で高さが決まるようにしています。
       （index.html 側にも1行追加が必要です）
   -------------------------------------------------------------------------- */

/* PCでは非表示 */
.mainimg_sp {
	display: none;
}

@media screen and (max-width: 768px) {

	/* PC用の背景画像を止め、高さも持たせない。
	   中のテキスト（公演告知）は読み上げ用に残します */
	#mainimg2 p,
	#mainimg p {
		height: 0;
		aspect-ratio: auto;
		background-image: none;
		margin: 0;
		overflow: hidden;
	}

	/* スマホ用画像。実寸の縦横比どおりに表示されます */
	.mainimg_sp {
		display: block;
		width: 100%;
		height: auto;
		margin: 0;
		vertical-align: bottom;
	}
}


/* --------------------------------------------------------------------------
   14. 受賞者一覧のテキスト版（prize/index.html）
       それまでGIF画像だった受賞者名をHTMLテキストに置き換えたものです。
   -------------------------------------------------------------------------- */

.prizelist {
	max-width: 880px;
	margin: 6px auto 34px;
	padding: 0 20px;
	list-style: none;
	text-align: left;
	box-sizing: border-box;
}

.prizelist > li {
	display: grid;
	grid-template-columns: 11.5em 1fr;
	gap: 0 1em;
	padding: 15px 0;
	border-bottom: 1px dotted #d6a8b1;
}

.prizelist > li:last-child {
	border-bottom: 0;
}

/* 年・回 */
.pz-when {
	margin: 0;
	color: #a44d58;
	font-size: 93%;
	line-height: 1.9;
	white-space: nowrap;
	letter-spacing: 0.04em;
}

.pz-no {
	margin-left: 0.7em;
}

/* 種別と受賞者 */
.pz-items {
	display: grid;
	grid-template-columns: 7em 1fr;
	gap: 6px 1em;
	margin: 0;
}

.pz-items dt,
.pz-items dd {
	margin: 0;
	line-height: 1.9;
}

.pz-items dt {
	color: #555;
	font-size: 93%;
}

.pz-items dd {
	font-family: 'Hiragino Mincho Pro', 'ヒラギノ明朝 Pro W3', 'HG明朝E', 'ＭＳ Ｐ明朝', serif;
	font-size: 112%;
	color: #1a1a1a;
}

/* 「初代」「二代目」など */
.pz-gen {
	margin-right: 0.4em;
	font-size: 76%;
	color: #6b6b6b;
}

/* 「（現・○○）」などの補足 */
.pz-note {
	font-size: 78%;
	color: #6b6b6b;
}

/* 「三人会」「金沢正州会」などの団体名 */
.pz-group {
	display: block;
	font-size: 96%;
}

@media screen and (max-width: 768px) {

	.prizelist {
		padding: 0;
		margin-bottom: 24px;
	}

	.prizelist > li {
		grid-template-columns: 1fr;
		gap: 6px 0;
		padding: 14px 0;
	}

	.pz-when {
		font-size: 90%;
		line-height: 1.5;
	}

	.pz-items {
		grid-template-columns: 1fr;
		gap: 2px 0;
	}

	.pz-items dt {
		font-size: 86%;
		color: #777;
	}

	.pz-items dd {
		margin-bottom: 8px;
		font-size: 108%;
	}

	.pz-items dd:last-child {
		margin-bottom: 0;
	}
}