@charset "UTF-8";
/*
 * 記事の表の共通パーツ（functions/tables.php が組み立てる）。wysiwyg.css のあとに読み込む。PC とスマホで同じ作り（スマホは大きさだけ詰める）
 *
 *   .mtable                 表の枠（横にはみ出すときだけ横スクロール）
 *   .mtable--spec           2列の「項目｜内容」（基本情報・料金など）
 *   .mtable--data           見出しの行＋データ
 *   .mtable--compare        アプリの比較（1列目などにアプリのパーツ）
 *   .mtable--box            1列の表（囲み）
 *   .mtable--list           アプリの並び（1列が1アプリの表。表ではなく ul で縦に積む）
 *   .mtable--nolabel        アプリを2つ並べるだけの比較表（見出しの列を出さない）
 *   .mtable--stick          横スクロールのとき1列目（項目名・アプリ）を左に固定してよい表
 *   .is-scroll              いま横スクロールになっている（assets/js/mtable.js）
 *   .mtable-app             アプリのパーツ（アイコン / 順位・キャッチコピー / 名前 / 説明 / ボタン。サービスDB と一致したセルだけ）
 *
 * WordPress 本体（.wp-block-table）とテーマ（.wysiwyg table）の表の指定は、ここでは使わない（線・ストライプ・余白をすべて打ち消す）
 */

/* ============================================================
 * 色・大きさ（ここを変えれば全部の表が変わる）
 * ============================================================ */
.wysiwyg .mtable {
	--mt-line: #e4ebe9;        /* 罫線 */
	--mt-frame: #d5e0dd;       /* 外枠 */
	--mt-head-bg: #44c4a4;     /* 列の見出し */
	--mt-head-fg: #fff;
	--mt-label-bg: #f4f8f7;    /* 行の見出し（項目名） */
	--mt-label-fg: #2f3a37;
	--mt-text: #333;
	--mt-sub: #6b7672;
	--mt-stripe: #fafcfb;
	--mt-accent: #f5498f;      /* ボタン */
	--mt-radius: 8px;
	--mt-fs: 14px;
	--mt-pad-y: 10px;
	--mt-pad-x: 12px;
	--mt-icon: 48px;
}
@media screen and (max-width: 768px) {
	.wysiwyg .mtable {
		--mt-fs: 13px;
		--mt-pad-y: 8px;
		--mt-pad-x: 8px;
		--mt-icon: 40px;
	}
}

/* ============================================================
 * 枠
 * ============================================================ */
.wysiwyg .mtable {
	margin: 0;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}
.wysiwyg * + .mtable,
.wysiwyg .mtable + * {
	margin-top: 20px;
}
/* 古い枠（.wysiwyg_table・figure.wp-block-table・.layout_table）は、ただの入れ物にする */
.wysiwyg .wysiwyg_table:has(> .mtable),
.wysiwyg .wp-block-table:has(> .mtable),
.wysiwyg .layout_table:has(> .mtable) {
	overflow: visible;
	width: auto;
	margin: 0;
	border: none;
}

/* ============================================================
 * 表（共通）: 古い指定を打ち消してから決める
 * ============================================================ */
/* 打ち消しの強さ: WordPress 本体（.wp-block-table thead・.is-style-stripes tbody tr:nth-child(odd) など）とテーマ（.wysiwyg td など）には勝ち、
   このファイルのあとの指定（.wysiwyg .mtable th など、同じ強さで後ろにある）には負けるようにしてある */
