@charset "UTF-8";

@font-face {
	font-family: "MyYuGothicM";
	font-weight: normal;
	src: local("YuGothic-Medium"), local("Yu Gothic Medium"), local("YuGothic-Regular");
}

@font-face  {
	font-family: "MyYuGothicM";
	font-weight: bold;
	src: local("YuGothic-Bold"), local("Yu Gothic");
}

a:link {
	color: #222;
}

a:visited {
	color: #222;
}

a:hover {
	text-decoration: none;
}

cite {
	font-style: normal;
}

hr {
	clear: both;
	border: none;
	background: transparent;
	height: 1px;
}

img {
	border: none;
}

pre {
	font-family: 'Osaka Mono', 'Monaco', 'Lucida Cosole', 'Consolas', monospace;
	font-size: 75%;
	overflow: auto;
	line-height: 1.33;
	background: repeating-linear-gradient(
		135deg,
		#ffffff,
		#ffffff 5px,
		#fafafa 5px,
		#fafafa 10px
	) !important;
}

q {
	color: #999;
}

p {
	margin: 1.2em 0;
}

ul {
	padding: 0 0 0 1.5em;
	margin: 1em 0;
}

ul li {
	padding: 0;
}

ul ul {
	margin: 0;
}

input ,
textarea {
	background: #fff;
	color: #333;
	border: 1px solid #2f3839;
	padding: 2px;
}

ins {
	display: block;
	text-decoration: none;
	padding: 10px 0 10px 10px;
	margin: 1em 0;
	border-style: solid;
	border-width: 0 0 0 3px;
	border-color: #efefef;
}

ins:before {
	/*
	display: block;
	content: "追記";
	color: #333;
	font-size: 90%;
	*/
}

ins.adsbygoogle ,
ins.adsbygoogle ins {
	padding: 0;
	margin: 0 auto;
	border-style: none;
}

ins.adsbygoogle:before ,
ins.adsbygoogle ins:before {
	display: none;
}

del {
	display: block;
	color: #999;
	font-size: 50%;
	line-height: 1.5;
}

blockquote {
	padding: 0 0 0 1em;
	margin: 1em 0;
}

table {
	margin: 20px 0;
	background: #fff;
	border-collapse: collapse;
	border-spacing: 0;
}

table th,
table td {
	border: 1px solid #ddd;
	padding: 10px;
}

nav,
header,
footer,
figure,
figcaption,
section,
article {
	display: block;
}

figure {
	margin: 1em 0 1em 1em;
}

figcaption {
	font-size: 90%;
}

figure.quote figcaption {
	text-align: right;
}

.share-buttons {
	contain: content;
	vertical-align: middle;
	line-height: 32px;
	padding: 20px;
	font-size: 14px;
	background: #fff;
	margin: 0;
	text-align: center;
	color: #000;
	filter: grayscale(100%);
	transition: filter 0.3s ease 0s;
}

.share-buttons:hover {
	filter: none;
}

.share-buttons::after {
	display: block;
	content: "共有する";
	font-size: 14px;
	margin: 0;
	padding: 0;
	color: #666;
	line-height: 1.2;
}

.share-buttons .share-button {
	display: inline-block;
	text-align: center;
	height: 40px;
	width: 40px;
	margin-right: 8px;
	position: relative;
	border-radius: 3px;
	overflow: hidden;
}

.share-buttons .share-button[href*="line.me"] {
	display: none;
}

.share-buttons .share-button img {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}

article h1 ,
article h2 ,
article h3 ,
article h4 ,
article h5 ,
article h6 {
	line-height: 1.20;
	white-space: pre-line;
	font-size: 140%;
	font-family:
		'Noto Serif JP', 
		YuMincho,
		"Hiragino Mincho ProN",
		"HG明朝E",
		serif;
	font-weight: normal;
	color: #333;
	margin: 3em 0 0em;
	letter-spacing: -0.05em;
	font-feature-settings: "palt";
}

html {
	background: #fafafa;
	color: #4f5759;
	margin: 0;
	padding: 0;
}

