MediaWiki:Common.css

/* ここに記述したCSSはすべての外装に反映されます */

/**
 * Styling for links generated by [[MediaWiki:Edittools]] in WikimediaUI inspired theme.
 * @source https://www.mediawiki.org/wiki/Extension:CharInsert#Styling
 * @updated 2020-03-17
 */
.mw-charinsert-buttons {
	margin-top: 8px;
	border: 1px solid #c8ccd1;
	padding: 2px 4px 4px;
	font-size: 1.1em;
	text-align: center;
}

.mw-charinsert-buttons a {
	background-color: #f8f9fa !important;
	color: #202122;
	border: thin #36c outset;
	padding: 0 1px 2px;
	font-size: 0.9em;
	font-weight: bold;
	text-decoration: none;
}

.mw-charinsert-buttons a:hover {
	background-color: #fff;
    color: #404244;
}

.mw-charinsert-buttons a:active {
	background-color: #c8ccd1;
	border-style: inset;
}

.client-js .mw-edittools-section {
	display: inline;
}

.client-js .mw-edittools-section input[type="button"] {
	background-color: #f8f9fa;
	color: #202122;
	margin-left: 1px;
    border-radius: 2px;
	padding: 1px 6px;
	font-size: 0.9em;
    /* Apply pointer cursor to all interactive elements. */
    cursor: pointer;
}

.client-js .mw-edittools-section input[type="button"]:hover {
	background-color: #fff;
    color: #404244;
}

.client-js .mw-edittools-section input[type="button"]:active {
	background-color: #c8ccd1;
    color: #000;
}

.box26 {
    position: relative;
    margin: 2em 0;
    padding: 0.5em 1em;
    border: solid 1px #afeeee;
    border-radius: 8px;
}
.box26 .box-title {
    position: absolute;
    display: inline-block;
    top: -13px;
    left: 10px;
    padding: 0 9px;
    line-height: 1;
    font-size: 135%;
    background: #FFF;
    color: #000;
    font-weight: bold;
}
.box26 p {
    margin: 0; 
    padding: 0;
}