.wysiwyg .mtable thead,
.wysiwyg .mtable tbody,
.wysiwyg .mtable tfoot,
.wysiwyg .mtable th,
.wysiwyg .mtable td {
	border: 0;
	background: none;
	box-shadow: none;
	height: auto;
	width: auto;
}
.wysiwyg .mtable .mtable__table tr {
	border: 0;
	background: none;
}
.wysiwyg .mtable .mtable__table {
	width: 100% !important;
	margin: 0;
	border-collapse: separate;
	border-spacing: 0;
	border: 1px solid var(--mt-frame);
	border-radius: var(--mt-radius);
	background: #fff;
	table-layout: auto;
	font-size: var(--mt-fs);
}
.wysiwyg .mtable th,
.wysiwyg .mtable td {
	padding: var(--mt-pad-y) var(--mt-pad-x);
	border-top: 1px solid var(--mt-line);
	border-left: 1px solid var(--mt-line);
	background: #fff;
	color: var(--mt-text);
	font-size: var(--mt-fs);
	font-weight: 400;
	line-height: 1.6;
	letter-spacing: 0.02em;
	text-align: left;
	vertical-align: middle;
	white-space: normal;
	overflow-wrap: anywhere;
}
/* どの列も、文字が1文字ずつ縦に並ぶほど細くしない（表のセルには min-width が効かないので、幅のある見えない要素を置く） */
.wysiwyg .mtable th::after,
.wysiwyg .mtable td::after {
	content: "";
	display: block;
	width: 4.5em;
	height: 0;
}
/* 角を丸める（表に overflow: hidden を付けると1列目の固定が効かなくなるので、四隅のセルに付ける） */
.wysiwyg .mtable .mtable__table > :first-child > tr:first-child > :first-child { border-top-left-radius: calc(var(--mt-radius) - 1px); }
.wysiwyg .mtable .mtable__table > :first-child > tr:first-child > :last-child { border-top-right-radius: calc(var(--mt-radius) - 1px); }
.wysiwyg .mtable .mtable__table > :last-child > tr:last-child > :first-child { border-bottom-left-radius: calc(var(--mt-radius) - 1px); }
.wysiwyg .mtable .mtable__table > :last-child > tr:last-child > :last-child { border-bottom-right-radius: calc(var(--mt-radius) - 1px); }
/* 外枠と重なる線は消す（左端の列・最初の行） */
.wysiwyg .mtable tr > :first-child {
	border-left: 0;
}
.wysiwyg .mtable .mtable__table > :first-child > tr:first-child > * {
	border-top: 0;
}
/* セルの中の文字の大きさは、セルにそろえる（記事で直に指定した大きさは使わない） */
.wysiwyg .mtable td *,
.wysiwyg .mtable th * {
	font-size: inherit;
	line-height: inherit;
}
.wysiwyg .mtable td p,
.wysiwyg .mtable th p {
	margin: 0;
}
.wysiwyg .mtable td p + p,
.wysiwyg .mtable td p + ul,
.wysiwyg .mtable td ul + p {
	margin-top: 4px;
}
/* 表の中の箇条書き: テーマの箇条書き（左に 2.5rem と点）は表には広すぎるので詰める */
.wysiwyg .mtable td ul,
.wysiwyg .mtable td ol {
	margin: 0;
	padding: 0;
}
.wysiwyg .mtable td ul li,
.wysiwyg .mtable td ol li {
	margin: 0;
	padding-left: 1.1em;
	text-align: left;
}
.wysiwyg .mtable td li + li {
	margin-top: 4px;
}
.wysiwyg .mtable td ul li::before {
	left: -0.3em;
	top: 0;
	transform: scale(0.45);
}
/* 画像の印（指・メモ。幅16px）の箇条書きは、印の幅に合わせて空ける */
.wysiwyg .mtable td ul.point li,
.wysiwyg .mtable td ul.is-style-point li,
.wysiwyg .mtable td ul.memo li,
.wysiwyg .mtable td ul.is-style-memo li {
	padding-left: 22px;
	background-position: left 0.3em;
}
.wysiwyg .mtable td ol li::before {
	left: 0;
	width: auto;
	text-align: left;
}
/* 文中の小さな画像（行頭の印など）は文字と並べる */
.wysiwyg .mtable td img:not(.mtable-app__icon),
.wysiwyg .mtable th img:not(.mtable-app__icon) {
	display: inline-block;
	max-width: 100%;
	height: auto;
	margin: 0 4px 0 0;
	vertical-align: middle;
}
.wysiwyg .mtable strong,
.wysiwyg .mtable b {
	font-weight: 700;
}

/* 列の見出し */
.wysiwyg .mtable thead th {
	background: var(--mt-head-bg);
	color: var(--mt-head-fg);
	font-weight: 700;
	text-align: center;
	border-left-color: rgba(255, 255, 255, 0.35);
}
.wysiwyg .mtable thead th * {
	color: var(--mt-head-fg) !important;
}
/* 行の見出し（項目名）: 短い項目名が1〜2文字ずつ折れないように最低の幅を持たせる */
.wysiwyg .mtable tbody th[scope="row"] {
	background: var(--mt-label-bg);
	color: var(--mt-label-fg);
	font-weight: 700;
	min-width: 5.5em;
}
.wysiwyg .mtable tbody th[scope="row"] :not(.mtable-app__btn):not(.mtable-app__catch) {
	color: inherit !important;
}