body {
	width: 1024px;
	text-align: center;
	font-size: 16px;
	margin: 0 auto;
	padding: 0 20px;
	background: #fff;
	line-height: 1.9;
	font-family:
		'Noto Serif JP',
		'Noto Sans Japanese',
		-apple-system,
		BlinkMacSystemFont,
		"Hiragino Kaku Gothic ProN",
		MyYuGothicM,
		Meiryo,
		sans-serif;
	font-feature-settings: "pwid";
	font-synthesis: none;
	/* text-rendering: optimizeLegibility; */
	word-wrap: break-word;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

body > * {
	text-align: left;
}

#global-header {
	font-family:
		'Noto Serif JP',
		YuMincho,
		"Hiragino Mincho ProN",
		"HG明朝E",
		serif;
	font-feature-settings: "palt";
	display: block;
	position: relative;
	z-index: 200;
	margin: 0;
	padding: 2em 0;
	position: absolute;
	background: #fff;
}

#global-header #header {
	text-align: center;
	padding: 32px 32px 10px;
	margin: -32px 0 0 0;
	color: #fff;
	background: #000;
	font-size: 100%;
	font-weight: 400;
}

#global-header #header a {
	display: block;
	padding: 5px 0;
}

#global-header #header a:link ,
#global-header #header a:visited ,
#global-header #header a:hover {
	font-family: serif;
	text-decoration: none;
	color: #fff;
}

#global-header #header small {
	position: relative;
	top: -1.5em;
	color: #999;
	font-size: 50%;
}

#global-header #search-form {
	position: absolute;
	top: 20px;
	right: 40px;
}

#global-navigation {
	position: relative;
	font-family: 'Noto Serif JP', serif;
	font-weight: 400;
	display: block;
	margin: 0 auto;
	padding: 3em 0;
	background: #fff;
}

#global-navigation ul {
	font-size: 10px;
	list-style: none;
	margin: 0;
	padding: 0;
	text-align: right;
}

#global-navigation ul li {
	display: inline-block;
	margin: 0;
	padding: 0;
}

#global-navigation ul li a {
	display: inline-block;
	padding: 5px 0;
	width: 100px;
	text-align: center;
	background: repeating-linear-gradient(
		135deg,
		#ffffff,
		#ffffff 5px,
		#fafafa 5px,
		#fafafa 10px
	);
}

#global-navigation ul li a:link ,
#global-navigation ul li a:visited ,
#global-navigation ul li a:hover {
	color: #111;
	text-decoration: none;
}

#global-navigation ul li a:hover {
	border: none;
}

#global-navigation::after {
	content: attr(data-ip-info);
	display: block;
	position: absolute;
	top: 0;
	right: 0;
	color: #ccc;
	font-size: 11px;
	font-feature-settings: "palt";
	font-family:
		'Noto Sans Japanese',
		-apple-system,
		BlinkMacSystemFont,
		"Hiragino Kaku Gothic ProN",
		MyYuGothicM,
		Meiryo,
		sans-serif;
}


#content {
}

.related {
	margin: 0 auto;
	width: 728px;
}

.pager {
	text-align: center;
	font-size: 11px;
	margin: 20px 0px 20px;
}

.pager a:link ,
.pager a:visited ,
.pager a:hover {
	display: inline-block;
	padding: 10px 20px;
	text-align: center;
	width: 12em;
	background: #333;
	text-decoration: none;
	color: #fff;
}

#category-header {
	margin: 20px 0;
	padding: 0;
	font-family:
		'Noto Serif JP',
		YuMincho,
		"Hiragino Mincho ProN",
		"HG明朝E",
		serif;
}

#category-header h1 ,
#category-header h2 {
	display: inline;
	font-size: 100%;
	font-weight: normal;
}

#category-header h1 small ,
#category-header h2 small {
	padding: 0 0.5em;
	color: #666;
	display: inline;
	font-size: 100%;
	font-weight: normal;
}

.entries {
	margin: 0 0 3em 0;
	padding: 0;
}

.entries article {
	contain: layout;
	clear: both;
	padding: 1em 0;
	margin: 0 0 1em 0;
}