/* 線形グラデーション（左右） */
.mainpage {
  width: 50%;
　background-color: #f0ffff;
  background: linear-gradient(to right, #d6eaff, #f9fcff);
  background: -moz-linear-gradient(left, #d6eaff, #f9fcff);
  background: -webkit-linear-gradient(left, #d6eaff, #f9fcff);
  border-radius: 10px;
}

/*---- DPL Forum ----*/
/* Forumheader style */
.forum-header {
	border: 1px solid #aaa; 
	background-color: #cedff2; 
	margin: 0 0 1em; 
	padding: 0 0.5em;
}
/* Forum table outside border */
table.forum-table {
	border: 1px solid lightgrey;
}
/* Forum table cell padding and borders for all table body cells */
table.forum-table > tbody > tr > td {
	border-top: 1px solid lightgrey;
	padding: 8px;
}
/* Forum table background color (show on odd rows) */
table.forum-table > tbody > tr {
	background-color:#fff;
}
/* Forum table background color (shows on even rows) */
table.forum-table > tbody > tr:nth-child(even) {
	background-color:#f5faff;
}
/* Forum table header row background, style and padding */
table.forum-table > tbody > tr > th {
	background-color:#cedff2;
	font-weight:bold;
	padding: 8px;
}

/*-- InputBox --*/
.inputbox-sidebar {
	width: 300px; 
	border: 1px solid lightgrey; 
	clear: right; 
	float: right; 
	margin: 3px; 
	padding:10px;
	margin-left: 2em;
}

/* 以下の内容はhttps://creativecommons.org/licenses/by-sa/3.0/ (クリエイティブ・コモンズ・表示・継承ライセンス3.0) のもとで公表されたウィキペディアの項目https://ja.wikipedia.org/wiki/MediaWiki:Common.css「MediaWiki:Common.css」を複製しています。
以下の内容はhttps://creativecommons.org/licenses/by-sa/3.0/ (クリエイティブ・コモンズ・表示・継承ライセンス3.0)の下で利用可能です。
変更履歴 → https:/ja.wikipedia.org/w/index.php?title=MediaWiki:Common.css&action=history */
/* フォント・ファミリの設定 */
/* [[MediaWiki‐ノート:Common.css#特定テンプレート用のCSSをTemplateStylesに移行する提案（1回目）]]により非推奨化（[[Template:Unicode]]への移行推奨） */
.Unicode {
	font-family: 'TITUS Cyberbit Basic', 'Code2000', 'Chrysanthi Unicode', 'Doulos SIL', 'Bitstream Cyberbit', 'Bitstream CyberBase', 'Bitstream Vera', 'Thryomanes', 'Gentium', 'GentiumAlt', 'Visual Geez Unicode', 'Lucida Grande', 'Arial Unicode MS', 'Microsoft Sans Serif', 'Lucida Sans Unicode', sans-serif;
}

.IPA {
	font-family: 'Charis SIL', 'Doulos SIL', 'DejaVu Sans', 'Code2000', 'Hiragino Kaku Gothic Pro', 'Matrix Unicode', 'Tahoma', 'Microsoft Sans Serif', sans-serif;
}

/* make the list of references look smaller */
ol.references,
div.reflist {
	font-size: 90%;            /* Default font-size */
}

div.reflist ol.references {
	font-size: 100%;           /* Reset font-size when nested in div.reflist */
	list-style-type: inherit;  /* Enable custom list style types */
}

/* Default style for navigation boxes */
.navbox {                     /* Navbox container style */
	box-sizing: border-box;
	border: 1px solid #a2a9b1;
	width: 100%;
	margin: auto;
	clear: both;
	font-size: 88%;
	text-align: center;
	padding: 1px;
}

.navbox + .navbox {
	margin-top: -1px;         /* Single pixel border between adjacent navboxes */
}

.navbox-inner,
.navbox-subgroup {
	width: 100%;
}

.navbox-title,
.navbox-abovebelow,
.navbox th {
	text-align: center;       /* Title, group and above/below styles */
	padding-left: 1em;
	padding-right: 1em;
}

th.navbox-group {             /* Group style */
	white-space: nowrap;
	/* @noflip */
	text-align: right;
}

.navbox,
.navbox-subgroup {
	background-color: #fdfdfd; /* Background color */
}

.navbox-list {
	border-color: #fdfdfd;    /* Must match background color */
}

/* cell spacing for navbox cells */
tr + tr > .navbox-abovebelow,
tr + tr > .navbox-group,
tr + tr > .navbox-image,
tr + tr > .navbox-list {    /* Borders above 2nd, 3rd, etc. rows */
	border-top: 2px solid #fdfdfd; /* Must match background color */
}

.navbox th,
.navbox-title {
	background-color: #ccccff;      /* Level 1 color */
}

.navbox-abovebelow,
th.navbox-group,
.navbox-subgroup .navbox-title {
	background-color: #ddddff;      /* Level 2 color */
}

.navbox-subgroup .navbox-group,
.navbox-subgroup .navbox-abovebelow {
	background-color: #e6e6ff;      /* Level 3 color */
}

.navbox-even {
	background-color: #f7f7f7;      /* Even row striping */
}

.navbox-odd {
	background-color: transparent;  /* Odd row striping */
}

/* [[MediaWiki:Common.js]] にある createCollapseButtons 関数を参照。 */
.collapseButton {
	float: right;
	font-weight: normal;
	text-align: right;
	width: auto;
}

/* Styling for jQuery makeCollapsible, matching that of collapseButton */
.mw-parser-output .mw-collapsible-toggle:not(.mw-ui-button) {
	font-weight: normal;
	/* @noflip */
	text-align: right;
	padding-right: 0.2em;
	padding-left: 0.2em;
}

.mw-collapsible-leftside-toggle .mw-collapsible-toggle {
	/* @noflip */
	float: left;
	/* @noflip */
	text-align: left;
}

/* 表組みを折り畳んだ場合、横幅が極端に狭くなることを強引に修正 */
table.mw-collapsed > caption {
	white-space: nowrap;
}

/* Style for horizontal lists (separator following item).
   @source mediawiki.org/wiki/Snippets/Horizontal_lists
   @revision 9 (2016-08-10)
   @author [[User:Edokter]]
 */
.hlist dl,
.hlist ol,
.hlist ul {
	margin: 0;
	padding: 0;
}

/* Display list items inline */
.hlist dd,
.hlist dt,
.hlist li {
	margin: 0;
	display: inline;
}

/* Display nested lists inline */
.hlist.inline,
.hlist.inline dl,
.hlist.inline ol,
.hlist.inline ul,
.hlist dl dl, .hlist dl ol, .hlist dl ul,
.hlist ol dl, .hlist ol ol, .hlist ol ul,
.hlist ul dl, .hlist ul ol, .hlist ul ul {
	display: inline;
}

/* Hide empty list items */
.hlist .mw-empty-li,
.hlist .mw-empty-elt {
	display: none;
}

/* Generate interpuncts */
.hlist dt:after {
	content: ": ";
}

.hlist dd:after,
.hlist li:after {
	content: " · ";
	font-weight: bold;
}

/* 日本語版の独自仕様。-pipe、-hyphen、-comma、-slash */
.hlist-pipe dd:after,
.hlist-pipe li:after {
	content: " | ";
	font-weight: normal;
}

.hlist-hyphen dd:after,
.hlist-hyphen li:after {
	content: " - ";
	font-weight: normal;
}

.hlist-comma dd:after,
.hlist-comma li:after {
	content: "、 ";
	font-weight: normal;
}
.hlist-slash dd:after,
.hlist-slash li:after {
	content: " / ";
	font-weight: normal;
}

.hlist dd:last-child:after,
.hlist dt:last-child:after,
.hlist li:last-child:after {
	content: none;
}

/* Add parentheses around nested lists */
.hlist dd dd:first-child:before, .hlist dd dt:first-child:before, .hlist dd li:first-child:before,
.hlist dt dd:first-child:before, .hlist dt dt:first-child:before, .hlist dt li:first-child:before,
.hlist li dd:first-child:before, .hlist li dt:first-child:before, .hlist li li:first-child:before {
	content: " (";
	font-weight: normal;
}

.hlist dd dd:last-child:after, .hlist dd dt:last-child:after, .hlist dd li:last-child:after,
.hlist dt dd:last-child:after, .hlist dt dt:last-child:after, .hlist dt li:last-child:after,
.hlist li dd:last-child:after, .hlist li dt:last-child:after, .hlist li li:last-child:after {
	content: ")";
	font-weight: normal;
}

/* Put ordinals in front of ordered list items */
.hlist ol {
	counter-reset: listitem;
}

.hlist ol > li {
	counter-increment: listitem;
}

.hlist ol > li:before {
	content: " " counter(listitem) ".\a0";
}

.hlist dd ol > li:first-child:before,
.hlist dt ol > li:first-child:before,
.hlist li ol > li:first-child:before {
	content: " (" counter(listitem) "\a0";
}

/* Avoid elements from breaking between columns */
li, dd {
	-webkit-column-break-inside: avoid;
	page-break-inside: avoid;
	break-inside: avoid-column;
}

dt {
	-webkit-column-break-after: avoid;
	page-break-after: avoid;
	break-after: avoid-column;
}

dd {
	-webkit-column-break-before: avoid;
	page-break-before: avoid;
	break-before: avoid-column;
}

/* Merge template style */
.messagebox {
	border: 1px solid #a2a9b1;
	background-color: #f8f9fa;
	width: 80%;
	margin: 0 auto 1em auto;
	padding: 0.2em;
	text-align: justify;
}

.infobox {
	border: 1px solid #a2a9b1;
	background-color: #f8f9fa;
	color: black;
	margin: 0.5em 0 0.5em 1em;
	padding: 0.2em;
	float: right;
	clear: right;
	text-align: left;
	font-size: 88%;
	line-height: 1.5em;
}

.infobox caption {
	margin-top: 0.5em;
	font-size: 125%;
	font-weight: bold;
}

.infobox td,
.infobox th {
	vertical-align: top;
}

.infobox.bordered {
	border-collapse: collapse;
}

.infobox.bordered td,
.infobox.bordered th {
	border: 1px solid #a2a9b1;
}

.infobox.bordered .borderless td,
.infobox.bordered .borderless th {
	border: 0;
}

/* styles for bordered infobox with merged rows */
.infobox.bordered .mergedtoprow td,
.infobox.bordered .mergedtoprow th {
	border: 0;
	border-top: 1px solid #a2a9b1;
	/* @noflip */
	border-right: 1px solid #a2a9b1;
}

.infobox.bordered .mergedrow td,
.infobox.bordered .mergedrow th {
	border: 0;
	/* @noflip */
	border-right: 1px solid #a2a9b1;
}

/* Styles for geography infoboxes, eg countries,
   country subdivisions, cities, etc.            */
.infobox.geography {
	border-collapse: collapse;
	line-height: 1.6em;
	font-size: 88%;
}

.infobox.geography  td,
.infobox.geography  th {
	border-top: 1px solid #a2a9b1;
	padding: 0.4em 0.6em 0.4em 0.6em;
}

.infobox.geography .mergedtoprow td,
.infobox.geography .mergedtoprow th {
	border-top: 1px solid #a2a9b1;
	padding: 0.4em 0.6em 0.2em 0.6em;
}

.infobox.geography .mergedrow td,
.infobox.geography .mergedrow th {
	border: 0;
	padding: 0 0.6em 0.2em 0.6em;
}

.infobox.geography .mergedbottomrow td,
.infobox.geography .mergedbottomrow th {
	border-top: 0;
	border-bottom: 1px solid #a2a9b1;
	padding: 0 0.6em 0.4em 0.6em;
}

.infobox.geography .maptable td,
.infobox.geography .maptable th {
	border: 0;
	padding: 0;
}

/* NavFrame関係。[[MediaWiki:Monobook.css]]も参照 */
div.NavFrame {
	margin: 0px;
	padding: 2px;
	border: 1px solid #a2a9b1;
	text-align: center;
	border-collapse: collapse;
	font-size: 95%;
}

div.NavFrame div.NavHead {
	height: 1.6em;
	font-weight: bold;
	font-size: 100%;
	background-color: #efefef;
	position: relative;
	text-align: center;
}

div.NavFrame p {
	font-size: 100%;
}

div.NavFrame div.NavContent {
	font-size: 100%;
}

div.NavFrame div.NavContent p {
	font-size: 100%;
}

a.NavToggle {
	position: absolute;
	top: 0px;
	right: 3px;
	font-weight: normal;
}

/* System messages styled similarly to fmbox */
div.mw-warning-with-logexcerpt,
div.mw-lag-warn-high,
div.mw-cascadeprotectedwarning,
div#mw-protect-cascadeon,
div.titleblacklist-warning {
	clear: both;
	margin: 0.2em 0;
	border: 1px solid #bb7070;
	background-color: #ffdbdb;
	padding: 0.25em 0.9em;
	box-sizing: border-box;
}

/* 脚注ジャンプ先強調 */
.citation:target {
	background-color: #eaf3ff;
}

/* 特定場所での改行を防ぐ:
   1) 個別に指定した場所
   2) リンク途中
   3) グループ名付きの ref タグ <ref group="注"> --> "[注 1]" */
.nowrap,
.nowraplinks a,
sup.reference a {
	white-space: nowrap;
}

/* 以下のクラスを指定した場所では解除する: */
.wrap,
.wraplinks a {
	white-space: normal;
}

/*
 * カテゴリページのリスト部にフロート指定のブロックを入れない。
 * 2009-01-24 by [[User:mizusumashi]]
 */
#mw-subcategories, #mw-pages, #mw-category-media {
	clear: both;
}

/* Don't display page title on the main page */
.page-メインページ #deleteconfirm,
.page-メインページ #t-cite,
.page-メインページ #footer-info-lastmod,
.action-view.page-メインページ #siteSub,
.action-view.page-メインページ .subtitle,
.action-view.page-メインページ .firstHeading,
.action-view.page-メインページ #contentSub,
.action-view.page-メインページ #contentSub2 {
	display: none;
}

/* Unbulleted lists */
.plainlist ol,
.plainlist ul {
	line-height: inherit;
	list-style: none;
	margin: 0;
}

.plainlist ol li,
.plainlist ul li {
	margin-bottom: 0;
}

/* [[Template:Math]]用のtexhtmlクラス。(2021-05-24更新)
   texhtml class for inline math (based on generic times-serif class) */
span.texhtml {
	font-family: "Nimbus Roman No9 L", "Times New Roman", Times, serif;
	font-size: 108%;
	line-height: 1;
	white-space: nowrap;
	/* Force tabular and lining display for texhtml */
	-webkit-font-feature-settings: "lnum", "tnum", "kern" 0;
	font-feature-settings: "lnum", "tnum", "kern" 0;
	font-variant-numeric: lining-nums tabular-nums;
	font-kerning: none;
}

span.texhtml span.texhtml {
	font-size: 100%;
}

span.mwe-math-mathml-inline {
	font-size: 108%;
}

/* Make <math display="block"> be left aligned with one space indent for
 * compatibility with style conventions
 */
.mwe-math-fallback-image-display,
.mwe-math-mathml-display {
	margin-left: 1.6em !important;
	margin-top: 0.6em;
	margin-bottom: 0.6em;
}

.mwe-math-mathml-display math {
	display: inline;
}

/* 日本語版追加分 */
span.texhtml sup {
	vertical-align: 1.0ex;
	font-size: 75%;
}

span.texhtml sub {
	vertical-align: -0.5ex;
	font-size: 75%;
}

/* MediaWiki:Common.js - modifyEditsection
   拡張節編集リンク内の分割線をビジュアルエディター無効でも表示する */
.ve-not-available .editsection-extensions .mw-editsection-divider {
	display: inline;
}

/* 履歴や本文で長い文字列を折り返せない問題の解消 */
#bodyContent {
	word-wrap: break-word;
	overflow-wrap: break-word;
}