/* ============================================================
 * 型ごと
 * ============================================================ */
/* spec: 項目｜内容 */
.wysiwyg .mtable--spec tbody th[scope="row"] {
	width: 30%;
}
/* 揃え方は1つ: 値のセルは左。中央は列の見出し・アプリのセル・記号だけのセル（◎ × など。functions/tables.php が印を付ける）だけ */
.wysiwyg .mtable td.mtable__mark {
	text-align: center;
}
.wysiwyg .mtable--data tbody tr:nth-child(even) td {
	background: var(--mt-stripe);
}
/* box: 1列の表は囲み */
.wysiwyg .mtable--box .mtable__table {
	border-color: var(--mt-line);
}
.wysiwyg .mtable--box td,
.wysiwyg .mtable--box th {
	padding: 14px 16px;
	background: var(--mt-label-bg);
	color: var(--mt-text);
	font-weight: 400;
	text-align: left;
}
/* アプリを2つ並べるだけの比較表は、見出しの列を出さない */
.wysiwyg .mtable--nolabel > .mtable__table > tbody > tr > th[scope="row"]:first-child {
	display: none;
}
.wysiwyg .mtable--nolabel > .mtable__table > tbody > tr > th[scope="row"]:first-child + * {
	border-left: 0;
}

/* ============================================================
 * アプリのパーツ（.mtable-app）
 *   [アイコン] [本文: 順位・キャッチコピー / 名前 / 説明] [ボタン]
 *   表のセルの中では縦に積む（セルが細いので）。アプリの並び（.mtable-list）では横に並べる
 * ============================================================ */
.wysiwyg .mtable .mtable-app {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	text-align: center;
}
.wysiwyg .mtable .mtable-app__body {
	display: flex;
	flex-direction: column;
	align-items: inherit;
	gap: 2px;
	min-width: 0;
}
.wysiwyg .mtable .mtable-app__top {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: inherit;
	gap: 2px 6px;
}
.wysiwyg .mtable .mtable-app__rank {
	font-size: 13px;
	font-weight: 700;
	line-height: 1.3;
	color: var(--mt-text);
}
.wysiwyg .mtable .mtable-app__catch {
	font-size: 11px;
	font-weight: 700;
	line-height: 1.4;
	color: var(--mt-head-bg);
}
.wysiwyg .mtable .mtable-app__icon-link {
	display: block;
	flex: none;
	line-height: 0;
}
.wysiwyg .mtable .mtable-app__icon {
	display: block;
	flex: none;
	width: var(--mt-icon) !important;
	height: var(--mt-icon) !important;
	margin: 0;
	object-fit: contain;
	border-radius: 22%;
}
.wysiwyg .mtable a.mtable-app__name {
	text-decoration: none;
}
.wysiwyg .mtable .mtable-app__name {
	font-size: 14px;
	font-weight: 700;
	line-height: 1.4;
	color: var(--mt-text);
}
.wysiwyg .mtable .mtable-app__note {
	font-size: 11px;
	font-weight: 400;
	line-height: 1.5;
	color: var(--mt-sub);
}
.wysiwyg .mtable .mtable-app__btn {
	display: inline-block;
	flex: none;
	padding: 6px 14px;
	border-radius: 999px;
	background: var(--mt-accent);
	color: #fff !important;
	font-size: 12px;
	font-weight: 700;
	line-height: 1.3;
	white-space: nowrap;
	text-decoration: none !important;
}
.wysiwyg .mtable .mtable-app__btn:hover {
	opacity: 0.85;
}
/* サービスDB と一致しないセルのボタン（テーマの .btn01。高さ 60px の固定とリンクの重ね方を外す）も、アプリのパーツのボタンと同じ形にする */
.wysiwyg .mtable .layout_btn {
	margin: 6px 0 0;
}
.wysiwyg .mtable .btn01 {
	display: table;
	width: auto;
	min-width: 0;
	max-width: 100%;
	height: auto !important;
	margin: 4px auto 0;
	padding: 0;
	border: 0 !important;
	border-radius: 999px;
	background: var(--mt-accent) !important;
	font-size: 12px !important;
	line-height: 1.3;
	letter-spacing: 0;
}
.wysiwyg .mtable .btn01::before,
.wysiwyg .mtable .btn01::after {
	display: none;
}
.wysiwyg .mtable .btn01 > span {
	display: block;
	padding: 0;
}
/* ボタンの中のリンクは重ねない（テーマは「囲み > リンク」「囲み > span > リンク」のどちらでもリンクを枠いっぱいに重ねる） */
.wysiwyg .mtable .btn01 a,
.wysiwyg .mtable a.btn01 > span {
	position: static !important;
	display: block;
	width: auto;
	height: auto;
	padding: 6px 14px;
	color: #fff !important;
	font-size: 12px;
	font-weight: 700;
	line-height: 1.3;
	white-space: nowrap;
	text-decoration: none !important;
}
.wysiwyg .mtable .micro_copy {
	margin: 0;
	font-size: 11px;
	line-height: 1.4;
}

