@charset "UTF-8";
/**
 * Story.css
 * ./css/story.css
 *
 * Last Update: 2025-01-18
 * ----------------------------------------------------------------------*/

@import url(story--link.css);


/**
 * Story
* ----------------------------------------------------------------------*/
.story {
	--content__width--max: 118.6rem;
	--article__padding-inline: 2.5rem;
	--article__bg--color: #f5f5f0;
	--article__font-size--smaller: 1.2rem;
	--article__font-size--tagcloud: 1.2rem;
	--article__font-size--meta: 1.2rem;
}

.story {
	background-color: var(--article__bg--color);
	width: min(100%, var(--content__width--max));
	margin-inline: auto;
	padding-bottom: 6rem;
	font-size: 1.4rem;
}

/*------------------ story > Header */
.story-header {
	position: relative;
	padding-inline: var(--article__padding-inline);
}

/*------------------ story > Hero */
.story-hero {
	position: relative;
	width: 100%;
	margin-top: 6rem;
}

/*------------------ story > Body */
.story-body__container {
	position: relative;
}

.story-body {
	position: relative;
	padding-inline: var(--article__padding-inline);
	line-height: 2;
	margin-top: 6rem;
	overflow: hidden;
}

.story-sidebar {
	display: none;
	position: relative;
	margin-top: 6rem;
}



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


@media (min-width: 1024px) {
	.story-body__container {
		display: grid;
		grid-template-columns: auto 30rem;
	}
	.story-sidebar {
		display: block;
	}
}

/*------------------ story > Footnote */
.story-footnote {
	position: relative;
	padding-inline: var(--article__padding-inline);
	margin-top: 6rem;
}

/*------------------ story > Footer */
.story-footer {
	position: relative;
	padding-inline: var(--article__padding-inline);
	margin-top: 6rem;
}


@media (min-width: 768px) {
	.story-hero {
		width: min(96vw, var(--content__width--max));
		margin-inline: auto;
	}
}


/**
 * story > Header
* ----------------------------------------------------------------------*/
/* Parent */
.story-header {
	display: flex;
	flex-direction: column;
}

/* Children */
.story-header-masthead {
	order: 1;
	margin-top: 3rem;
}

.story-header-meta {
	order: 2;
	margin-top: 2rem;
}

.story-header-keyword {
	order: 3;
	margin-top: 2rem;
}


/*------------------ story > header > Masthead */
/* Parent */
.story-header-masthead {
	position: relative;
	display: flex;
	flex-direction: column;
}

/* Children */
.story-header__serial {
	order: 2;
	position: absolute; /* 意図：連載タイトル有無問わずタイトル位置を変えない為 */
	left: 0; top: 0;
}

.story-header__headline {
	order: 3;
	margin-top: 4.4rem;
}

.story-header__subhead {
	order: 4;
}
.story-header__excerpt {
	order: 5;
	margin-top: 3rem;
}


/*------------------ story > header > Meta */
/* Parent */
.story-header-meta {
	display: flex;
	flex-direction: row;
	/*justify-content: flex-end;*/
	justify-content: flex-start;
	align-items: center;
	gap: 1rem;
}

/* Children */
.story-header__author {
	order: 1;
}
.story-header__postNo {
	order: 2;
}
.story-header__date--published {
	order: 3;
}
.story-header__date--modified {
	order: 4;
}

/*------------------ story > header > Keyword */
/* Parent */
.story-header-keyword {}


/* Children */
.story-header__taxonomy {}





/**
 * story > Header --Module
* ----------------------------------------------------------------------*/

/*------------------ Headline */
.story-header__headline {
	font-size: var(--story__font-size--h1);
	font-weight: 600;
	line-height: 1.25;
	text-align: justify;
}

/*------------------ SubHead */
.story-header__subhead {
	text-align: justify;
}

/*------------------ Serial */
.story-header__serial {
	font-size: var(--story__font-size--tagcloud);
}

.story-header__serial .serial-container {
	display: flex;
	flex-direction: row;
	gap: 0;
	border: 1px solid #555;
	border-radius: 4px;
}

.story-header__serial .serial__title {
	font-weight: 700;
}

.story-header__serial .serial__episode {
	font-weight: 700;
	padding: 0.8rem 1rem;
	line-height: 1;
}

.story-header__serial .serial__link {
	display: block;
	padding: 0.8rem 1rem;
	line-height: 1;
	background-color: #555;
	color: #fff;
	border-radius: 2px;
	text-decoration: none;
}

.story-header__serial .serial__link:hover {
	background-color: #777;
}

.story-header__serial .serial__link::before {
	content: "\23";
	font-family: 'Font Awesome 5 Free';
	font-weight: 900;
	padding-right: 0.4rem;
}

/*------------------ Excerpt */
.story-header__excerpt {
	font-size: 1.2rem;
	line-height: 1.75;
}

/*------------------ Meta Common */
.story-header-meta {
	font-size: 1.2rem;
}
.story-header-meta__prefix {}
.story-header-meta__content {}

/*------------------ date */
/* Common */
.story-header__date::before {
	font-family: 'Font Awesome 5 Free';
}

/* Published date */
.story-header__date--published::before {
	content: "\f274";
	font-weight: 400;
}

/* Modified date */
.story-header__date--modified::before {
	content: "\f2f1";
	font-weight: 900;
}

/*------------------ Author */
.story-header__author {
	display: inline-block;
	height: 40px;
	line-height: 40px;
}

.story-header__author::before {
	content: "";
	display: inline-block;
	vertical-align: middle;
	width: 40px; height: 40px;
	margin-right: 10px;
	background-size: contain;
	border-radius: 20px;
}