/* Hide broken download box on [[Special:Book]] pending [[phab:T285400]] */
.mw-special-Book #coll-downloadbox {
	display: none;
}

/* T156351: Support for Parsoid's Cite implementation */
span[rel="mw:referencedBy"]::before {
    content: "^ ";
}
a[rel="mw:referencedBy"]::before {
    font-weight: bold;
    content: "^";
}
span[ rel="mw:referencedBy" ] {
    counter-reset: mw-ref-linkback 0;
}
span[ rel="mw:referencedBy" ] > a::before {
    font-weight: bold;
    font-style: italic;
    content: counter( mw-ref-linkback, lower-alpha );
}
.mw-ref > a[data-mw-group=lower-roman]::after {
    content: '[' counter( mw-Ref, lower-roman ) ']';
}   
.mw-ref > a[data-mw-group=upper-roman]::after {
    content: '[' counter( mw-Ref, upper-roman ) ']';
}
.mw-ref > a[data-mw-group=decimal]::after {
    content: '[' counter( mw-Ref, decimal ) ']';
}
.mw-ref > a[data-mw-group=lower-greek]::after {
    content: '[' counter( mw-Ref, lower-greek ) ']';
}
.mw-ref > a[data-mw-group=upper-alpha]::after {
    content: '[' counter( mw-Ref, upper-alpha ) ']';
}
.mw-ref > a[data-mw-group=lower-alpha]::after {
    content: '[' counter( mw-Ref, lower-alpha ) ']';
}

/* =========================================================
   転スラWiki メインページ
   ========================================================= */

.ts-main {
    --ts-blue: #36c;
    --ts-blue-dark: #2a4b8d;
    --ts-blue-light: #f4f7fc;
    --ts-border: #c8ccd1;
    --ts-border-light: #eaecf0;
    --ts-text: #202122;
    --ts-subtext: #54595d;
    --ts-muted: #72777d;

    width: 100%;
    max-width: 1220px;
    margin: 0 auto;
    color: var(--ts-text);
    box-sizing: border-box;
}