.entries .date {
	contain: layout;
	display: block;
	clear: both;
	font-family:
		'Noto Serif JP',
		YuMincho,
		"Hiragino Mincho ProN",
		"HG明朝E",
		serif;
	font-weight: 400;
	font-size: 80%;
	margin: 10em 0 0;
	text-align: center;
	border-width: 0 0 1px 0;
	border-style: solid;
	border-color: #eee;
	padding: 3px 0;
	width: 1024px;
	color: #333;
}

.entries .date:first-child {
	margin: 0;
}

.entries .date a {
	color: inherit;
	text-decoration: none;
}

.entries article {
	position: relative;
}

.entries article.status-scheduled {
	background: repeating-linear-gradient(
		135deg,
		#ffffff,
		#ffffff 5px,
		#fafafa 5px,
		#fafafa 10px
	) !important;
}

.entries article header {
	width: 1024px;
	padding: 0 0 20px 0;
}

.entries article header h1 ,
.entries article header h2 {
	font-family:
		'Noto Serif JP',
		YuMincho,
		"Hiragino Mincho ProN",
		"HG明朝E",
		serif;
	font-weight: 400;
	letter-spacing: -0.05em;
	/*
	height: 30px;
	line-height: 30px;
	*/
	line-height: 1.33;
	text-align: left;
	padding: 8px 0;
	margin: 0;
	font-size: 160%;
	color: #111;
	background: rgba(255, 255, 255, 0.7);
}

.entries article header h1 a ,
.entries article header h2 a {
	display: block;
	text-decoration: none;
}

.entries article header .metadata {
	display: block;
	text-align: right;
	font-family:
		'Noto Serif JP',
		YuMincho,
		"Hiragino Mincho ProN",
		"HG明朝E",
		serif;
	font-weight: 400;
	padding: 0 8px;
	margin: 0;
	font-size: 80%;
	line-height: 1.2;
	color: #999;
	border-width: 0 3px 0 3px;
	border-color: #f6f6f6;
	border-style: solid;
	background: repeating-linear-gradient(
		135deg,
		#ffffff,
		#ffffff 5px,
		#fafafa 5px,
		#fafafa 10px
	) !important;
}

.entries article header .metadata time {
	display: inline-block;
}

.entries article header .metadata a {
	text-decoration: none;
}

.entries article header .metadata .author {
	display: none;
}

.entries article .content {
	position: relative;
	margin: 0 auto;
	width: 728px;
	text-align: justify;
	text-justify: inter-ideograph;
}

.entries article .content h1 ,
.entries article .content h2 ,
.entries article .content h3 ,
.entries article .content h4 ,
.entries article .content h5 ,
.entries article .content h6 {
	color: #333;
}

.entries article .content {
}

.entries article .content a.seemore:link {
	text-decoration: underline;
}

.entries article .content a.seemore:visited {
	text-decoration: underline;
}

.entries article .content a.seemore:hover {
	text-decoration: none;
}

.entries article .content img ,
.entries article .content svg {
	max-width: 100%;
	height: auto;
	width: auto;
}

.entries article .content .lang-abc svg {
	max-width: none;
}

.entries article .content .lang-math ,
.entries article .content .mjpage__block {
	font-size: 24px;
}

/* MathJax 全般 */
mjx-container.MathJax {
	display: inline-block;
}

/* display math */
mjx-container.MathJax[display="true"] {
  display: block;
  text-align: center;
  margin: 1em 0;
  font-size: 24px;
}

/* inline math */
mjx-container.MathJax:not([display]) {
  /* inline specific styles */
}

.entries article .content iframe {
	max-width: 100%;
}

.entries article .content.trackbacks ,
.entries article .content.similar-entries {
}

.entries article .content.trackbacks ul ,
.entries article .content.similar-entries ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.entries article .content.trackbacks ul li ,
.entries article .content.similar-entries ul li {
	margin: 0;
	padding: 0;
}

.entries article .content.trackbacks ul li a:link ,
.entries article .content.similar-entries ul li a:link {
	display: block;
	margin: 0;
	padding: 0.5em 0;
	text-decoration: none;
}

.entries article .content.trackbacks ul li a:link b ,
.entries article .content.similar-entries ul li a:link b {
	text-decoration: underline;
	font-feature-settings: "palt";
}