/* avatar */
.story-header__author--task::before {
	background-image: url(https://solfablab.com/img/avatar/taskmomizome.png);
}

/*------------------ Post Number */
.story-header__postNo {}

.story-header__postNo::before {
	font-family: 'Font Awesome 5 Free';
	font-weight: 900;
	content: "\f0c6";
}


/*------------------ Taxonomy */
/* ul */
.story-header__taxonomy .taxonomy-list {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	gap: 10px;
}

/* ul > li */
.story-header__taxonomy .taxonomy__item {
	flex: 1 1 auto;
	font-size: 1.2rem;
	font-weight: 700;
}

.story-header__taxonomy .taxonomy__item:last-child {
	flex: none;
}

/* ul > li > a */
.story-header__taxonomy .taxonomy__link {
	display: block;
	padding: 0.8rem 1rem;
	line-height: 1;
	background-color: #555;
	color: #fff;
	border-radius: 2px;
	text-decoration: none;
}

.story-header__taxonomy .taxonomy__link:hover {
	background-color: #777;
}

/* Icon */
.story-header__taxonomy .taxonomy__link::before {
	font-family: 'Font Awesome 5 Free';
	padding-right: 0.4rem;
}

.story-header__taxonomy .taxonomy__item--cat .taxonomy__link::before {
	content: "\f07b";
	font-weight: 900;
}

.story-header__taxonomy .taxonomy__item--vec .taxonomy__link::before {
	content: "\f0eb";
	font-weight: 900;
}

.story-header__taxonomy .taxonomy__item--tag .taxonomy__link::before {
	content: "\f02b";
	font-weight: 900;
}




/**
 * Story Hero
* ----------------------------------------------------------------------*/
.story-hero__figure {}
.story-hero__picture {}

/* Media */
.story-hero__media {
	width: 100%;
}

/* Caption */
.story-hero__caption {
	position: absolute;
	bottom: 0; left: 0;
	width: 100%;
	background-color: rgba(0, 0, 0, 0.618);
	color: #fff;
	padding: 0.6rem var(--article__padding-inline);
}




/**
 * Story Body
* ----------------------------------------------------------------------*/
/*-------- .story-body-section
	Story Body 3セクションのレイアウト
----------------------------------------------- */
/* Def　*/
.story-body {
	--story__margin-top--p: 2.8rem;
	--story__margin-top--h3: calc(var(--story__margin-top--p) * 3);
	--story__margin-top--h2: calc(var(--story__margin-top--p) * 4);
	--story__margin--tab: 3rem;
}

/* Common */
.story-body-section {}

/* Opener */
.story-body__opener {}

/* Main */
.story-body__main {}

/* Closer */
.story-body__closer {}



/*-------- Margin
	Story Body Section 直下のレイアウト
----------------------------------------------- */

/*------------------ 暗黙的セクション */
/* h2 */
.story-body > h2,
.story-body-section > h2 {
	margin-top: var(--story__margin-top--h2);
}

/* h3 */
.story-body > h3,
.story-body-section > h3 {
	margin-top: var(--story__margin-top--h3);
}

.story-body > h2 + h3,
.story-body-section > h2 + h3 {
	margin-top: var(--story__margin-top--p);
}

/*------------------ パラグラフ */
/* p */
.story-body > p,
.story-body-section > p {
	margin-top: var(--story__margin-top--p);
}

/* h4 */
.story-body > h4,
.story-body-section > h4 {
	margin-top: var(--story__margin-top--p);
}

/* h5 ～ h6 */
.story-body > h5,
.story-body-section > h5 {
	margin-top: var(--story__margin-top--p);
}
.story-body > h6,
.story-body-section > h6 {
	margin-top: var(--story__margin-top--p);
}

/* h5 ～ h6 のすぐ後の 段落 */
.story-body > h5 + p,
.story-body-section > h5 + p,
.story-body > h6 + p,
.story-body-section > h6 + p {
	margin-top: calc(var(--story__margin-top--p) / 4);
}

/* hr */
.story-body > hr,
.story-body-section > hr {
	margin-top: var(--story__margin-top--p);
}

/*------------------ 主要ブロックレベル */
/* ul ol table */
.story-body > ul,
.story-body-section > ul,
.story-body > ol,
.story-body-section > ol,
.story-body > table,
.story-body-section > table {
	margin-top: var(--story__margin-top--p);
}

.story-body > pre,
.story-body-section > pre {
	margin-top: var(--story__margin-top--p);
}

.story-body > figure,
.story-body-section > figure,
.story-body > blockquote,
.story-body-section > blockquote {
	margin-top: calc(var(--story__margin-top--p) + 0.8rem);
}

.spotlight, .fukidashi {
	margin-top: var(--story__margin-top--p);
}

.dialog, .interview, .chat, .procedure {
	margin-top: var(--story__margin-top--p);
}



/**
 * Story Footnote
* ----------------------------------------------------------------------*/
/*------------------ Common */
.story-footnote {
	display: flex;
	flex-direction: column;
	gap: 6em;
}

/* footnote > Item */
.story-footnote-item {}

/* footnote > item > Content */
.footnote-item-content {
	background-color: #ececec;
	box-shadow: 0 1px 3px #d1cfc6;
	border-radius: 0.5rem;
	padding: 2.4rem 2.8rem ;
	margin-top: 3rem;
}

/* footnote > item > content > Media */
.footnote-item-content-media {}

/* footnote > item > content > Body */

/* Title */
.footnote__title {
	font-size: var(--story__font-size--h2);
	font-weight: 600;
	line-height: 1;
}

.footnote__title::before {
	font-family: 'Font Awesome 5 Free';
	padding-right: 1rem;
}

/* Image */
.footnote__image {}

/* Name */
.footnote__name {}

/* Note */
.footnote__note {}

/*------------------ Author */
/* Title icon */
.footnote--author .footnote__title::before {
	font-weight: 900;
	content: "\f304";
}

/* footnote > item > Content */
.footnote--author .footnote-item-content {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	gap: 1.6rem;
}

/* footnote > item > content > Media */
.footnote--author .footnote-item-content-media {
	--footnote-author__icon--size: 6rem;
	width: var(--footnote-author__icon--size);
	aspect-ratio: 1 / 1;
}

/* Image */
.footnote--author .footnote__image {
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: calc(var(--footnote-author__icon--size) / 2);
}

/* footnote > item > content > Name */
.footnote--author .footnote-item-content-name {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

/* Name */
.footnote--author .footnote__name {
	font-size: var(--story__font-size--h2);
	font-weight: bold;
	line-height: 1;
}

/* AUX name */
.footnote--author .footnote__aux {
	font-size: 1.2rem;
	color: #7e7e7e;
	line-height: 1;
}

/* Note */
.footnote--author .footnote__note {
	font-size: 1.2rem;
	text-align: justify;
}


/*------------------ Product */
/* Title icon */
.footnote--product .footnote__title::before {
	font-weight: 900;
	content: "\f07a";
}
/*------------------ Information */
/* Title icon */
.footnote--info .footnote__title::before {
	font-weight: 900;
	content: "\f3c5";
}
/*------------------ Profile */
/* Title icon */
.footnote--profile .footnote__title::before {
	font-weight: 900;
	content: "\f007";
}
/*------------------ Video */
/* Title icon */
.footnote--video .footnote__title::before {
	font-weight: 900;
	content: "\f03d";
}




/**
 * Story Footer
* ----------------------------------------------------------------------*/
/* Parent */
.story-footer {
	display: flex;
	flex-direction: column;
	gap: 3rem;
}

/* Children */
.story-footer-meta {
	order: 2;
	margin-top: 2rem;
}

.story-footer-keyword {
	order: 3;
	margin-top: 2rem;
}

.story-footer__seriallink {}
.story-footer__permalink {}
.story-footer__share {}




/*------------------ story > footer > Meta */
/* Parent */
.story-footer-meta {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	/*justify-content: flex-end;*/
	justify-content: flex-start;
	align-items: center;
	gap: 1rem;
}

/* Children */
.story-footer__author {
	order: 1;
}
.story-footer__postNo {
	order: 2;
}
.story-footer__date--published {
	order: 3;
}
.story-footer__date--modified {
	order: 4;
}

/*------------------ story > footer > Keyword */
/* Parent */
.story-footer-keyword {}


/* Children */
.story-footer__taxonomy {}




/*------------------ Meta Common */
.story-footer-meta {
	font-size: 1.2rem;
}
.story-footer-meta__prefix {}
.story-footer-meta__content {}

/*------------------ date */
/* Common */
.story-footer__date::before {
	font-family: 'Font Awesome 5 Free';
}

/* Published date */
.story-footer__date--published::before {
	content: "\f274";
	font-weight: 400;
}

/* Modified date */
.story-footer__date--modified::before {
	content: "\f2f1";
	font-weight: 900;
}

/*------------------ Author */
.story-footer__author {
	display: inline-block;
	height: 40px;
	line-height: 40px;
}

.story-footer__author::before {
	content: "";
	display: inline-block;
	vertical-align: middle;
	width: 40px; height: 40px;
	margin-right: 10px;
	background-size: contain;
}

/* avatar */
.story-footer__author--task::before {
	background-image: url(https://solfablab.com/img/avatar/taskmomizome.png);
}

/*------------------ Post Number */
.story-footer__postNo {}

.story-footer__postNo::before {
	font-family: 'Font Awesome 5 Free';
	font-weight: 900;
	content: "\f0c6";
}




/*------------------ Share */
.story-footer__share {
	position: relative;
}

.story-footer-share__list {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	column-gap: 0.8rem;
}
.story-footer-share__item {}
.story-footer-share__link {
	display: grid;
	place-items: center;
	color: #000;
	width: 100%; aspect-ratio: 4 / 3;
}
.share--twitter .story-footer-share__link {
	background-color: var(--gen__col--twitter);
}
.share--facebook .story-footer-share__link {
	background-color: var(--gen__col--facebook);
}
.share--hatena .story-footer-share__link {
	background-color: var(--gen__col--hatena);
}
.share--pocket .story-footer-share__link {
	background-color: var(--gen__col--pocket);
}
.share--feedly .story-footer-share__link {
	background-color: var(--gen__col--feedly);
}
.story-footer-share__media {
	height: 38.2%; width: auto;
	fill: #fff;
}
.share--twitter .story-footer-share__media {}
.share--facebook .story-footer-share__media {}
.share--hatena .story-footer-share__media {}
.share--pocket .story-footer-share__media {}
.share--feedly .story-footer-share__media {}

/*------------------ Permalink */
.story-footer-permalink__input {
	width: 100%;
	text-align: center;
	border: 1pt solid #292929;
	background-color: #fff;
	border-radius: 0.3rem;
}
.story-footer-permalink__input:focus {
	outline: none;
}


/*------------------ Seriallink */
.story-footer__seriallink{
	position: relative;
}
.story-footer-seriallink__list{
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-between;
}
.story-footer-seriallink__item{}
.story-footer-seriallink__link{}

/*------------------ Meta */


/*------------------ Taxonomy */
/* ul */
.story-footer__taxonomy .taxonomy-list {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	gap: 10px;
}

/* ul > li */
.story-footer__taxonomy .taxonomy__item {
	flex: 1 1 auto;
	font-size: 1.2rem;
	font-weight: 700;
}

.story-footer__taxonomy .taxonomy__item:last-child {
	flex: none;
}

/* ul > li > a */
.story-footer__taxonomy .taxonomy__link {
	display: block;
	padding: 0.8rem 1rem;
	line-height: 1;
	background-color: #555;
	color: #fff;
	border-radius: 2px;
	text-decoration: none;
}

.story-footer__taxonomy .taxonomy__link:hover {
	background-color: #777;
}

/* Icon */
.story-footer__taxonomy .taxonomy__link::before {
	font-family: 'Font Awesome 5 Free';
	padding-right: 0.4rem;
}

.story-footer__taxonomy .taxonomy__item--cat .taxonomy__link::before {
	content: "\f07b";
	font-weight: 900;
}

.story-footer__taxonomy .taxonomy__item--vec .taxonomy__link::before {
	content: "\f0eb";
	font-weight: 900;
}

.story-footer__taxonomy .taxonomy__item--tag .taxonomy__link::before {
	content: "\f02b";
	font-weight: 900;
}



/**
 * Story Footnote
* ----------------------------------------------------------------------*/



/**
 * Story Body Style --Basic
* ----------------------------------------------------------------------*/
/*------------------ Margin */
/*
	※レイアウト全体にかかわる p や h などのマージンは
	　もう少し前の項の「Story Body」の項で定義
/*


/*------------------ Paragraph */
.story-body > p,
.story-body-section > p {
	text-align: justify;
	line-break: strict;
}

.story-body .tab--1 {
	margin-left: var(--story__margin--tab);
}
.story-body .tab--2 {
	margin-left: calc(var(--story__margin--tab) * 2);
}
.story-body .tab--3 {
	margin-left: calc(var(--story__margin--tab) * 3);
}
.story-body .tab--4 {
	margin-left: calc(var(--story__margin--tab) * 4);
}


/* 字下げ
　General > .jisage でも定義してある */
.story-body h2 + p,
.story-body h3 + p,
.story-body h4 + p {
  text-indent: 1em;
}

/* ダッシュ
　General > .dash でも定義してある */

/* n段組みと流し込み */
.dangumi {
	columns: 3 20em; /* カラム数　カラム幅 */
	column-gap: 2em;
	column-rule: dotted 4px gray;
}

/*------------------ img */

.story-body img {}

.story-body .align--left {
	float: left;
	clear: both;
	margin-top: var(--story__margin-top--p);
	margin-right: 1.6rem;
}

.story-body .align--right {
	float: right;
	clear: both;
	margin-top: var(--story__margin-top--p);
	margin-left: 1.6rem;
}

.story-body .align--center {
	margin-inline: auto;
}



/*------------------ a */

.story-body a {
	color: #16a6b6;
	text-decoration: none;
}
.story-body a:visited {
	color: #007383;
	text-decoration: none;
}
.story-body a:hover {
	color: #666;
	text-decoration: underline;
}
.story-body a:active {
	color: #00adef;
	text-decoration: underline;
}

/*------------------ selection */
.story-body::selection {
	background: #592e16;
	color: #fff;
}

/*------------------ hr */
.story-body hr {
	border-color: #bbb;
}
.story-body .w--full {
	width: calc(100% + (var(--article__padding-inline) * 2));
	margin-left: calc(var(--article__padding-inline) * -1);
}



/*-------- Heading
	見出し h2～h6
----------------------------------------------- */
.story-body h2 {
	font-size: var(--story__font-size--h2);
	font-weight: bold;
	line-height: 1.25;
	padding-bottom: .3em;
	border-bottom: 1px solid hsla(210,18%,87%,1);
}

.story-body h3 {
	font-size: var(--story__font-size--h3);
	font-weight: bold;
	line-height: 1.25;
	border-bottom: 1px solid hsla(210,18%,87%,1);
}

.story-body h4 {
	font-size: var(--story__font-size--h4);
	font-weight: bold;
	line-height: 1.25;
}

.story-body h5 {
	font-size: var(--story__font-size--h5);
	font-weight: bold;
	line-height: 1.25;
}

.story-body h6 {
	font-size: var(--story__font-size--h6);
	font-weight: bold;
	line-height: 1.25;
}


/**
 * Story Body Style --Inline (Basic)
* ----------------------------------------------------------------------*/

/*-------- strong 意味的 強調（重め）
　　・重要性、深刻性、緊急性を示す（多用はダメでしょう） */

.story-body p strong {
	font-weight: 900;
	font-size: 1.25em;
}

/* 見た目を変えない場合 */
.story-body p strong.semantic {
	font-weight: normal;
	font-size: 1em;
}

/*-------- em 意味的 強調
　　・段落中の使用回数で重要度が上がってくる（乱用はしないこと） */

/* デフォルト：ボールド */
.story-body p em {
	font-weight: bold;
}

/*-------- b 装飾的 強調
　　・重要性は表さない
　　・目立たせる目的 */

/* デフォルト：ボールド */
.story-body p b {
	font-weight: bold;
}

/*-------- mark 注目ポイント
　　・引用でも使える（b/em/strongなどはダメ
　　・検索結果の一致で使われる */

.story-body p mark {
	background: linear-gradient(transparent 61.8%, #df7 0%);
}

/*-------- i イタリック
　　・会話や専門用語や固有名詞 */

.story-body p i {
	font-style: italic;
}

/*-------- class指定による装飾だけ再現
　　・非セマンティックでありたい場合 */

/* ボールド */
.story-body p .em--bold {
	font-weight: bolder;
}

/* 圏点 */
.story-body p .em--kenten {
	text-emphasis: filled dot;
	font-weight: normal;
}

/* マーカー */
.story-body p .em--marker {
	background: linear-gradient(transparent 61.8%, #df7 0%);
}

/* アンダーライン */
.story-body p .em--solid {
	text-decoration: underline solid red;
}

/* 波線 */
.story-body p .em--wavy {
	text-decoration: underline wavy red;
}

/* “ダブルクォーテーション” */
.story-body p .em--kakko-q2::before {
	content: "\201C";
}
.story-body p .em--kakko-q2::after {
	content: "\201D";
}

/* 〝ダブルミニュート〟 */
.story-body p .em--kakko-m2::before {
	content: "\301D";
}
.story-body p .em--kakko-m2::after {
	content: "\301F";
}

/* 「かぎかっこ」 */
.story-body p .em--kakko-k1 {}
.story-body p .em--kakko-k1::before {
	content: "「";
}
.story-body p .em--kakko-k1::after {
	content: "」";
}

/* 『二重かぎかっこ』 */
.story-body p .em--kakko-k2 {}
.story-body p .em--kakko-k2::before {
	content: "『";
}
.story-body p .em--kakko-k2::after {
	content: "』";
}

/* 〈山かっこ〉 */
.story-body p .em--kakko-y1 {}
.story-body p .em--kakko-y1::before {
	content: "〈";
}
.story-body p .em--kakko-y1::after {
	content: "〉";
}

/* 《二重山かっこ》 */
.story-body p .em--kakko-y2 {}
.story-body p .em--kakko-y2::before {
	content: "《";
}
.story-body p .em--kakko-y2::after {
	content: "》";
}

/* «ギュメ» */
.story-body p .em--guillemet {
	font-weight: normal;
}
.story-body p .guillemet::before {
	content: "\00AB";
}
.story-body p .guillemet::after {
	content: "\00BB";
}

/*-------- q インライン引用
　　・引用でも使える（b/em/strongなどはダメ
　　・検索結果の一致で使われる */

.story-body p q {
	quotes: "\301D" "\301F" "\2018" "\2019";
	/* アメリカ英語式 */
	/*quotes: "\201C" "\201D" "\2018" "\2019";*/
	/* イギリス英語式 */
	/*quotes: "\2018" "\2019" "\201C" "\201D";*/
}
/*-------- cite 引用元
　　 */

.story-body p cite {}
.story-body p cite::before {
	content: "『";
}
.story-body p cite::after {
	content: "』";
}

/*-------- s 打消し線
　　・delと違いカジュアルに使おうかと */
.story-body p s {
	opacity: 0.3;
}


/*-------- dfn 固有名詞
　　・まだいまいちつかいかたがわからん */

.story-body p dfn {}
.story-body p dfn::before {
	content: "\00AB";
}
.story-body p dfn::after {
	content: "\00BB";
}


/*-------- code 文中のソースコード
　　段落中に表記するソースコード */

.story-body p code {
	font-family: ui-monospace,SFMono-Regular,SF Mono,Menlo,Consolas,Liberation Mono,monospace;
	white-space: break-spaces;
	background-color: rgba(0,0,0,.08);
	font-size: .88em;
	padding: .2em .4em;
	border-radius: 6px;
}




 /**
 * Block Level
* --------------------------------------------------------------------*/
/*-------- .spotlight
	注
----------------------------------------------- */
.spotlight {
	border-left: .25rem solid;
	padding-left: 1.6rem;
}
.spotlight--accent b:first-child,
.spotlight--accent strong:first-child {
	color: #0969da;
	font-weight: 600;
	font-size: 1em;
}




/*-------- .fukidashi
	ふきだし強調
----------------------------------------------- */
.fukidashi {
	--fukidashi__scale-factor: calc(100vw * 1.25);
	display: flex;
	justify-content: center;
	align-items: center;
	margin-left: calc(var(--article__padding-inline) * -1);
	width: min(100vw, var(--content__width--max));
	height: min(calc((310 / 810) * var(--fukidashi__scale-factor)), 310px);
	background-size: auto min(calc((310 / 810) * var(--fukidashi__scale-factor)), 310px);
	overflow: hidden;
}
.fukidashi i {
	display: grid;
	place-content: center;
	width: min(calc((500 / 810) * var(--fukidashi__scale-factor)), 500px);
	text-align: center;
	font-size: min(calc((36 / 810) * var(--fukidashi__scale-factor)), 3.6rem);
	line-height: min(calc((40 / 810) * var(--fukidashi__scale-factor)), 4rem);
	font-style: italic;
	font-weight: bold;
}
.fukidashi--punky {
	background-image: url(https://solfablab.com/img/general/fukidashi-punky-810x310.svg);
	background-repeat: no-repeat;
	background-position: center center;
}
.fukidashi--smoky {
	background-image: url(https://solfablab.com/img/general/fukidashi-smoky-810x310.svg);
	background-repeat: no-repeat;
	background-position: center center;
}
.fukidashi--radial {
	background-image: url(https://solfablab.com/img/general/fukidashi-radial-810x310.svg);
	background-repeat: no-repeat;
	background-position: center center;
}
.fukidashi--wavy {
	background-image: url(https://solfablab.com/img/general/fukidashi-wavy-810x310.svg);
	background-repeat: no-repeat;
	background-position: center center;
}



/*-------- .dialog
	ふきだし会話形式
----------------------------------------------- */
/* 変数定義 */
.dialog {
	/* paddingラインからのはみ出し量 */
	--dialog-section__protrusion: calc(var(--article__padding-inline) * 0.618);
	/* 100%幅に両サイドはみ出し量を加えたもの */
	--dialog-section__width: calc(100% + (var(--dialog-section__protrusion) * 2));
	/* ふきだしの末端をpaddingラインまで引っ込める */
	--dialog-tweet__width: calc(100% - var(--dialog-section__protrusion));
	--dialog__width: 100%;
	--dialog-avatar__width: clamp(60px, 15.625vw, 120px);
	/*--dialog-avatar__width: 120px;*/
	--story__dialog-tweet-bg--color: #9dd;
	/*--story__dialog-tweet-bg--color: #fff;*/
}

/*------------------ Timeline Layout */
.dialog {
	display: flex;
	flex-direction: column;
	gap: 6rem;
	width: var(--dialog-section__width);
	margin-left: calc(var(--dialog-section__protrusion) * -1);
}

/* 2 column Layout as Half */
.dialog--half {
	display: grid;
	grid-template-columns: 1fr 1fr;
	width: var(--dialog__width);
	gap: 1rem;
}

/*  */
/*.dialog--grow {
	display: flex;
	flex-direction: row;
}
.dialog--pad {
	flex-grow: 2;
}*/

/*------------------ Dialog Item */
/* Default Layout */
.dialog-item {
	display: grid;
	/*width: var(--dialog__width);*/
	grid-template-columns: var(--dialog-avatar__width) auto;
}

.dialog__avatar {
	grid-area: 1 / 1 / span 1 / span 1;
}
.dialog__divider {
	grid-area: 1 / 1 / span 1 / span 1;
}
.dialog__tweet {
	grid-area: 1 / 2 / span 1 / span 1;
}

/* Right Layout */
.dialog--right {
	direction: rtl;
}
.dialog--right .dialog__avatar,
.dialog--right .dialog__tweet {
		direction: ltr;
}

/* Both Layout */
.dialog--both {
	grid-template-columns: var(--dialog-avatar__width) auto var(--dialog-avatar__width);
}

.dialog--both .avatar--left {
	grid-area: 1 / 1 / span 1 / span 1;
}
.dialog--both .dialog__tweet {
	grid-area: 1 / 2 / span 1 / span 1;
}
.dialog--both .avatar--right {
	grid-area: 1 / 3 / span 1 / span 1;
}


/*------------------ Dialog Module */
/* Avatar Name */
.dialog__avatar {
	text-align: center;
	font-size: 0.8rem;
}

/* Avatar Image */
.dialog__avatar::before {
	content: "";
	display: block;
	width: var(--dialog-avatar__width); aspect-ratio: 1 / 1;
	background-size: 100% auto;
}

.dialog--right .dialog__avatar:before,
.dialog--both .avatar--right:before {
	transform: scaleX(-1);
}

/* Divider */
.dialog__divider {
	display: block;
	position: absolute;
	width: 1px; height: 1px;
	margin: -1px; padding: 0;
	border: 0 none;
	clip: rect(0px, 0px, 0px, 0px);
	overflow: hidden;
}

/* Tweet */
.dialog__tweet {
	position: relative;
	display: grid;
	align-self: center;
	text-align: justify;
	width: var(--dialog-tweet__width);
	min-height: 8rem;
	background: var(--story__dialog-tweet-bg--color);
	box-shadow: 0 1px 3px #d1cfc6;
	border-radius: 12px;
	padding: 1.6rem 1rem;
}

.dialog--both .dialog__tweet,
.dialog--half .dialog__tweet {
		width: 100%;
}

.dialog--right .dialog__tweet {
	justify-items: end;
}
.dialog--both .dialog__tweet {
	justify-items: center;
}

/* Fukidashi Tongari */
.dialog--left .dialog__tweet:before,
.dialog--both .dialog__tweet:before {
	content: "";
	display: block;
	position: absolute;
	top: 32px; left: -19px;
	border: 8px solid transparent;
	border-right: 18px solid var(--story__dialog-tweet-bg--color);
	-webkit-transform: rotate(35deg);
	transform: rotate(35deg);
}
.dialog--right .dialog__tweet:after,
.dialog--both .dialog__tweet:after {
	content: "";
	display: block;
	position: absolute;
	top: 32px; right: -19px;
	border: 8px solid transparent;
	border-left: 18px solid var(--story__dialog-tweet-bg--color);
	-webkit-transform: rotate(-35deg);
	transform: rotate(-35deg);
}

/* 各キャラクター */
.dialog-item .avatar--task:before {
	background-image: url(../img/dialog/task--default.png);
}
.dialog-item .avatar--uma:before {
	background-image: url(../img/dialog/uma--default.png);
}
.dialog-item .avatar--hato:before {
	background-image: url(../img/dialog/hato--default.png);
}
.dialog-item .avatar--krs:before {
	background-image: url(../img/dialog/krs--default.png);
}
.dialog-item .avatar--alpk:before {
	background-image: url(../img/dialog/alpk--default.png);
}

/* 表情・感情 */
.dialog-item .avatar--task.emo--normal:before {
	background-image: url(../img/dialog/task--default.png);
}
.dialog-item .avatar--task.emo--aux:before {
	background-image: url(../img/dialog/task--aux.png);
}
.dialog-item .avatar--task.emo--think:before {
	background-image: url(../img/dialog/task--think.png);
}
.dialog-item .avatar--task.emo--galileo:before {
	background-image: url(../img/dialog/task--think-galileo.png);
}
.dialog-item .avatar--task.emo--exciting:before {
	background-image: url(../img/dialog/task--qoo.png);
}

.dialog-item .avatar--task.emo--sad:before {
	background-image: url(../img/dialog/task--cry.png);
}
.dialog-item .avatar--task.emo--pien:before {
	background-image: url(../img/dialog/task--cry-pien.png);
}
.dialog-item .avatar--task.emo--cry:before {
	background-image: url(../img/dialog/task--cry-chickshow.png);
}

.dialog-item .avatar--task.emo--upset:before {
	background-image: url(../img/dialog/task--oko.png);
}
.dialog-item .avatar--task.emo--angry:before {
	background-image: url(../img/dialog/task--oko.png);
}
.dialog-item .avatar--task.emo--mad:before {
	background-image: url(../img/dialog/task--oko-inferno.png);
}
.dialog-item .avatar--task.emo--flame:before {
	background-image: url(../img/dialog/task--oko-inferno.png);
}
.dialog-item .avatar--task.emo--inferno:before {
	background-image: url(../img/dialog/task--oko-inferno.png);
}
.dialog-item .avatar--task.emo--ppdream:before {
	background-image: url(../img/dialog/task--oko-finality-pnpn-dream.png);
}
.dialog-item .avatar--task.emo--crimson:before {
	background-image: url(../img/dialog/task-crimson.png);
}

.dialog-item .avatar--task.emo--laugh:before {
	background-image: url(../img/dialog/task--laugh.png);
}
.dialog-item .avatar--task.emo--white:before {
	background-image: url(../img/dialog/task--surprised.png);
}
.dialog-item .avatar--task.emo--maya:before {
	background-image: url(../img/dialog/task--surprised-maya.png);
}
.dialog-item .avatar--task.emo--omg:before {
	background-image: url(../img/dialog/task--surprised-ponta.png);
}
.dialog-item .avatar--task.emo--uwa:before {
	background-image: url(../img/dialog/task--disappointed.png);
}
.dialog-item .avatar--task.emo--again:before {
	background-image: url(../img/dialog/task--disappointed-zeke.png);
}
/*.dialog-item .avatar--task.emo--:before {
	background-image: url(../img/dialog/task-);
}*/

.dialog-item .avatar--uma.emo--normal:before {
	background-image: url(../img/dialog/uma--default.png);
}
.dialog-item .avatar--uma.emo--aux:before {
	background-image: url(../img/dialog/uma--aux.png);
}
.dialog-item .avatar--uma.emo--think:before {
	background-image: url(../img/dialog/uma--think.png);
}
.dialog-item .avatar--uma.emo--galileo:before {
	background-image: url(../img/dialog/uma--think-galileo.png);
}
.dialog-item .avatar--uma.emo--exciting:before {
	background-image: url(../img/dialog/uma--qoo.png);
}
.dialog-item .avatar--uma.emo--sad:before {
	background-image: url(../img/dialog/uma--cry.png);
}
.dialog-item .avatar--uma.emo--pien:before {
	background-image: url(../img/dialog/uma--cry-pien.png);
}
.dialog-item .avatar--uma.emo--cry:before {
	background-image: url(../img/dialog/uma--cry-chickshow.png);
}
.dialog-item .avatar--uma.emo--upset:before {
	background-image: url(../img/dialog/uma--oko.png);
}
.dialog-item .avatar--uma.emo--ppdream:before {
	background-image: url(../img/dialog/uma--oko-finality-pnpn-dream.png);
}
.dialog-item .avatar--uma.emo--white:before {
	background-image: url(../img/dialog/uma--surprised.png);
}
.dialog-item .avatar--uma.emo--maya:before {
	background-image: url(../img/dialog/uma--surprised-maya.png);
}
.dialog-item .avatar--uma.emo--omg:before {
	background-image: url(../img/dialog/uma--surprised-ponta.png);
}
.dialog-item .avatar--uma.emo--uwa:before {
	background-image: url(../img/dialog/uma--disappointed.png);
}
/*.dialog-item .avatar--uma.emo--:before {
	background-image: url(../img/dialog/uma-);
}*/

.dialog-item .avatar--hato.emo--normal:before {
	background-image: url(../img/dialog/hato--default.png);
}
.dialog-item .avatar--hato.emo--aux:before {
	background-image: url(../img/dialog/hato--aux.png);
}
.dialog-item .avatar--hato.emo--think:before {
	background-image: url(../img/dialog/hato--think.png);
}
.dialog-item .avatar--hato.emo--galileo:before {
	background-image: url(../img/dialog/hato--think-galileo.png);
}
.dialog-item .avatar--hato.emo--solution:before {
	background-image: url(../img/dialog/hato--think-yahari.png);
}
.dialog-item .avatar--hato.emo--exciting:before {
	background-image: url(../img/dialog/hato--qoo.png);
}
.dialog-item .avatar--hato.emo--sad:before {
	background-image: url(../img/dialog/hato--cry.png);
}
.dialog-item .avatar--hato.emo--pien:before {
	background-image: url(../img/dialog/hato--cry-pien.png);
}
.dialog-item .avatar--hato.emo--cry:before {
	background-image: url(../img/dialog/hato--cry-chickshow.png);
}
.dialog-item .avatar--hato.emo--upset:before {
	background-image: url(../img/dialog/hato--oko.png);
}
.dialog-item .avatar--hato.emo--ppdream:before {
	background-image: url(../img/dialog/hato--oko-finality-pnpn-dream.png);
}
.dialog-item .avatar--hato.emo--white:before {
	background-image: url(../img/dialog/hato--surprised.png);
}
.dialog-item .avatar--hato.emo--maya:before {
	background-image: url(../img/dialog/hato--surprised-maya.png);
}
.dialog-item .avatar--hato.emo--uwa:before {
	background-image: url(../img/dialog/hato--disappointed.png);
}
/*.dialog-item .avatar--hato.emo--:before {
	background-image: url(../img/dialog/hato-);
}*/


.dialog-item .avatar--krs.emo--normal:before {
	background-image: url(../img/dialog/krs--default.png);
}
.dialog-item .avatar--krs.emo--think:before {
	background-image: url(../img/dialog/krs--think.png);
}
/*.dialog-item .avatar--krs.emo--:before {
	background-image: url(../img/dialog/krs-);
}*/

.dialog-item .avatar--alpk.emo--normal:before {
	background-image: url(../img/dialog/alpk--default.png);
}
.dialog-item .avatar--alpk.emo--think:before {
	background-image: url(../img/dialog/alpk--think.png);
}
/*.dialog-item .avatar--alpk.emo--:before {
	background-image: url(../img/dialog/alpk-);
}*/





/*
.dialog-item .avatar__emo--default:before {
	background-position: 0 0;
}
.dialog-item .avatar__emo--alt:before {
	background-position: 0 -100%;
}
.dialog-item .avatar__emo--excited:before {
	background-position: 0 -90%;
}
.dialog-item .avatar__emo--circular:before {
	background-position: 0 -80%;
}
.dialog-item .avatar__emo--crying:before {
	background-position: 0 -70%;
}
.dialog-item .avatar__emo--maya:before {
	background-position: 0 -60%;
}
.dialog-item .avatar__emo--mad:before {
	background-position: 0 -50%;
}
.dialog-item .avatar__emo--tearyeyed:before {
	background-position: 0 -40%;
}
*/



/*-------- .interview
	インタビュー形式
	※当初 flex で開発したが画像に対しての回り込みを実現するために float に変更した
----------------------------------------------- */
.interview {
	/*display: flex;
	flex-direction: column;
	gap: 3rem;*/
	margin-top: var(--story__margin-top--p);
}

/* margin */
.interview p {
	margin-top: var(--story__margin-top--p);
}

/* まわりくどいが、一番最初の画像をfloatで使う場合、頭が揃わない */
/* これをやりたくない場合は section.interview に「clearfix」を追加せよ */
.interview p:first-of-type,
.interview :first-child {
	margin-top: 0;
}

/* Interviewer インタビュ「アー」 */
.interview__er::before {
	content: "――― ";
	letter-spacing: -2px;
}
.interview__er {
	color: #999;
}

/* Interviewee インタビュ「イー」 */
.interview__ee::before {
	content: "　";
}
.interview__ee {}




/*-------- .chat
	アバター有インタビュー、問合せ、取材、座談会など
----------------------------------------------- */
.story-body .chat {
	--chat-avatar__width: 8rem;
	--chat-name__size: 1rem;
	display: flex;
	flex-direction: column;
	gap: 5rem;
}

.chat-cell {
	display: grid;
	grid-template-columns: var(--chat-avatar__width) auto ;
	grid-template-rows: var(--chat-avatar__width) auto;
	align-items: center;
	gap: 0.3rem 2rem;
}

.chat__avatar {
	grid-area: 1 / 1 / span 1 / span 1;
	width: var(--chat-avatar__width); aspect-ratio: 1 / 1;
	border: 3px solid #00B5B5;
	border-radius: calc(var(--chat-avatar__width) / 2);
}

.chat__name {
	grid-area: 2 / 1 / span 1 / span 1;
	min-width: var(--chat-avatar__width);
	text-align: center;
	font-size: var(--chat-name__size);
	line-height: 1;
}

.chat__divider {
	grid-area: 2 / 1 / span 1 / span 1;
	display: block;
	position: absolute;
	width: 1px; height: 1px;
	margin: -1px; padding: 0;
	border: 0 none;
	clip: rect(0px, 0px, 0px, 0px);
	overflow: hidden;
}

.chat__tweet {
	grid-area: 1 / 2 / span 2 / span 1;
}

.chat--right {
	direction: rtl;
}

.chat--right .chat__name,
.chat--right .chat__tweet {
		direction: ltr;
}
.chat--right .chat__tweet {
	justify-self: start; /* grid宣言階層で「rtl」と定義してるからendじゃなく逆になる */
}

.chat__togaki {
	padding-inline: calc(var(--chat-avatar__width) / 2);
	font-style: italic;
}

.chat__togaki::before {
	content: "――― ";
	letter-spacing: -2px;
}

@media (min-width: 768px) {
	.chat-cell {
		grid-template-columns: var(--chat-avatar__width) auto var(--chat-avatar__width);
	}
}




/*-------- Procedure
	手順解説
----------------------------------------------- */
.procedure {
	position: relative;
}

.procedure-list {
	display: flex;
	flex-direction: column;
	gap: 6rem;
}

.procedure-list-item {
	position: relative;
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: repeat(2, auto);
	grid-template-areas: 
	"media"
	"note";
	gap: 1rem;
	padding-bottom: 4rem;
	border-bottom: 1px dashed #aaa;
}

.procedure-list-item:last-child {
	padding-bottom: 0;
	border-bottom: none;
}

.procedure__media {
	grid-area: media;
	width: 100%;
}

.procedure__img {
	width: 100%;
}

.procedure__note {
	grid-area: note;
}

/* ol.li--num とクラスを仕込めば数字付きになる */
.list--num .procedure__note {
	display: list-item;
	list-style-position: inside;
}

@media (min-width: 768px) {
	/* Default | 左：説明文　　右：画像 */
	.procedure-list-item {
		grid-template-columns: 1fr 1fr;
		grid-template-areas: 
			"note media";
		gap: 2rem;
	}
	/* Opposite | 左：画像　　右：説明文 */
	.list--opst .procedure-list-item {
		grid-template-areas: 
			"media note";
	}
	/* Zig Zag */
	/* Odd | 左：説明文　　右：画像 */
	.list--zgzg .procedure-list-item:nth-child(odd) {
		grid-template-areas: 
			"note media";
	}
	/* Zig Zag x Opposite */
	/* Even | 左：画像　　右：説明文 */
	.list--zgzg .procedure-list-item:nth-child(even) {
		grid-template-areas: 
			"media note";
	}
	/* Zig Zag x Opposite */
	/* Odd | 左：画像　　右：説明文 */
	.list--zgzg.list--opst .procedure-list-item:nth-child(odd) {
		grid-template-areas: 
			"media note";
	}
	/* Zig Zag x Opposite */
	/* Even | 左：説明文　　右：画像 */
	.list--zgzg.list--opst .procedure-list-item:nth-child(even) {
		grid-template-areas: 
			"note media";
	}
}




/*-------- ul
	リスト  General Style
----------------------------------------------- */
/*------------------ List Style Type */
.story-body ul {
	list-style-type: disc;
}
.story-body ul ul {
	list-style-type: circle;
}
.story-body ul ul ul {
	list-style-type: square;
}
.story-body ol {
	list-style-type: decimal;
}

/*------------------ Margin Left */
.story-body > ul,
.story-body-section > ul,
.story-body > ol,
.story-body-section > ol {
	margin-left: var(--article__padding-inline);
}

.story-body > ul ul,
.story-body-section > ul ul,
.story-body > ol ol,
.story-body-section > ol ol,
.story-body > ul ol,
.story-body-section > ul ol,
.story-body > ol ul,
.story-body-section > ol ul {
	margin-left: var(--article__padding-inline);
}




/*-------- ul.tree
	tree リストによるツリー図
----------------------------------------------- */
/*------------------ General */
.tree,
.tree ul,
.tree li {
	position: relative;
	list-style: none;
	margin: 0;
    padding: 0;
}

/*------------------ tree--V */
.tree--V {
	margin: 10px 0;
	padding-left: 8px;
}

.tree--V ul {
	margin: 0 0 0 10px;
}

.tree--V li {
	line-height: 20px;
	text-indent: 0;
}

.tree--V ul li {
	padding: 3px 12px;
}

/* tree--V > line */
.tree--V ul:before {
	content: "";
	display: block;
	border-left: 1px solid #bbb;
	position: absolute;
	left: 0;
	top: 0;
	bottom: 0;
	width: 0;
}
.tree--V li:before {
	content: "";
	padding-right: 0;
}
.tree--V ul li:before {
	content: "";
	display: block;
	border-top: 1px solid #bbb;
	position: absolute;
	left: 0;
	top: 13px;
	width: 8px;
}
.tree--V ul li:last-child:before {
	background: #f5f5f0;
	top: 10px;
	bottom: 0;
	height: auto;
}


/*------------------ tree--H */
.tree--H {
	display: table;
	margin: 0 0 1em;
	text-align: center;
}

.tree--H ul {
	display: table;
	width: 100%;
}

.tree--H li {
	display: table-cell;
	padding: .5em 0;
	vertical-align: top;
}

.tree--H span {
	display: inline-block;
	position: relative;
	margin: 0 .2em .5em;
	padding: .2em .5em;
	border: solid .1em #bbb;
	border-radius: .2em;
}

/* tree--H > line__H */
.tree--H li:before {
	outline: solid 1px #bbb;
	content: "";
	left: 0;
	position: absolute;
	right: 0;
	top: 0;
}
.tree--H li:first-child:before {left: 50%;}
.tree--H li:last-child:before {right: 50%;}

/* tree--H > line__V */
.tree--H ul:before,
.tree--H span:before {
	outline: solid 1px #bbb;
	content: "";
	height: .5em;
	left: 50%;
	position: absolute;
}
.tree--H ul:before {
	top: -.5em;
}
.tree--H span:before {
	top: -.55em;
}

/* The root node doesn't connect upwards */
.tree--H > li {margin-top: 0;}
.tree--H > li:before,
.tree--H > li:after,
.tree--H > li > span:before {
	outline: none;
}




/*-------- table
	表
	※とりあえず今回は開発ここまで 2024-01-11
----------------------------------------------- */
.rbltable {
	border-collapse: collapse;
	table-layout: fixed;
	width: 100%;
	overflow: hidden;
}

.rbltable caption {}
.rbltable thead th {}

.rbltable tbody th {
	background: #555;
	color:#fff;
	text-align: center;
}

.rbltable tr {}

.rbltable th,
.rbltable td {
	border-bottom: 1px solid #555;
}



@media screen and (max-width: 787px) {
	.rbltable td::before {
		content: attr(data-label);
		background-color: #e6e4dd;
		font-weight: bold;
		display: inline-block;
		width: 20%;
		min-width: 4em;
		text-align: center;
		margin-right: 0.5em;
		padding: 4px;
	}
	.rbltable thead {
		display: none;
	}
	.rbltable th,
	.rbltable td {
		display: block;
	}
}


@media (min-width: 768px) {
	.rbltable {
		
	}
	
	.rbltable caption {}

	.rbltable thead {
		display: table-header-group;
	}
	.rbltable thead th {
		background-color: #555;
		color: #fff;
		font-weight: bold;
		text-align: center;
	}
	.rbltable tbody th {
		background-color: unset;
		color: unset;
	}
	.rbltable tr {
		
	}
	.rbltable tr:nth-child(even) {
		background-color: #e6e4dd;
	}
	.rbltable th,
	.rbltable td {
		vertical-align: middle;
		text-align: center;
		padding: 1em;
		border-bottom: none;
		border-right: 1px solid #e6e4dd;
	}
	.rbltable tr:nth-child(even) th,
	.rbltable tr:nth-child(even) td {
		border-right-color: var(--article__bg--color);
	}
	.rbltable th:last-child,
	.rbltable td:last-child {
		border-right: none;
	}

}






/*-------- figure.Lyrics > pre
	歌詞
	preじゃなく figure要素を使う方がセマンティックに望ましい
----------------------------------------------- */
.lyrics {
	position: relative;
	border: solid 1px #ddd;
	border-radius: 8px;
	padding: 5rem 0 2rem 4rem;
	background: #f5f1eb;
	box-shadow: 0 1px 3px #d1cfc6;
	color: #333143;
	font-style: italic;
}
.lyrics__title {
	font-size: 1.6rem;
	font-weight: bold;
}
.lyrics__meta {
	font-size: 1rem;
}
.lyrics__body {
	white-space: pre;
	font-size: 1.2rem;
	margin: 2rem 0 4rem 2rem;
}
.lyrics__cite {
	font-size: 1rem;
	text-align: right;
	margin-right: 2rem;
}





/*-------- blockquote.quote
	引用
----------------------------------------------- */
/*------------------ General */
.quote {
	position: relative;
	display: grid;
	grid-template-columns: 1fr;
	border: dashed 1px #ddd;
	border-radius: 8px;
	padding: 2rem 4rem;
	background: #ebebf5;
	box-shadow: 0 1px 3px #d1cfc6;
	color: #558;
	font-style: italic;
}

/* Caption */
.quote__caption {
	position: absolute;
	top: -9px; left: -9px;
	z-index: 999;
	padding: 0.4rem 1rem;
	background-color: #558;
	box-shadow: 0 1px 3px #447;
	color: #fff;
	font-size: 1rem;
	line-height: 1;
	border-radius: 2px;
}
.quote__caption::before {
	font-family: 'Font Awesome 6 Free';
	font-weight: 900;
	content: "\f10d";
	padding-right: 0.4rem;
}

/* text */
.quote__text {
	border-left: 4px solid #dbdbe5;
	padding: 1rem 0 1rem 2rem;

}

/* Cite */
.quote__cite {
	justify-self: flex-end;
	font-size: 1rem;
	line-height: 1;
	padding: 4px 10px;
	background: rgba(255, 255, 255, 0.618);
	border-radius: 2px;
}
.quote__cite::before {
	content: "――";
	letter-spacing: -2px;
	padding-right: 0.4rem;
}
.quote__cite {
	position: absolute;
	bottom: -9px; right: -9px;
	z-index: 999;
	padding: 0.4rem 1rem;
	background-color: #558;
	box-shadow: 0 1px 3px #447;
	color: #fff;
	font-size: 1rem;
	line-height: 1;
	border-radius: 2px;
}
.quote__cite::after {
	font-family: 'Font Awesome 6 Free';
	font-weight: 900;
	content: "\f10e";
	padding-left: 0.4rem;
}
.quote__cite a,
.quote__cite a:visited,
.quote__cite a:hover,
.quote__cite a:active {
	color: #fff;
}

/*------------------ Image Only */
.quote.quote--img {
	display: block;
	width: fit-content;
	border: none;
	background: none;
	padding: 0;
}
.quote.quote--img img {
	border: dashed 1px #ddd;
	border-radius: 8px;
}

.quote--img .quote__caption {
	top: 8px; left: 8px;
	background: rgba(0, 0, 0, 0.618);
	box-shadow: 0 1px 3px #000;
}

.quote--img .quote__cite {
	position: absolute;
	bottom: 8px; right: 8px;
	background: rgba(0, 0, 0, 0.618);
	box-shadow: 0 1px 3px #000;
}
.quote--dark.quote--img .quote__cite {
	color:#115;
	background: rgba(200, 200, 255, 0.618);
	box-shadow: 0 1px 3px #447;
}
.quote--dark.quote--img .quote__cite a,
.quote--dark.quote--img .quote__cite a:visited,
.quote--dark.quote--img .quote__cite a:hover,
.quote--dark.quote--img .quote__cite a:active {
	color: #115;
}




/*-------- figure.cmd > pre > code
	ソースコード
----------------------------------------------- */
.cmd {
	position: relative;
	margin: 20px 0;
}

/* cmd > Caption */
.cmd__caption {
	position: absolute;
	top: -9px; left: -9px;
	z-index: 999;
	padding: 3px 6px;
	background-color: #aaa;
	color: #000;
	font-size: 1rem;
	line-height: 10px;
}
.cmd__caption::before {
	font-family: 'Font Awesome 6 Free';
	font-weight: 900;
	content: "\f0a1";
	padding-right: 4px;
}

/* cmd > Monitor */
.cmd__monitor {
	padding: 20px 10px 20px 40px;
	background-color: #eee;
	border: 1px solid #000;
	border-radius: 8px;
	-moz-border-radius: 8px;
	-webkit-border-radius: 8px;
}

/* cmd > Monitor > code */
.cmd__monitor code {
	font-family: Menlo, Consolas, 'DejaVu Sans Mono', monospace;
	font-size: 1.4rem;
	line-height: 1.4;
	color: #0f0;
}
.cmd__monitor code::selection {
	color: #000;
	background-color: #0f0;
}




/*-------- figure.cmd--sourcecode
	ソースコード
----------------------------------------------- */
/* cmd--sourcecode > Caption */
.cmd--sourcecode .cmd__caption,
.cmd--prism .cmd__caption {
	background-color: #0f0;
	color: #000;
}
.cmd--sourcecode .cmd__caption::before,
.cmd--prism .cmd__caption::before {
	font-weight: 900;
	content: "\f121";
}

/* cmd--sourcecode > Monitor */
.cmd--sourcecode .cmd__monitor,
.cmd--prompt .cmd__monitor {
	background-color: #393939;
	border: 1px solid #000;
	box-shadow: 0px 0px 100px 20px black inset;
}

/* cmd--sourcecode > Monitor > code */
.cmd--sourcecode .cmd__monitor code {
	color: #0f0;
	text-shadow: 0 0 3px rgba(128,255,0,.618);
}
.cmd--sourcecode .cmd__monitor code::selection {
	color: #000;
	background-color: #0f0;
}




/*-------- figure.cmd--prompt
	コマンドプロンプト、ターミナル
----------------------------------------------- */
/* cmd--prompt > Caption */
.cmd--prompt .cmd__caption {
	background-color: #0ff;
	color: #000;
}
.cmd--prompt .cmd__caption::before {
	font-weight: 900;
	content: "\f120";
}

/* cmd--prompt > Monitor 
	sourcecode と同じに設定済み */

/* cmd--prompt > Monitor > code */
.cmd--prompt .cmd__monitor code {
	color: #fff;
	text-shadow: 0 0 3px rgba(255,255,255,.618);
}
.cmd--prompt .cmd__monitor code::selection {
	color: #000;
	background-color: #fff;
}

/* cmd--prompt > Monitor > code > Row */
.cmd--prompt .cmd__row::before {
	content: "> ";
}
.cmd--prompt .cmd__row::after {
	font-family: 'Font Awesome 6 Free';
	font-weight: 900;
	content: "\f149";
	display: inline-block;
	transform: rotate(90deg);
	padding: 0px 10px 0px 10px;
}




/*-------- figure.cmd--operationcommand
	操作、ショートカットキー
----------------------------------------------- */
/* cmd--operationcommand > Caption */
.cmd--operationcommand .cmd__caption {
	background-color: #a22041;
	color: #fff;
}
.cmd--operationcommand .cmd__caption::before {
	font-weight: 900;
	content: "\f11c";
}

/* cmd--operationcommand > Monitor */
.cmd--operationcommand .cmd__monitor {
	background-color: #ffeee6;
	border: 1px solid #eeddd5;
}




/*-------- figure.cmd--operationcommand
	Prism.js
	https://prismjs.com/
----------------------------------------------- */
/* cmd--prism > Caption */
/* .cmd--sourcecode で共通設定済み */




/*-------- pre.prettyprint
	code-prettify
	https://github.com/googlearchive/code-prettify
----------------------------------------------- */
/*.story-body pre.prettyprint code {
	font-family: Menlo, Consolas, 'DejaVu Sans Mono', monospace;
	font-size: 1.4rem;
	line-height: 1.4;
}*/

/* Normalize for prettify.css */
/*.story-body pre.prettyprint {
	padding: 0;
	border: none;
}*/

/* 行番号をすべての行に表示 */
/*.story-body pre li.L0,.story-body pre li.L1,.story-body pre li.L2,.story-body pre li.L3,.story-body pre li.L4,.story-body pre li.L5,.story-body pre li.L6,.story-body pre li.L7,.story-body pre li.L8,.story-body pre li.L9 {
	list-style-type: decimal;
}

.story-body pre li.L0,.story-body pre li.L1,.story-body pre li.L2,.story-body pre li.L3,.story-body pre li.L4,.story-body pre li.L5,.story-body pre li.L6,.story-body pre li.L7,.story-body pre li.L8,.story-body pre li.L9 {
	list-style-position: outside;
	border-left: 1px solid #75715e;
	margin-left: 36px;
	padding-left: 24px;
	line-height: 1.4;
}*/





/*-------- figure.AA > pre
	アスキーアート
----------------------------------------------- */
.story-body .AA {
	margin: 10px 32px 30px;
}

.story-body .AA__canvas {
	font-family: IPAMonaPGothic, "Mona", "IPA MONAPGOTHIC", "MS PGothic", "ＭＳ Ｐゴシック", "MS Pｺﾞｼｯｸ", "MS Pゴシック", sans-serif;
	text-align: left;
	color: #555;
	font-size: 16px;
	line-height: 16px;
	display: inline-block;
	overflow: visible;
}

.story-body .AA--R {
	text-align: right;
}
.story-body .AA--C {
	text-align: center;
}
.story-body .AA.w640 {
	margin: 10px 0 30px;
}
.story-body .AA.w480 {
	margin: 10px 80px 30px;
}
.story-body .AA.w320 {
	margin: 10px 160px 30px;
}
.story-body .AA.w240 {
	margin: 10px 200px 30px;
}






/*-------- figure.AA > pre
	コンタクトフォーム7

	div.wp-block-contact-form-7-contact-form-selector
		div.wpcf7
			form.wpcf7-form
				p
					label  会社名* 氏名*  題名*
					span.wpcf7-form-control-wrap
						input
							.wpcf7-form-control
							.wpcf7-text
							.wpcf7-validates-as-required
				p
					label  Eメール*
					span.wpcf7-form-control-wrap
						input
							.wpcf7-form-control
							.wpcf7-email
							.wpcf7-validates-as-required
							.wpcf7-text
							.wpcf7-validates-as-email
				p
					label  お問い合わせ内容詳細*
					span.wpcf7-form-control-wrap
						input.wpcf7-form-control
							.wpcf7-textarea
							.wpcf7-validates-as-required
				p
					span.wpcf7-form-control-wrap
						span
							.wpcf7-form-control
							.wpcf7-acceptance
							span.wpcf7-list-item
								label
									input[name="your-consent"]
									span.wpcf7-list-item-label
										プライバシーポリシーに同意します*
				p
					input
						.wpcf7-form-control
						.wpcf7-submit
						.has-spinner
					span.wpcf7-spinner
				div[aria-hidden="true"].wpcf7-response-output
----------------------------------------------- */
/* div.wp-block-contact-form-7-contact-form-selector */
.wp-block-contact-form-7-contact-form-selector {}

/* div.wpcf7 */
.wpcf7 {}

/* div.wpcf7 > form.wpcf7-form */
.wpcf7-form {}

/* div.wpcf7 > form.wpcf7-form > p */
.wpcf7-form > p {
	margin-top: 3rem;
}

/* div.wpcf7 > form.wpcf7-form > p > label */
.wpcf7-form > p > label {
	font-weight: bold;
}

/* div.wpcf7 > form.wpcf7-form > p > span.wpcf7-form-control-wrap */
.wpcf7-form-control-wrap {
	font-weight: normal;
}

/* div.wpcf7 > form.wpcf7-form > p > span.wpcf7-form-control-wrap > input */
.wpcf7-form-control {}
.wpcf7-text {
	padding: 0.5rem 2rem;
	background-color: #fdfdfa;
	box-shadow: 0 1px 3px #d1cfc6;
	border-radius: 0.5rem;
	font-size: 2rem;
	width: 100%;
}
.wpcf7-email {
	font-size: 2rem;
	font-family: Menlo, Consolas, 'DejaVu Sans Mono', monospace;
}
.wpcf7-textarea {
	padding: 1rem 2rem;
	background-color: #fdfdfa;
	box-shadow: 0 1px 3px #d1cfc6;
	border-radius: 0.5rem;
	font-size: 1.6rem;
	line-height: 1.618;
	width: 100%;
}
.wpcf7-validates-as-required {}
.wpcf7-validates-as-email {}


/* p > span.wpcf7-form-control-wrap > .wpcf7-acceptance */

.wpcf7-acceptance {}

.wpcf7-acceptance .wpcf7-list-item {}
.wpcf7-acceptance .wpcf7-list-item > label {}
.wpcf7-acceptance input[type="checkbox"] {
	appearance: auto;
	box-shadow: 0 1px 3px #d1cfc6;
}
.wpcf7-acceptance .wpcf7-list-item-label {}

/* p > input.wpcf7-submit */
.wpcf7-submit {
	background-color: #24890d;
	color: #fff;
	padding: 1rem 3rem;
	border-radius: 0.5rem;
	font-size: 1.6rem;
	font-weight: bold;
}
.wpcf7 .wpcf7-submit:disabled {
	cursor: not-allowed;
}
.wpcf7 .wpcf7-submit:hover,
.wpcf7 .wpcf7-submit:focus {
		background-color: #41a62a;
}
.wpcf7 .wpcf7-submit:active {
	background-color: #55d737;
}
.wpcf7 .wpcf7-submit[disabled],
.wpcf7 .wpcf7-submit[disabled]:hover,
.wpcf7 .wpcf7-submit[disabled]:focus,
.wpcf7 .wpcf7-submit[disabled]:active {
	background-color: #bbb;
}


.has-spinner {}

/* スマホだけ字を小さく */
@media screen and (max-width: 787px) {
	.wpcf7-text,
	.wpcf7-email,
	.wpcf7-textarea {
		font-size: 1em;
	}
}