/*
 MediaWikiが空行から生成するp/brが
 Gridのセルとして扱われるのを防ぐ
*/
.ts-main > p,
.ts-main-section > p,
.ts-portal-grid > p,
.ts-grid-4 > p,
.ts-grid-2 > p,
.ts-main > br,
.ts-main-section > br,
.ts-portal-grid > br,
.ts-grid-4 > br,
.ts-grid-2 > br {
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}


/* =========================================================
   Welcome
   ========================================================= */

.ts-welcome {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 25px;

    margin: 0 0 20px;
    padding: 15px 18px;

    border: 1px solid var(--ts-border);
    border-radius: 5px;
    background: #fff;
}

.ts-welcome-title {
    margin: 0 0 5px;
    color: #202122;
    font-size: 1.45rem;
    font-weight: 700;
    line-height: 1.35;
}

.ts-welcome-desc {
    color: var(--ts-subtext);
    font-size: .92rem;
    line-height: 1.65;
}

.ts-welcome-count {
    flex-shrink: 0;
    padding-left: 20px;
    border-left: 1px solid var(--ts-border-light);
    color: var(--ts-muted);
    font-size: .87rem;
    white-space: nowrap;
}

.ts-welcome-count strong {
    color: var(--ts-blue-dark);
    font-size: 1.1rem;
}


/* =========================================================
   Section
   ========================================================= */

.ts-main-section {
    margin: 18px 0 !important;
    padding: 0 !important;
}

.ts-main-heading {
    margin: 0 0 10px !important;
    padding: 4px 0 7px 10px !important;

    border: 0 !important;
    border-left: 4px solid var(--ts-blue) !important;
    border-bottom: 1px solid var(--ts-border-light) !important;

    font-size: 1.2rem !important;
    font-weight: 700 !important;
    line-height: 1.4 !important;
}

.ts-main-heading::after {
    display: none !important;
}


/* =========================================================
   6 portal links
   ========================================================= */

.ts-portal-grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 0 !important;

    width: 100%;
    overflow: hidden;

    border: 1px solid var(--ts-border);
    border-radius: 5px;
    background: #fff;
}

.ts-portal-card {
    display: grid !important;
    grid-template-columns: 46px minmax(0, 1fr);
    align-items: start;
    gap: 13px;

    min-width: 0;
    min-height: 118px;

    margin: 0 !important;
    padding: 17px 18px !important;

    border-right: 1px solid var(--ts-border-light);
    border-bottom: 1px solid var(--ts-border-light);

    background: #fff;
    box-sizing: border-box;
}

.ts-portal-card:nth-of-type(3n) {
    border-right: 0;
}

.ts-portal-card:nth-last-of-type(-n+3) {
    border-bottom: 0;
}

.ts-portal-card:hover {
    background: #f8faff;
}

.ts-portal-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 42px;
    height: 42px;

    border: 1px solid #a7b9d8;
    border-radius: 5px;
    background: #f8faff;

    color: var(--ts-blue-dark);
    font-size: 1rem;
    font-weight: 700;
}

.ts-portal-title {
    margin: 1px 0 4px;
    font-size: 1.02rem;
    font-weight: 700;
}

.ts-portal-title a {
    color: var(--ts-blue-dark);
}

.ts-portal-description {
    margin: 0 0 7px;
    color: var(--ts-subtext);
    font-size: .86rem;
    line-height: 1.55;
}

.ts-portal-more {
    font-size: .84rem;
}


/* =========================================================
   General panels
   ========================================================= */

.ts-grid-4,
.ts-grid-2 {
    display: grid !important;
    gap: 0 !important;

    width: 100%;

    overflow: hidden;
    border: 1px solid var(--ts-border);
    border-radius: 5px;
    background: #fff;
}

.ts-grid-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}

.ts-grid-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}

.ts-panel {
    min-width: 0;

    margin: 0 !important;
    padding: 15px 17px !important;

    border-right: 1px solid var(--ts-border-light);
    background: #fff;

    box-sizing: border-box;
}

.ts-grid-4 > .ts-panel:last-of-type,
.ts-grid-2 > .ts-panel:last-of-type {
    border-right: none;
}

.ts-panel-heading {
    display: flex;
    align-items: center;
    gap: 6px;

    margin: 0 0 10px !important;
    padding: 0 0 7px !important;

    border-bottom: 1px solid var(--ts-border-light);

    color: var(--ts-blue-dark);
    font-size: 1rem;
    font-weight: 700;
}

.ts-panel-symbol {
    color: var(--ts-blue);
    font-weight: 700;
}

.ts-panel-content {
    margin: 0 !important;
    padding: 0 !important;

    font-size: .88rem;
    line-height: 1.65;
}

.ts-panel-content > p:first-child {
    margin-top: 0;
}

.ts-panel-content ul {
    margin: 0 0 0 1.3em !important;
    padding: 0 !important;
}

.ts-panel-content li {
    margin: 4px 0;
}


/* =========================================================
   Pickup
   ========================================================= */

.ts-pickup-label {
    display: inline-block;

    margin: 0 0 7px;
    padding: 2px 7px;

    border-radius: 3px;
    background: #eef3fb;

    color: var(--ts-blue-dark);
    font-size: .72rem;
    font-weight: 700;
}

.ts-pickup-title {
    margin: 0 0 6px;
    font-size: 1.08rem;
    font-weight: 700;
}

.ts-pickup-text {
    margin: 0;
    color: var(--ts-subtext);
    line-height: 1.6;
}

.ts-panel-footer {
    margin-top: 10px;
    text-align: right;
    font-size: .83rem;
}


/* =========================================================
   Ranking
   ========================================================= */

.ts-ranking {
    width: 100%;
    margin: 0 !important;

    border: 0 !important;
    border-collapse: collapse;
    background: transparent !important;

    font-size: .88rem;
}

.ts-ranking tr,
.ts-ranking td {
    background: transparent !important;
}

.ts-ranking td {
    padding: 4px 3px !important;
    border: 0 !important;
}

.ts-ranking-num {
    width: 26px;
    color: var(--ts-muted);
    text-align: center;
}

.ts-ranking-value {
    width: 70px;
    color: var(--ts-muted);
    text-align: right;
    white-space: nowrap;
}

.ts-up {
    color: #14866d;
    font-weight: 700;
}


/* =========================================================
   DPL
   ========================================================= */