.entries article .content.trackbacks ul li .summary ,
.entries article .content.similar-entries ul li .summary {
	display: block;
	font-size: 80%;
	color: #444;
	line-height: 1.66;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.entries article .content.trackbacks ul li time ,
.entries article .content.similar-entries ul li time {
	font-size: 80%;
	color: #666;
}

.entries article .content.similar-entries ul.similar-images {
	display: flex;
	flex-wrap: nowrap;
	justify-content: space-between;
	align-items: center;
	margin: 0 -5px;
}

.entries article .content.similar-entries ul.similar-images li {
	flex: 1;
	margin: 5px;
}
.entries article .content.similar-entries ul.similar-images a {
	display: block;
	position: relative;
	height: 200px;
	background-position: center;
	background-size: cover;
}

.entries article .content.similar-entries ul.similar-images .meta {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	padding: 0 5px;
	background: rgba(0, 0, 0, 0.5);
	color: #fff;
}

.entries article .content.similar-entries ul.similar-images img {
	max-width: 100%;
}

.entries article pre.code {
	contain: content;
	border-width: 0 0 0 3px;
	margin: 1em 0;
	padding: 20px 20px;
}

.entries article div.gist {
	contain: content;
	font-size: 75%;
	margin: 20px 0;
	padding: 0;
	line-height: 1.33;
}

.entries article span[itemtype="http://schema.org/Photograph"] {
	background: #fff;
	display: block;
	text-align: center;
	width: 728px;
}

.entries article a.hatena-fotolife ,
.entries article a.picasa ,
.entries article p.photo {
	display: block;
	margin: 0;
	border: none;
	background: #fff;
	position: relative;
	text-align: center;
}

.entries article a.picasa.loading::before {
	position: absolute;
	display: block;
	top: 50%;
	left: 50%;
	content: "";

	width: 40px;
	height: 40px;
	margin: 0;
	background-color: #fff;

	transform: translate(-50%, -50%);
	animation: sk-scaleout 1.0s infinite ease-in-out;
}

@keyframes sk-scaleout {
	0% {
		transform: translate(-50%, -50%), scale(0);
	}
	100% {
		transform: translate(-50%, -50%), scale(1.0);
		opacity: 0;
	}
}

.entries article a.picasa::after {
	content: attr(title);
	position: absolute;
	display: inline-block;
	font-size: 10px;
	line-height: 10px;
	background: rgba(255, 255, 255, 0.8);
	bottom: -22px;
	right: 0;
	padding: 6px 0px 6px 6px;
	color: #777;
}

.entries article a.hatena-fotolife img ,
.entries article a.picasa img {
	display: block;
	max-height: 100vh;
	max-width: 100%;
	margin: 1em auto;
	border-width: 20px 30px;
	border-style: none;
	border-color: #000;
}

.entries article.photo {
	padding-bottom: 0;
}

.entries article.photo header {
	padding: 0;
	margin-bottom: -0.5em;
}

.entries article.photo span[itemtype="http://schema.org/Photograph"] {
	background: #fff;
	display: block;
	width: 1024px;
	float: none;
	margin: 0 -148px;
}

.entries article .social {
	text-align: center;
}

.entries article .social .hatena-star {
	display: block;
	height: 32px;
}

.entries article footer {
}

.amazon {
	margin: 0;
	padding: 0;
}

.amazon .image {
	float: left;
	margin: 0 1em 0 0;
}

.amazon .detail {
}

.amazon:after {
	display: block;
	clear: left;
	content: "";
}

figure.http {
	margin: 0;
	padding: 0;
}

figure.http .image {
	float: left;
	margin: 0 1em 0 0;
}

figure.http .image img {
	max-width: 128px;
	max-height: 128px;
}

figure.http .detail {
	color: #666;
}

figure.http:after {
	display: block;
	clear: left;
	content: "";
}

#global-footer {
	content-visibility: auto;
	contain-intrinsic-size: 1px 300px;
	width: 728px;
	margin: 0 auto;
	padding: 0 0 5em 0;
	font-size: 80%;
	text-align: left;
}

#global-footer h2 {
	font-family:
		'Noto Serif JP',
		YuMincho,
		"Hiragino Mincho ProN",
		"HG明朝E",
		serif;
	font-weight: normal;
}