/* アフィリエイトの計測用の画像（1px）は読み込むだけ */
.wysiwyg .mtable .mtable-app > img:not(.mtable-app__icon),
.wysiwyg .mtable .mtable-app > a:not([class]) {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
	pointer-events: none;
}
.wysiwyg .mtable .mtable__app-cell {
	text-align: center !important;
	min-width: 7em;
}
@media screen and (max-width: 768px) {
	.wysiwyg .mtable .mtable-app__btn {
		padding: 5px 12px;
		font-size: 11px;
	}
}

/* ============================================================
 * アプリの並び（.mtable-list: 1アプリ1行で縦に積む）
 * ============================================================ */
.wysiwyg .mtable--list {
	overflow: visible;
}
.wysiwyg .mtable .mtable-list {
	margin: 0;
	padding: 0;
	border: 1px solid var(--mt-frame);
	border-radius: var(--mt-radius);
	background: #fff;
	list-style: none;
}
.wysiwyg .mtable .mtable-list > li {
	margin: 0;
	padding: 12px;
	list-style: none;
}
.wysiwyg .mtable .mtable-list > li + li {
	border-top: 1px solid var(--mt-line);
}
.wysiwyg .mtable .mtable-list > li::before {
	content: none;
}
.wysiwyg .mtable .mtable-list .mtable-app {
	flex-direction: row;
	align-items: center;
	gap: 12px;
	text-align: left;
}
.wysiwyg .mtable .mtable-list .mtable-app__body {
	flex: 1;
	align-items: flex-start;
}
.wysiwyg .mtable .mtable-list .mtable-app__top {
	justify-content: flex-start;
}

/* ============================================================
 * 横スクロール
 *   スマホで列が4つ以上の表は、列に最低限の幅を持たせて詰めすぎない（入りきらない分は横スクロール）
 *   1列目が項目名かアプリの表（.mtable--stick）だけ、1列目を左に固定する
 * ============================================================ */
@media screen and (max-width: 768px) {
	.wysiwyg .mtable--compare .mtable__table:has(tr > :nth-child(4)),
	.wysiwyg .mtable--data .mtable__table:has(tr > :nth-child(4)) {
		width: max-content !important;
		min-width: 100%;
	}
	.wysiwyg .mtable__table:has(tr > :nth-child(4)) th,
	.wysiwyg .mtable__table:has(tr > :nth-child(4)) td {
		min-width: 5.5em;
		max-width: 12em;
	}
	.wysiwyg .mtable--compare .mtable__table:has(tr > :nth-child(4)) td:has(ul, ol, br) {
		min-width: 9em;
	}
}
.wysiwyg .mtable--stick.is-scroll tr > :first-child {
	position: sticky;
	left: 0;
	z-index: 1;
	box-shadow: 1px 0 0 var(--mt-frame);  /* 影は付けず、線だけで区切る */
}
.wysiwyg .mtable.is-scroll::before {
	content: "横にスクロールできます →";
	display: block;
	position: sticky;
	left: 0;
	margin-bottom: 4px;
	font-size: 11px;
	line-height: 1.4;
	color: #888;
	text-align: right;
}