.ts-dpl ul {
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

.ts-dpl li {
    margin: 0 !important;
    padding: 5px 0 !important;
    border-bottom: 1px dotted #d8dfe8;
}

.ts-dpl li:last-child {
    border-bottom: none;
}


/* =========================================================
   Edit
   ========================================================= */

.ts-edit-list {
    margin: 0 !important;
    padding-left: 1.25em !important;
}

.ts-edit-list li {
    margin: 4px 0;
}

.ts-beginner-box {
    margin-top: 12px;
    padding: 11px 12px;

    border-left: 3px solid var(--ts-blue);
    background: #f4f7fc;

    font-size: .86rem;
}

.ts-beginner-title {
    margin-bottom: 3px;
    font-weight: 700;
}


/* =========================================================
   About
   ========================================================= */

.ts-about {
    margin: 0;
    padding: 16px 18px;

    border: 1px solid var(--ts-border);
    border-radius: 5px;
    background: #f8f9fa;

    font-size: .9rem;
    line-height: 1.7;
}

.ts-about-title {
    margin-bottom: 5px;
    color: #202122;
    font-size: 1.03rem;
    font-weight: 700;
}


/* =========================================================
   Bottom nav
   ========================================================= */

.ts-subnav {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;

    margin: 18px 0 0;
    padding: 10px 0;

    border-top: 1px solid var(--ts-border-light);
    border-bottom: 1px solid var(--ts-border-light);

    font-size: .82rem;
}

.ts-subnav a {
    margin: 2px 0;
    padding: 0 11px;
    border-right: 1px solid var(--ts-border);
}

.ts-subnav a:last-child {
    border-right: none;
}


/* =========================================================
   Mobile / tablet
   ========================================================= */

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

    .ts-grid-4 {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .ts-grid-4 .ts-panel:nth-of-type(2n) {
        border-right: 0;
    }

    .ts-grid-4 .ts-panel:nth-of-type(-n+2) {
        border-bottom: 1px solid var(--ts-border-light);
    }
}


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

    .ts-portal-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .ts-portal-card:nth-of-type(3n) {
        border-right: 1px solid var(--ts-border-light);
    }

    .ts-portal-card:nth-of-type(2n) {
        border-right: 0;
    }

    .ts-portal-card:nth-last-of-type(-n+3) {
        border-bottom: 1px solid var(--ts-border-light);
    }

    .ts-portal-card:nth-last-of-type(-n+2) {
        border-bottom: 0;
    }

    .ts-grid-2 {
        grid-template-columns: 1fr !important;
    }

    .ts-grid-2 .ts-panel {
        border-right: 0;
        border-bottom: 1px solid var(--ts-border-light);
    }

    .ts-grid-2 .ts-panel:last-of-type {
        border-bottom: 0;
    }

    .ts-welcome {
        display: block;
    }

    .ts-welcome-count {
        margin-top: 10px;
        padding: 8px 0 0;
        border-top: 1px solid var(--ts-border-light);
        border-left: 0;
    }
}


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

    .ts-portal-grid,
    .ts-grid-4 {
        grid-template-columns: 1fr !important;
    }

    .ts-portal-card,
    .ts-portal-card:nth-of-type(2n),
    .ts-portal-card:nth-of-type(3n) {
        border-right: 0;
        border-bottom: 1px solid var(--ts-border-light);
    }

    .ts-portal-card:last-of-type {
        border-bottom: 0;
    }

    .ts-grid-4 .ts-panel,
    .ts-grid-4 .ts-panel:nth-of-type(2n) {
        border-right: 0;
        border-bottom: 1px solid var(--ts-border-light);
    }

    .ts-grid-4 .ts-panel:last-of-type {
        border-bottom: 0;
    }
}
.ts-spoiler-note {
    color: var(--ts-muted);
    font-size: .82rem;
}
.ts-ranking-value {
    color: var(--ts-muted);
    font-size: .82rem;
}

/* =========================================================
   転スラ年表・転スラ全史
   共通デザイン
   ========================================================= */


/* =========================================================
   0. 基本
   ========================================================= */

.ts-chronology,
.ts-fullchronology {
    width: 100%;
    max-width: none;
    box-sizing: border-box;
}


/* 年表内でMediaWiki側が生成する段落余白を抑える */
.ts-chronology p,
.ts-fullchronology p,
.ts-chron-entry p,
.ts-fullchron-entry p {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}


/* =========================================================
   1. ページ上部
   ========================================================= */

.ts-chron-header,
.ts-fullchron-header {
    width: 100%;
    margin: 0 0 20px;
    padding: 0;
}


/* ---------- 導入文 ---------- */

.ts-chron-lead,
.ts-fullchron-lead {
    margin: 0 0 12px;
    padding: 0;

    font-size: 1rem;
    line-height: 1.85;
}


/* ---------- 注意書き ---------- */

.ts-chron-notice,
.ts-fullchron-notice {
    margin: 14px 0;
    padding: 10px 14px;

    background: #f8f9fa;

    border: 1px solid #c8ccd1;
    border-left: 3px solid #36c;
    border-radius: 2px;

    font-size: .94rem;
    line-height: 1.75;

    box-sizing: border-box;
}

.ts-chron-notice p,
.ts-fullchron-notice p {
    margin: 0 !important;
}

.ts-chron-notice p + p,
.ts-fullchron-notice p + p {
    margin-top: 5px !important;
}


/* ---------- 年表内ナビ ---------- */

.ts-chron-nav,
.ts-fullchron-nav {
    margin: 14px 0 18px;
    padding: 7px 0;

    border-top: 1px solid #c8ccd1;
    border-bottom: 1px solid #c8ccd1;

    font-size: .94rem;
    line-height: 1.8;
}

.ts-chron-nav a,
.ts-fullchron-nav a {
    white-space: nowrap;
}


/* ---------- 他方の年表へのリンクなど ---------- */

.ts-chron-more,
.ts-fullchron-more {
    margin: 8px 0 0;
    padding: 0;

    font-size: .94rem;
    line-height: 1.6;
}


/* =========================================================
   2. 時代セクション
   ========================================================= */

.ts-chron-section,
.ts-fullchron-section {
    width: 100%;

    margin: 20px 0 26px !important;
    padding: 0 !important;

    box-sizing: border-box;
}


/* 年表と全史の見出しを完全に同じデザインにする */
h2.ts-chron-section-title,
h2.ts-fullchron-section-title,
.ts-chron-section-title,
.ts-fullchron-section-title {
    margin: 0 0 8px !important;
    padding: 5px 10px !important;

    border-top: 0 !important;
    border-right: 0 !important;
    border-bottom: 1px solid #c8ccd1 !important;
    border-left: 4px solid #36c !important;

    background: transparent !important;

    font-size: 1.18rem !important;
    font-weight: 600 !important;
    line-height: 1.5 !important;

    box-sizing: border-box;
}


/* =========================================================
   3. タイムライン本体
   ========================================================= */

.ts-chron-list,
.ts-fullchron-list {
    position: relative;

    display: block !important;

    width: 100% !important;
    max-width: none !important;

    margin: 0 !important;
    padding: 0 !important;

    gap: 0 !important;

    box-sizing: border-box;
}