#global-footer .author {
	display: flex;
}

#global-footer .author .image {
}

#global-footer .author .image img {
	aspect-ratio: 1 / 1;
	width: 160px;
	height: auto;
}

#global-footer .author .desc {
	padding: 0 0 0 20px;
	flex: 1;
}

#global-footer .author .desc p {
	margin: 0;
}

.button {
	display: inline-block;
	position: relative;
	height: 20px;
	padding: 1px 8px 1px 6px;
	margin-right: 5px;
	font-weight: 500;
	color: #fff !important;
	cursor: pointer;
	border-radius: 3px;
	box-sizing: border-box;
	font: normal normal normal 11px/18px 'Helvetica Neue',Arial,sans-serif;
	text-decoration: none;
}

.button i {
	position: relative;
	top: 2px;
	display: inline-block;
	width: 14px;
	height: 14px;
	background: transparent 0 0 no-repeat;
}

.button .label {
	display: inline-block;
	white-space: nowrap;
	margin-left: 3px;
	vertical-align: top;
}

.button.github-button {
	top: 1px;
	background: #ddd;
	background-image: linear-gradient(#eee, #ddd);
	border-color: #ccc;
	border-style: solid;
	border-width: 1px;
	color: #333 !important;
}

.button.github-button i {
	top: 1px;
	background-image: url('/images/github.svg');
}

.button.github-button .label {
	position: relative;
	top: -1px;
}

#archive {
	padding: 10px;
}

#archive .year {
	margin: 0;
	padding: 2em 0;
	clear: both;
}

#archive .year h1 {
	font-weight: bold;
	font-size: 100%;
	padding: 0;
	margin: 0;
}

#archive .year .months {
	display: block;
	margin: 0;
	padding: 0;
}

#archive .year .months .month {
	display: block;
	float: left;
	width: 16.66666666%;
	margin: 0;
	padding: 0;
}

#archive .year .months .month a {
	display: block;
	text-align: center;
	padding: 0.5em 0;
	color: #333;
}

#archive .year .months .month a:link {
	background: #efefef;
}

#archive .year .months .month:nth-child(even) a:link {
	background: #e0e0e0;
}

#archive .year .months .month a:link ,
#archive .year .months .month a:visited {
	text-decoration: none;
}

#archive .year .months .month a:link:hover {
	color: #fff;
	background: #000 !important;
}

ol[itemtype*="BreadcrumbList"] {
	display: none;
	list-style: none;
	font-size: 80%;
	margin: 0;
	padding: 10px 0 0 0;
}
ol[itemtype*="BreadcrumbList"] + ol[itemtype*="BreadcrumbList"] {
	padding: 0;
}

ol[itemtype*="BreadcrumbList"] a:link ,
ol[itemtype*="BreadcrumbList"] a:visited {
	color: #666;
	text-decoration: none;
}

ol[itemtype*="BreadcrumbList"] li {
	display: inline;
	margin: 0;
	padding: 0;
}

ol[itemtype*="BreadcrumbList"] li:before {
	display: inline;
	content: "›";
}

ol[itemtype*="BreadcrumbList"] li:first-child:before {
	content: "";
}

.abcjs-lyric {
	font-weight: normal;
	font-size: 14px;
}

.abcjs-annotation {
	font-weight: normal;
	font-size: 14px;
}

@media only screen and (min-width : 1650px) {
	body {
		width: 1600px;
	}
	.entries .date {
		width: 1600px;
	}
	.entries article header {
		width: 1600px;
	}
	.entries article.photo span[itemtype="http://schema.org/Photograph"] {
		width: 1600px;
		/* (1600-728)/2 */
		margin: 0 -436px;
	}

	.entries article.photo a.hatena-fotolife img ,
	.entries article.photo a.picasa img {
		max-height: 100vh;
		max-width: 100%;
	}

	.adsense-responsive {
		width: 1600px; height: 90px;
	}
}

/*
@media only screen and (min-width : 2100px) {
	body {
		transform: scale(1.25);
		transform-origin: center top;
	}
}

@media only screen and (min-width : 2500px) {
	body {
		transform: scale(1.5);
		transform-origin: center top;
	}
}
*/