/* ---------- 縦線 ---------- */

.ts-chron-list::before,
.ts-fullchron-list::before {
    content: "";

    position: absolute;

    left: 145px;
    top: 0;
    bottom: 0;

    width: 1px;

    background: #a7c1ee;

    z-index: 0;
}


/* =========================================================
   4. 1件の出来事
   ========================================================= */

.ts-chron-entry,
.ts-fullchron-entry {
    position: relative;

    display: grid !important;
    grid-template-columns: 130px minmax(0, 1fr) !important;
    column-gap: 30px !important;

    width: 100% !important;
    max-width: none !important;

    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;

    margin: 0 !important;

    /*
     * 以前よりかなりコンパクト。
     * これ以上狭くすると逆に詰まりすぎるため
     * まずは7px / 9pxを標準とする。
     */
    padding: 7px 0 9px !important;

    border-bottom: 1px solid #eaecf0;

    box-sizing: border-box;
}


/* 最終項目 */
.ts-chron-entry:last-child,
.ts-fullchron-entry:last-child {
    border-bottom: 0;
}


/* ---------- タイムライン上の丸 ---------- */

.ts-chron-entry::before,
.ts-fullchron-entry::before {
    content: "";

    position: absolute;

    left: 140px;
    top: 12px;

    width: 11px;
    height: 11px;

    background: #fff;

    border: 2px solid #36c;
    border-radius: 50%;

    box-sizing: border-box;

    z-index: 2;
}


/* =========================================================
   5. 年代
   ========================================================= */

.ts-chron-date,
.ts-fullchron-date {
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;

    margin: 0 !important;
    padding: 0 !important;

    text-align: right;

    color: #2457a6;

    font-size: .94rem;
    font-weight: 600;
    line-height: 1.5;

    white-space: nowrap;

    box-sizing: border-box;
}


/* =========================================================
   6. 本文エリア
   ========================================================= */

.ts-chron-body,
.ts-fullchron-main {
    display: block !important;

    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;

    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;

    margin: 0 !important;
    padding: 0 !important;

    box-sizing: border-box;
}


/* =========================================================
   7. 出来事名
   ========================================================= */

.ts-chron-event,
.ts-fullchron-event {
    width: 100%;

    margin: 0 0 2px !important;
    padding: 0 !important;

    font-size: 1rem;
    font-weight: 700;
    line-height: 1.55;

    box-sizing: border-box;
}


/* =========================================================
   8. 概要
   ========================================================= */

.ts-chron-summary,
.ts-fullchron-summary {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;

    margin: 0 !important;
    padding: 0 !important;

    font-size: .96rem;
    line-height: 1.65;

    box-sizing: border-box;
}


/* =========================================================
   9. 全史のみ：人物・国家・組織・出典
   ========================================================= */

.ts-fullchron-meta {
    display: block !important;

    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;

    height: auto !important;
    min-height: 0 !important;

    margin: 5px 0 0 !important;
    padding: 0 !important;

    box-sizing: border-box;
}


/* ---------- 1行 ---------- */

.ts-fullchron-meta-row {
    position: static !important;

    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start !important;

    float: none !important;

    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;

    height: auto !important;
    min-height: 0 !important;

    margin: 1px 0 !important;
    padding: 0 !important;

    gap: 8px;

    line-height: 1.55;

    box-sizing: border-box;
}


/* ---------- 人物・国家・組織・出典ラベル ---------- */

.ts-fullchron-meta-label {
    display: block !important;

    flex: 0 0 3.5em !important;

    width: 3.5em !important;
    min-width: 3.5em !important;
    max-width: 3.5em !important;

    margin: 0 !important;
    padding: 0 !important;

    color: #54595d;

    font-size: .9rem;
    font-weight: 600;
    line-height: 1.55;

    white-space: nowrap !important;

    box-sizing: border-box;
}


/* ---------- 実際の値 ---------- */

.ts-fullchron-meta-value {
    display: block !important;

    flex: 1 1 auto !important;

    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;

    margin: 0 !important;
    padding: 0 !important;

    font-size: .9rem;
    line-height: 1.55;

    white-space: normal !important;

    word-break: normal !important;
    overflow-wrap: anywhere;

    box-sizing: border-box;
}


/* =========================================================
   10. 年代・前後関係に関する注記
   ========================================================= */

.ts-order-note {
    width: 100%;

    margin: 3px 0 0 !important;
    padding: 0 !important;

    color: #72777d;

    font-size: .78rem;
    line-height: 1.5;
}


/* =========================================================
   11. 詳細を見る
   ========================================================= */

.ts-chron-detail,
.ts-fullchron-detail {
    width: 100%;

    margin: 4px 0 0 !important;
    padding: 0 !important;

    font-size: .9rem;
    line-height: 1.5;
}


/* =========================================================
   12. リンク
   ========================================================= */

.ts-chronology a,
.ts-fullchronology a {
    text-decoration: none;
}

.ts-chronology a:hover,
.ts-fullchronology a:hover {
    text-decoration: underline;
}


/* =========================================================
   13. タブレット
   ========================================================= */

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

    .ts-chron-list::before,
    .ts-fullchron-list::before {
        left: 125px;
    }

    .ts-chron-entry,
    .ts-fullchron-entry {
        grid-template-columns: 110px minmax(0, 1fr) !important;
        column-gap: 30px !important;
    }

    .ts-chron-entry::before,
    .ts-fullchron-entry::before {
        left: 120px;
    }
}


/* =========================================================
   14. スマートフォン
   ========================================================= */

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

    /* ---------- ページ上部 ---------- */

    .ts-chron-header,
    .ts-fullchron-header {
        margin-bottom: 14px;
    }

    .ts-chron-lead,
    .ts-fullchron-lead {
        font-size: .95rem;
        line-height: 1.75;
    }

    .ts-chron-notice,
    .ts-fullchron-notice {
        margin: 10px 0;
        padding: 9px 11px;

        font-size: .88rem;
        line-height: 1.7;
    }


    /* ナビは横スクロール可能にする */
    .ts-chron-nav,
    .ts-fullchron-nav {
        margin: 10px 0 14px;
        padding: 6px 0;

        overflow-x: auto;
        overflow-y: hidden;

        white-space: nowrap;

        font-size: .88rem;

        -webkit-overflow-scrolling: touch;
    }


    /* ---------- セクション ---------- */

    .ts-chron-section,
    .ts-fullchron-section {
        margin: 16px 0 22px !important;
    }

    h2.ts-chron-section-title,
    h2.ts-fullchron-section-title,
    .ts-chron-section-title,
    .ts-fullchron-section-title {
        margin-bottom: 6px !important;
        padding: 5px 8px !important;

        font-size: 1.08rem !important;
    }


    /* ---------- 縦線 ---------- */

    .ts-chron-list::before,
    .ts-fullchron-list::before {
        left: 8px;
    }


    /* ---------- 1件 ---------- */

    .ts-chron-entry,
    .ts-fullchron-entry {
        display: block !important;

        width: 100% !important;

        margin: 0 !important;

        padding:
            7px
            0
            8px
            27px !important;
    }


    /* 丸 */
    .ts-chron-entry::before,
    .ts-fullchron-entry::before {
        left: 3px;
        top: 12px;

        width: 11px;
        height: 11px;
    }


    /* ---------- 年代 ---------- */

    .ts-chron-date,
    .ts-fullchron-date {
        margin: 0 0 2px !important;

        text-align: left;

        font-size: .84rem;
        line-height: 1.45;
    }


    /* ---------- 出来事 ---------- */

    .ts-chron-event,
    .ts-fullchron-event {
        margin-bottom: 2px !important;

        font-size: .96rem;
        line-height: 1.5;
    }


    /* ---------- 概要 ---------- */

    .ts-chron-summary,
    .ts-fullchron-summary {
        font-size: .9rem;
        line-height: 1.6;
    }


    /* ---------- 全史メタ情報 ---------- */

    .ts-fullchron-meta {
        margin-top: 4px !important;
    }

    .ts-fullchron-meta-row {
        gap: 5px;

        margin: 1px 0 !important;

        line-height: 1.5;
    }

    .ts-fullchron-meta-label {
        flex-basis: 3.2em !important;

        width: 3.2em !important;
        min-width: 3.2em !important;
        max-width: 3.2em !important;

        font-size: .82rem;
    }

    .ts-fullchron-meta-value {
        font-size: .82rem;
        line-height: 1.5;
    }


    /* ---------- 注記 ---------- */

    .ts-order-note {
        margin-top: 3px !important;

        font-size: .74rem;
    }


    /* ---------- 詳細 ---------- */

    .ts-chron-detail,
    .ts-fullchron-detail {
        margin-top: 3px !important;

        font-size: .84rem;
    }
}

/* ResourceLoader cache refresh 2026-08-28 */

/* 案内・お知らせボックス */
.ts-notice-box {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 12px 0 20px;
	padding: 12px 16px;
	background: #f5f9ff;
	border: 1px solid #a2a9b1;
	border-left: 5px solid #36c;
	border-radius: 2px;
	box-sizing: border-box;
}

.ts-notice-icon {
	flex: 0 0 auto;
	width: 28px;
	height: 28px;
	border: 2px solid #36c;
	border-radius: 50%;
	color: #36c;
	font-size: 18px;
	font-weight: bold;
	line-height: 24px;
	text-align: center;
}

.ts-notice-content {
	flex: 1;
	line-height: 1.6;
}

@media screen and (max-width: 600px) {
	.ts-notice-box {
		align-items: flex-start;
		padding: 10px 12px;
	}
}
/* =========================================================
   転スラWiki 外部画像スライドギャラリー
   PC / タブレット / スマートフォン対応
   ========================================================= */


/* ---------------------------------------------------------
   ギャラリー全体
   --------------------------------------------------------- */

.ts-gallery {
	position: relative;
	display: block;

	width: 100%;
	max-width: 100%;

	margin: 0.8em 0 1.5em;
	padding: 0;

	box-sizing: border-box;
}


/* テンプレート側でタイトルを指定した場合 */
.ts-gallery__title {
	margin: 0 0 0.6em;
	padding: 0;

	font-size: 1.05em;
	font-weight: 700;
	line-height: 1.4;
}


/* ---------------------------------------------------------
   横スクロール領域
   --------------------------------------------------------- */

.ts-gallery__track {
	display: flex !important;
	flex-flow: row nowrap !important;
	align-items: flex-start !important;

	gap: 12px;

	width: 100% !important;
	max-width: 100% !important;

	margin: 0;
	padding: 4px 46px 12px 2px;

	overflow-x: auto !important;
	overflow-y: hidden !important;

	box-sizing: border-box;

	/* スワイプ後にカード位置で止まる */
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;

	-webkit-overflow-scrolling: touch;
	overscroll-behavior-x: contain;

	/* PCでは細いスクロールバー */
	scrollbar-width: thin;
	scrollbar-color: #a2a9b1 transparent;
}


.ts-gallery__track::-webkit-scrollbar {
	height: 6px;
}


.ts-gallery__track::-webkit-scrollbar-track {
	background: transparent;
}


.ts-gallery__track::-webkit-scrollbar-thumb {
	background: #a2a9b1;
	border-radius: 999px;
}


/* ---------------------------------------------------------
   1枚ごとのカード
   --------------------------------------------------------- */

.ts-gallery__item {
	/*
	 * PCで巨大になりすぎないよう固定気味にする。
	 * 画面が狭ければ自動的に小さくなる。
	 */
	flex: 0 0 clamp(300px, 31vw, 380px) !important;

	width: clamp(300px, 31vw, 380px) !important;
	max-width: calc(100% - 24px) !important;

	min-width: 0 !important;

	margin: 0;
	padding: 0;

	background: #fff;

	border: 1px solid #a2a9b1;
	border-radius: 5px;

	overflow: hidden;

	box-sizing: border-box;

	scroll-snap-align: start;
	scroll-snap-stop: always;
}


/* ---------------------------------------------------------
   画像を入れる共通枠
   --------------------------------------------------------- */

.ts-gallery__imagebox {
	/*
	 * 画像そのものではなく「表示枠」を統一する。
	 * これによって縦長・横長でも高さが揃う。
	 */
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;

	width: 100% !important;

	height: 300px !important;
	min-height: 300px !important;
	max-height: 300px !important;

	margin: 0 !important;
	padding: 0 !important;

	background: #f8f9fa;

	overflow: hidden;

	box-sizing: border-box;
}


/*
 * imgがリンクで囲まれた場合にも対応
 */
.ts-gallery__imagebox > a {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;

	width: 100% !important;
	height: 100% !important;

	margin: 0 !important;
	padding: 0 !important;

	box-sizing: border-box;
}


/* ---------------------------------------------------------
   画像本体
   ここが重要
   --------------------------------------------------------- */

.ts-gallery__imagebox img,
.ts-gallery img.ts-gallery__image {

	display: block !important;

	/*
	 * width:100%;
	 * height:100%;
	 * にはしない。
	 *
	 * 画像本来の縦横比を維持して
	 * 枠に収まるところまで縮小する。
	 */
	width: auto !important;
	height: auto !important;

	max-width: 100% !important;
	max-height: 100% !important;

	min-width: 0 !important;
	min-height: 0 !important;

	margin: auto !important;
	padding: 0 !important;

	/*
	 * 念のためcontainを指定。
	 * 画像をトリミングしない。
	 */
	object-fit: contain !important;
	object-position: center center !important;

	border: 0 !important;

	box-shadow: none !important;

	vertical-align: middle !important;
}