@media only screen and (min-width : 2900px) {
	body {
		transform: scale(1.75);
		transform-origin: center top;
	}
}

@media only screen and (min-width : 3300px) {
	body {
		transform: scale(2);
		transform-origin: center top;
	}
}

@media only screen and (max-width : 1100px) {
	body {
		width: 728px;
	}
	.entries .date {
		width: 728px;
	}
	.entries article header {
		width: 728px;
	}
	.entries article.photo span[itemtype="http://schema.org/Photograph"] {
		width: 728px;
		margin: 0;
	}

	.adsense-responsive {
		width: 728px; height: 90px;
	}
}

@media only screen and (max-width : 770px) {
	body {
		width: 100%;
		padding: 0;
		margin: 0;
		font-size: 13pt;
		background: #fff;
	}

	#global-header {
		padding: 0;
		margin: 0;
		position: static;
	}

	#global-header #header {
		margin: 0;
		padding: 0;
	}

	#global-header #header a {
		left: 0px;
	}

	#global-header #search-form {
		position: absolute;
		top: 10px;
		right: 10px;
	}

	#global-navigation {
		position: static;
		width: 100%;
		margin: 0;
		padding: 5px 0;
		background: #ccc;
	}

	#global-navigation ul {
		text-align: center;
	}

	#global-navigation ul li a {
		background: transparent;
	}

	#global-navigation::after {
		color: #666;
		padding-right: 8px;
	}

	#category-header {
		padding: 0 10px;
	}

	#content {
		width: 100%;
		margin: 0;
		overflow: hidden;
	}

	.entries {
		margin: 0;
		padding: 0;
	}


	.entries .date {
		width: 100%;
		padding: 3px 12px;
		margin-left: 0;
	}

	.entries article header {
		width: 100%;
		display: block;
	}

	.entries article header h1, 
	.entries article header h2, 
	.entries article header .metadata {
		display: block;
		width: 100%;
		margin: auto;
		position: relative;
		text-align: left;
		border: none;
	}

	.entries article {
		padding: 5px 10px;
	}

	.entries article .content {
		width: 100%;
		margin: 0;
	}

	.entries article pre.code {
		margin: 0 -10px;
	}

	.entries article pre.code {
		width: 100%;
		margin: 20px 0;
		padding: 20px 10px;
	}

	.entries article span[itemtype="http://schema.org/Photograph"] {
		background: #fff;
		display: block;
		width: 100%;
	}

	.entries article.photo span[itemtype="http://schema.org/Photograph"] {
		background: #fff;
		display: block;
		width: 100%;
		float: none;
		margin: 0;
	}

	.entries article div.gist {
		font-size: 75%;
		width: 100%;
		margin: 20px 0;
		padding: 0;
		line-height: 1.33;
	}

	.entries article a.hatena-fotolife ,
	.entries article a.picasa ,
	.entries article p.photo {
		display: block;
		border: none;
		width: 100%;
		text-align: center;
		margin: 0;
	}

	.entries article a.hatena-fotolife img ,
	.entries article a.picasa img {
		max-width: 100%;
		max-height: 100vh;
		border-width: 10px;
		box-sizing: border-box;
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		-o-box-sizing: border-box;
	}

	.entries article.photo span[itemtype="http://schema.org/Photograph"] img {
		max-width: 100%;
		max-height: 100vh;
	}


	.related ,
	#global-footer {
		margin: 0;
		padding: 10px;
		width: 100%;
		box-sizing: border-box;
	}

	.pager {
		margin: 0;
		padding: 10px;
	}

	.pager a:link ,
	.pager a:visited ,
	.pager a:hover {
		display: inline-block;
		padding: 10px 0;
		text-align: center;
		width: 100%;
		margin: 5px 0;
		background: #333;
		text-decoration: none;
		color: #fff;
	}

	.share-buttons .share-button[href*="line.me"] {
		display: inline-block;
	}

	.entries article .content.similar-entries ul.similar-images a {
		display: block;
		position: relative;
		height: 100px;
		background-position: center;
		background-size: cover;
	}
}