/* ---------------------------------------------------------
   キャプション
   --------------------------------------------------------- */

.ts-gallery__caption {
	display: block;

	margin: 0;
	padding: 10px 12px 12px;

	font-size: 12px;
	line-height: 1.6;

	color: #202122;
	background: #fff;

	box-sizing: border-box;

	/*
	 * 長いURLや著作権表記が
	 * スマホ画面からはみ出すのを防ぐ
	 */
	overflow-wrap: anywhere;
	word-break: normal;
}


.ts-gallery__caption p {
	margin-top: 0;
	margin-bottom: 0.4em;
}


.ts-gallery__caption p:last-child {
	margin-bottom: 0;
}


.ts-gallery__source {
	display: inline;

	font-size: 11px;
	line-height: 1.55;

	color: #54595d;

	overflow-wrap: anywhere;
}


/* 外部リンクが長くてもカードからはみ出させない */
.ts-gallery__caption a,
.ts-gallery__source a {
	overflow-wrap: anywhere;
}


/* ---------------------------------------------------------
   左右移動ボタン
   Common.jsで生成されるもの
   --------------------------------------------------------- */

.ts-gallery__nav {
	position: absolute;

	/*
	 * 画像領域のほぼ中央に配置。
	 * キャプションの高さには影響されない。
	 */
	top: 154px;

	z-index: 20;

	display: flex;
	align-items: center;
	justify-content: center;

	width: 40px;
	height: 40px;

	margin: 0;
	padding: 0;

	border: 1px solid rgba(84, 89, 93, 0.45);
	border-radius: 50%;

	background: rgba(255, 255, 255, 0.92);
	color: #202122;

	font-family: Arial, sans-serif;
	font-size: 27px;
	font-weight: normal;
	line-height: 1;

	cursor: pointer;

	box-shadow: 0 1px 5px rgba(0, 0, 0, 0.22);

	transform: translateY(-50%);

	transition:
		background-color 0.15s ease,
		opacity 0.15s ease,
		border-color 0.15s ease;
}


.ts-gallery__prev {
	left: 10px;
}


.ts-gallery__next {
	right: 10px;
}


.ts-gallery__nav:hover {
	background: #fff;
	border-color: #72777d;
}


.ts-gallery__nav:focus-visible {
	outline: 2px solid #36c;
	outline-offset: 2px;
}


.ts-gallery__nav:disabled {
	opacity: 0.25;
	cursor: default;
}


/*
 * 横スクロールできない場合は
 * ボタン自体を隠す
 */
.ts-gallery:not(.ts-gallery--scrollable) .ts-gallery__nav {
	display: none;
}


/* =========================================================
   中程度の画面
   ========================================================= */

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

	.ts-gallery__item {
		flex-basis: clamp(290px, 45vw, 360px) !important;
		width: clamp(290px, 45vw, 360px) !important;
	}

}


/* =========================================================
   スマートフォン
   ========================================================= */

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

	.ts-gallery {
		width: 100% !important;
		max-width: 100% !important;

		margin: 0.6em 0 1.2em !important;
		padding: 0 !important;
	}


	.ts-gallery__track {
		/*
		 * vwではなく親要素のwidthを基準にする。
		 * Minervaの本文幅を超えないため重要。
		 */
		width: 100% !important;
		max-width: 100% !important;

		gap: 9px;

		margin: 0 !important;

		/*
		 * 右側に少し余白を置くことで、
		 * 次のカードが見える。
		 */
		padding: 3px 30px 8px 0 !important;

		overflow-x: auto !important;
		overflow-y: hidden !important;

		scroll-snap-type: x mandatory;

		/*
		 * スマホではスクロールバーを隠す。
		 * スワイプ自体は可能。
		 */
		scrollbar-width: none;
	}


	.ts-gallery__track::-webkit-scrollbar {
		display: none;
	}


	.ts-gallery__item {
		/*
		 * 86vwを使わない。
		 *
		 * MobileFrontendでは本文領域と
		 * viewport幅が一致しない場合があるため、
		 * 親要素基準にする。
		 *
		 * 右に次の画像が少しだけ見える。
		 */
		flex: 0 0 calc(100% - 28px) !important;

		width: calc(100% - 28px) !important;
		max-width: calc(100% - 28px) !important;

		min-width: 0 !important;
	}


	.ts-gallery__imagebox {
		/*
		 * スマホは大きすぎない高さ。
		 * 同じ端末では全画像が必ず同じ高さになる。
		 */
		height: clamp(220px, 64vw, 270px) !important;
		min-height: clamp(220px, 64vw, 270px) !important;
		max-height: clamp(220px, 64vw, 270px) !important;
	}


	/*
	 * Minerva側のimg指定より強くして
	 * 縦横比を必ず維持する
	 */
	.ts-gallery__imagebox img,
	.ts-gallery img.ts-gallery__image {
		width: auto !important;
		height: auto !important;

		max-width: 100% !important;
		max-height: 100% !important;

		object-fit: contain !important;
		object-position: center center !important;
	}


	.ts-gallery__caption {
		padding: 9px 10px 11px !important;

		font-size: 12px;
		line-height: 1.6;
	}


	.ts-gallery__source {
		font-size: 10.5px;
		line-height: 1.55;
	}


	.ts-gallery__nav {
		/*
		 * clampの画像高におおよそ合わせる
		 */
		top: clamp(113px, 32vw, 138px);

		width: 34px;
		height: 34px;

		font-size: 23px;

		background: rgba(255, 255, 255, 0.88);
	}


	.ts-gallery__prev {
		left: 5px;
	}


	.ts-gallery__next {
		right: 5px;
	}

}


/* =========================================================
   非常に狭いスマートフォン
   ========================================================= */

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

	.ts-gallery__track {
		padding-right: 24px !important;
	}


	.ts-gallery__item {
		flex-basis: calc(100% - 22px) !important;

		width: calc(100% - 22px) !important;
		max-width: calc(100% - 22px) !important;
	}


	.ts-gallery__imagebox {
		height: 220px !important;
		min-height: 220px !important;
		max-height: 220px !important;
	}


	.ts-gallery__nav {
		top: 113px;
	}

}


/* =========================================================
   印刷
   ========================================================= */

@media print {

	.ts-gallery__track {
		display: block !important;

		overflow: visible !important;
		padding: 0 !important;
	}


	.ts-gallery__item {
		display: inline-block !important;

		width: 45% !important;
		max-width: 45% !important;

		margin: 0 2% 1em 0;

		vertical-align: top;
	}


	.ts-gallery__nav {
		display: none !important;
	}

}