/* bootstrap-subset.css */
/*!
 * Bootstrap v5.1.1 のサブセット。CDN 読み込みを廃止するために切り出したもの。
 *
 * 収録範囲:
 *   - Reboot（要素セレクタのルール）と :root のカスタムプロパティを全て
 *     ※ body の margin:0 や見出しサイズなど、テーマがこれらに依存しているため
 *       クラス一致だけで抽出すると表示が崩れる
 *   - 当サイトで実際に使用しているクラスに一致するルール
 *
 * 再生成する場合は bootstrap@5.1.1 の配布CSSから同じ条件で抽出すること。
 */
*,::after,::before{box-sizing:border-box}@media (prefers-reduced-motion:no-preference){:root{scroll-behavior:smooth}}body{margin:0;font-family:var(--bs-body-font-family);font-size:var(--bs-body-font-size);font-weight:var(--bs-body-font-weight);line-height:var(--bs-body-line-height);color:var(--bs-body-color);text-align:var(--bs-body-text-align);background-color:var(--bs-body-bg);-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent}hr{margin:1rem 0;color:inherit;background-color:currentColor;border:0;opacity:.25}hr:not([size]){height:1px}h1,h2,h3,h4,h5,h6{margin-top:0;margin-bottom:.5rem;font-weight:500;line-height:1.2}h1{font-size:calc(1.375rem + 1.5vw)}@media (min-width:1200px){h1{font-size:2.5rem}}h2{font-size:calc(1.325rem + .9vw)}@media (min-width:1200px){h2{font-size:2rem}}h3{font-size:calc(1.3rem + .6vw)}@media (min-width:1200px){h3{font-size:1.75rem}}h4{font-size:calc(1.275rem + .3vw)}@media (min-width:1200px){h4{font-size:1.5rem}}h5{font-size:1.25rem}h6{font-size:1rem}p{margin-top:0;margin-bottom:1rem}abbr[data-bs-original-title],abbr[title]{-webkit-text-decoration:underline dotted;text-decoration:underline dotted;cursor:help;-webkit-text-decoration-skip-ink:none;text-decoration-skip-ink:none}address{margin-bottom:1rem;font-style:normal;line-height:inherit}ol,ul{padding-left:2rem}dl,ol,ul{margin-top:0;margin-bottom:1rem}ol ol,ol ul,ul ol,ul ul{margin-bottom:0}dt{font-weight:700}dd{margin-bottom:.5rem;margin-left:0}blockquote{margin:0 0 1rem}b,strong{font-weight:bolder}small{font-size:.875em}mark{padding:.2em;background-color:#fcf8e3}sub,sup{position:relative;font-size:.75em;line-height:0;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}a{color:#0d6efd;text-decoration:underline}a:hover{color:#0a58ca}a:not([href]):not([class]),a:not([href]):not([class]):hover{color:inherit;text-decoration:none}code,kbd,pre,samp{font-family:var(--bs-font-monospace);font-size:1em;direction:ltr;unicode-bidi:bidi-override}pre{display:block;margin-top:0;margin-bottom:1rem;overflow:auto;font-size:.875em}pre code{font-size:inherit;color:inherit;word-break:normal}code{font-size:.875em;color:#d63384;word-wrap:break-word}a>code{color:inherit}kbd{padding:.2rem .4rem;font-size:.875em;color:#fff;background-color:#212529;border-radius:.2rem}kbd kbd{padding:0;font-size:1em;font-weight:700}figure{margin:0 0 1rem}img,svg{vertical-align:middle}table{caption-side:bottom;border-collapse:collapse}caption{padding-top:.5rem;padding-bottom:.5rem;color:#6c757d;text-align:left}th{text-align:inherit;text-align:-webkit-match-parent}tbody,td,tfoot,th,thead,tr{border-color:inherit;border-style:solid;border-width:0}label{display:inline-block}button{border-radius:0}button:focus:not(:focus-visible){outline:0}button,input,optgroup,select,textarea{margin:0;font-family:inherit;font-size:inherit;line-height:inherit}button,select{text-transform:none}[role=button]{cursor:pointer}select{word-wrap:normal}select:disabled{opacity:1}[list]::-webkit-calendar-picker-indicator{display:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]:not(:disabled),[type=reset]:not(:disabled),[type=submit]:not(:disabled),button:not(:disabled){cursor:pointer}::-moz-focus-inner{padding:0;border-style:none}textarea{resize:vertical}fieldset{min-width:0;padding:0;margin:0;border:0}legend{float:left;width:100%;padding:0;margin-bottom:.5rem;font-size:calc(1.275rem + .3vw);line-height:inherit}@media (min-width:1200px){legend{font-size:1.5rem}}legend+*{clear:left}::-webkit-datetime-edit-day-field,::-webkit-datetime-edit-fields-wrapper,::-webkit-datetime-edit-hour-field,::-webkit-datetime-edit-minute,::-webkit-datetime-edit-month-field,::-webkit-datetime-edit-text,::-webkit-datetime-edit-year-field{padding:0}::-webkit-inner-spin-button{height:auto}[type=search]{outline-offset:-2px;-webkit-appearance:textfield}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-color-swatch-wrapper{padding:0}::file-selector-button{font:inherit}::-webkit-file-upload-button{font:inherit;-webkit-appearance:button}output{display:inline-block}iframe{border:0}summary{display:list-item;cursor:pointer}progress{vertical-align:baseline}[hidden]{display:none!important}.img-fluid{max-width:100%;height:auto}.container{width:100%;padding-right:var(--bs-gutter-x,.75rem);padding-left:var(--bs-gutter-x,.75rem);margin-right:auto;margin-left:auto}@media (min-width:576px){.container{max-width:540px}}@media (min-width:768px){.container{max-width:720px}}@media (min-width:992px){.container{max-width:960px}}@media (min-width:1200px){.container{max-width:1140px}}@media (min-width:1400px){.container{max-width:1320px}}.row{--bs-gutter-x:1.5rem;--bs-gutter-y:0;display:flex;flex-wrap:wrap;margin-top:calc(var(--bs-gutter-y) * -1);margin-right:calc(var(--bs-gutter-x) * -.5);margin-left:calc(var(--bs-gutter-x) * -.5)}.row>*{flex-shrink:0;width:100%;max-width:100%;padding-right:calc(var(--bs-gutter-x) * .5);padding-left:calc(var(--bs-gutter-x) * .5);margin-top:var(--bs-gutter-y)}.col-4{flex:0 0 auto;width:33.33333333%}.col-6{flex:0 0 auto;width:50%}.col-12{flex:0 0 auto;width:100%}.g-4{--bs-gutter-x:1.5rem}.g-4{--bs-gutter-y:1.5rem}@media (min-width:576px){.col-sm-4{flex:0 0 auto;width:33.33333333%}.col-sm-6{flex:0 0 auto;width:50%}.col-sm-8{flex:0 0 auto;width:66.66666667%}.col-sm-12{flex:0 0 auto;width:100%}}@media (min-width:768px){.col-md-2{flex:0 0 auto;width:16.66666667%}.col-md-3{flex:0 0 auto;width:25%}.col-md-4{flex:0 0 auto;width:33.33333333%}.col-md-6{flex:0 0 auto;width:50%}.col-md-8{flex:0 0 auto;width:66.66666667%}.col-md-9{flex:0 0 auto;width:75%}.col-md-10{flex:0 0 auto;width:83.33333333%}.col-md-12{flex:0 0 auto;width:100%}}@media (min-width:992px){.col-lg-4{flex:0 0 auto;width:33.33333333%}}.nav{display:flex;flex-wrap:wrap;padding-left:0;margin-bottom:0;list-style:none}.card{position:relative;display:flex;flex-direction:column;min-width:0;word-wrap:break-word;background-color:#fff;background-clip:border-box;border:1px solid rgba(0,0,0,.125);border-radius:.25rem}.card>hr{margin-right:0;margin-left:0}.breadcrumb{display:flex;flex-wrap:wrap;padding:0 0;margin-bottom:1rem;list-style:none}.pagination{display:flex;padding-left:0;list-style:none}.d-flex{display:flex!important}.h-100{height:100%!important}.align-items-center{align-items:center!important}.mb-3{margin-bottom:1rem!important}.p-3{padding:1rem!important}
.alert{position:relative;padding:1rem 1rem;margin-bottom:1rem;border:1px solid transparent;border-radius:.25rem}

/* metronic/assets/style.css */
/*
Template Name: Metronic - Responsive Website Template build with Twitter Bootstrap 3.1.1
*/

:root {
  --main-font-color: #292929;
  --a-color: #0072E5;
}

/* General body settings */
body {
	color: #424242;
	direction: ltr;
	font: 400 13px 'Open Sans', Arial, sans-serif;
	background: #fff;
}

/***
General typography
***/
h1, h2, h3, h4, h5, h6 {
	font: 300 'Open Sans', sans-serif;
	margin: 0 0 10px;
}

h1:hover ::before,
h2:hover ::before,
h3:hover ::before {
  content:'#';
  margin-left: -0.8em;
  position: absolute;
}
h1:hover code:before,
h2:hover code:before,
h3:hover code:before,
h1:hover span:before,
h2:hover span:before,
h3:hover span:before,
h1:hover i:before,
h2:hover i:before,
h3:hover i:before,
.article-title > a:before {
  content:none;
}
h1 {
	margin-bottom: 15px;
}
.main h1 {
	margin-top: -6px;
}

/***
Fix link outlines after click
***/
a {
  color: var(--a-color);
}
a, a:focus, a:hover, a:active {
	outline: 0;
 	text-decoration: none;
}
a:hover, a:focus {
	color: var(--a-color);
	text-decoration: underline;
}
.article-entry a {
	text-decoration: none;
}
.article-entry a:hover,
.article-entry a:focus {
	text-decoration: underline;
	transition-duration: 0.1s;
}
.article-entry a:visited {
	color: #590fc7;
}

/***
Misc tools
***/
.padding-top-10 {
	padding-top: 10px !important;
}
.margin-bottom-20 {
	margin-bottom: 20px !important;
}
.margin-bottom-40 {
	margin-bottom: 40px !important;
}
.margin-top-30 {
  margin-top: 30px !important;
}

/* overides metro scrolbars in IE10 and makes them look like a default scrollbar */
@-ms-viewport{
	width: auto !important;
}

::-moz-selection {
  color: #fff;
  background: var(--main-font-color);
}
::selection {
  color: #fff;
  background: var(--main-font-color);
}

/* Global classes */
.min-hight500 {
	min-height: 500px;
}

/***
Header and header elements
***/
.header {
	box-shadow: 0 1px 3px #ddd;
	background: #fff;
	border-radius: 0;
	margin-bottom: 23px;
	z-index: 999;
	position: relative;
}
.header .container {
  position: relative;
}
.ie8 .header {
	border-bottom: 1px solid #eee;
}
/* breadcrumb */
.breadcrumb {
	background: none;
	padding: 0;
	font: 14px "Open Sans", sans-serif;
	color: #5f6d7b;
	margin-bottom: 4px;
}
.breadcrumb > li + li:before {
  	content: ">";
    -moz-osx-font-smoothing: grayscale;
    display: inline-block;
    font-style: normal;
    font-weight: normal;
    line-height: 1;
    color: #5f6d7b;
    padding: 0 5px; /* 記号の左右に余白を追加 */
}
.breadcrumb a {
	color: #5f6d7b;
}
.pagination {
	border-radius: 0;
	margin: 0;
}
.pagination > li {
    display: inline-block;
    margin-left: 5px;
}
.pagination > li > a, .pagination > li > span,
.pagination > li:first-child > a, .pagination > li:first-child > span,
.pagination > li:last-child > a, .pagination > li:last-child > span {
	border-radius: 25px !important;
	border: none;
	color: #868c93;
}
.pagination > li > span,
.pagination > li > span:hover {
	background: #555;
	color: #fff;
}
.pagination > li:first-child > a,
.pagination > li:last-child > a {
	padding: 4px 12px 8px;
}
.items-info {
	padding-top: 7px;
	color: #868c93;
}

/* 404 page */
.corporate .page-404 {
 	text-align: center;
 	padding-top: 60px;
 	padding-bottom: 125px;
}
.page-404 .number {
	position: relative;
	top: 35px;
	display: inline-block;
	letter-spacing: -10px;
	margin-top: 0px;
	margin-bottom: 10px;
	line-height: 128px;
	font-size: 128px;
	font-weight: 300;
	color: var(--main-font-color);
	text-align: right;
}
.page-404 .details {
	margin-left: 40px;
	display: inline-block;
	padding-top: 0px;
	text-align: left;
	top: 15px;
	position: relative;
}

/* 500 page */
.corporate .page-500 {
	text-align: center;
 	padding-top: 60px;
 	padding-bottom: 60px;
}
.page-500 .number {
	display: inline-block;
	letter-spacing: -10px;
	line-height: 128px;
	font-size: 128px;
	font-weight: 300;
	color: var(--main-font-color);
	text-align: right;
}
.page-500 .details {
	margin-left: 40px;
	display: inline-block;
	text-align: left;
}

/***
Pre-Footer and pre-footer elements
***/
.pre-footer {
	background: #313030;
	color: #b0b0b0;
}
.pre-footer .container {
	padding-top: 45px;
}
.pre-footer a {
	color: #57c8eb;
}
.pre-footer h2,
.ecommerce .pre-footer h2 {
	font-size: 21px;
	color: #c2c1c1;
}
.pre-footer p {
	margin-bottom: 20px;
}
.pre-footer li {
	margin-bottom: 6px;
}

/* pre-footer twitter block */
.pre-footer address {
	line-height: 1.7;
}
.pre-footer-col {
	padding-bottom: 22px;
}
.pre-footer hr {
	margin-top: 0;
	border-color: #404040;
}

/* footer */
.footer {
	background: #272626;
	color: #fff;
	font-size: 12px;
	padding: 15px 0;
}
.footer a {
	color: #fff;
	text-decoration: underline;
}
.footer a:hover {
	text-decoration: none;
}
.footer .padding-top-10 {
	opacity: 0.5;
}
.footer .list-inline > li:last-child {
	padding-right: 0;
}
.footer ul {
	margin: 0;
	padding: 0;
}

/* Blog Page */
.blog-posts h2,
.ecommerce .blog-posts h2 {
  padding-top: 0;
}
.blog-posts p {
  text-align: justify;
}
.blog-posts hr.blog-post-sep {
  margin: 40px 0;
}
.blog-info {
  list-style: none;
  margin: 24px 0 0 0;
  padding-left:0;
}
.blog-info li {
  padding: 0;
  color: #555;
  font-size: 13px;
  display: inline-block;
}
.blog-info li i {
  color: var(--main-font-color);
}
.blog-posts .pagination li {
	margin-left: -12px;
	margin-right: 17px;
}
.blog-posts .more,
.blog-sidebar .more {
	color: var(--main-font-color);
}
.blog-sidebar {
  padding-bottom: 40px;
}

/*
  style-responsive.css
  https://purifycss.online/
*/
@media (max-width:992px){
  .sidebar-menu a:focus{color:#424242!important;text-decoration:none}
}
@media (max-width:767px){
  .pre-header .pull-right{
    float:left!important
  }
  .pre-header .pull-right li:first-child{
    padding-left:0
  }
  .sidebar{margin-bottom:40px}
  .sidebar-menu .fa-angle-right{display:inline-block}
  .footer .pull-right,.pre-footer .pull-right{float:none!important}
  .footer .pull-right,.pre-footer .pull-right{padding-top:15px}
  .footer .list-inline>li{padding-left:0;margin-right:5px}
  .pagination{float:left!important;padding-top:10px}
  .pagination>li{margin-left:0;margin-right:5px}
  .pre-footer .margin-bottom-40{margin-bottom:0}
  .footer img{margin-bottom:10px}
}
@media (max-width:576px){
  .blog-posts h2{padding-top:15px}
}
@media (max-width:480px){
  .pre-header .list-inline li{
    display:block;
    border:none;
    margin-bottom:10px;
    padding:0
  }
  .pre-header .col-md-6{float:left}
}
@media (max-width:320px){
  .site-logo{margin-right:0}
}
@media screen and (max-width: 992px){
  .advent-calendar {
    display:none;
  }
}

/* 折りたたみ */
summary {
  padding-top: 10px;
  cursor: pointer;
}
summary:hover, summary:focus {
  color: var(--main-font-color);
}
details {
  padding-bottom: 24px;
}

/* 記事ごとのカテゴリ調整 */
.article-header .article-category {
  padding-bottom: 24px;
}

aside h2 {
  font-size: 22px;
  font-weight: 700;
}

.featured-post,
.related-post {
  padding: 20px 0px 0px 10px;
  border-radius: 0.5rem;
}
.featured-post h2,
.related-post h2{
  font-size: 18px;
}
.featured-post-link a,
.related-post-link a {
  font-size: 1.2em;
  color: #424242;
}
.featured-post-link li,
.related-post-link li {
  padding: 8px 0px 6px 0px;
}
.snscount {
  padding: 0px 10px 0px 10px;
}
.MathJax {
  padding: 1px 8px 1px 8px;
}
#footnotes {
  display: inline-block;
  _display: inline;
}

/* theme-styles.styl */
/* General Overrides of Metronic */
.article-entry pre,
.article-entry .highlight {
  background: #2d2d2d;
  margin: 0;
  padding: 15px 20px;
  border-style: solid;
  border-color: #ddd;
  border-width: 1px 0;
  overflow: auto;
  color: #ccc;
  font-size: 13px;
  line-height: 20.8px;
}
.article-entry .highlight .gutter pre,
.article-entry .gist .gist-file .gist-data .line-numbers {
  color: #666;
  font-size: 0.95em;
}
.article-entry pre,
.article-entry code {
  font-family: "Source Code Pro", Consolas, Monaco, Menlo, Consolas, monospace;
}
.article-entry code {
  background: #eee;
  text-shadow: 0 1px #fff;
  padding: 0 0.3em;
}
.article-entry a code {
  color: #0a58ca;
}
.article-entry pre code {
  background: none;
  text-shadow: none;
  padding: 0;
}
.article-entry .highlight pre {
  border: none;
  margin: 0;
  padding: 0;
}
.article-entry .highlight table {
  margin: 0;
  width: auto;
}
.article-entry .highlight td {
  border: none;
  padding: 0;
}
.article-entry .highlight figcaption {
  font-size: 0.85em;
  color: #999;
  line-height: 1em;
  margin-bottom: 1em;
}
.article-entry .highlight figcaption a {
  float: right;
}
.article-entry .highlight .gutter pre {
  text-align: right;
  padding-right: 20px;
}
.article-entry .highlight .line {
  height: 20.8px;
}
.article-entry .gist {
  margin: 0 -20px;
  border-style: solid;
  border-color: #ddd;
  border-width: 1px 0;
  background: #2d2d2d;
  padding: 15px 20px 15px 0;
}
.article-entry .gist .gist-file {
  border: none;
  font-family: "Source Code Pro", Consolas, Monaco, Menlo, Consolas, monospace;
  margin: 0;
}
.article-entry .gist .gist-file .gist-data {
  background: none;
  border: none;
}
.article-entry .gist .gist-file .gist-data .line-numbers {
  background: none;
  border: none;
  padding: 0 20px 0 0;
}
.article-entry .gist .gist-file .gist-data .line-data {
  padding: 0 !important;
}
.article-entry .gist .gist-file .highlight {
  margin: 0;
  padding: 0;
  border: none;
}
.article-entry .gist .gist-file .gist-meta {
  background: #2d2d2d;
  color: #999;
  font: 0.85em "Helvetica Neue", Helvetica, Arial, sans-serif;
  text-shadow: 0 0;
  padding: 0;
  margin-top: 1em;
  margin-left: 20px;
}
.article-entry .gist .gist-file .gist-meta a {
  color: #258fb8;
  font-weight: normal;
}
.article-entry .gist .gist-file .gist-meta a:hover {
  text-decoration: underline;
}
pre .comment,
pre .title {
  color: #999;
}
pre .variable,
pre .attribute,
pre .tag,
pre .regexp,
pre .ruby .constant,
pre .xml .tag .title,
pre .xml .pi,
pre .xml .doctype,
pre .html .doctype,
pre .css .id,
pre .css .class,
pre .css .pseudo {
  color: #f2777a;
}
pre .number,
pre .preprocessor,
pre .built_in,
pre .literal,
pre .params,
pre .constant {
  color: #f99157;
}
pre .class,
pre .ruby .class .title,
pre .css .rules .attribute {
  color: #9c9;
}
pre .string,
pre .value,
pre .inheritance,
pre .header,
pre .ruby .symbol,
pre .xml .cdata {
  color: #9c9;
}
pre .css .hexcolor {
  color: #6cc;
}
pre .function,
pre .python .decorator,
pre .python .title,
pre .ruby .function .title,
pre .ruby .title .keyword,
pre .perl .sub,
pre .javascript .title,
pre .coffeescript .title {
  color: #69c;
}
pre .keyword,
pre .javascript .function {
  color: #c9c;
}
pre .deletion {
  color: #f2777a;
}
pre .addition {
  color: #9c9;
}
/* Paginator styles */
.pagination > a,
.pagination > span {
  display: inline-block;
  margin-left: 5px;
  border-radius: 25px !important;
  border: none;
  color: #868c93;
  padding: 6px 12px;
  position: relative;
  float: left;
  margin-left: -12px;
  margin-right: 17px;
  line-height: 1.42857143;
  text-decoration: none;
  background-color: #fff;
}
.pagination > a:hover,
.pagination > a:focus {
  color: #23527c;
  background-color: #eee;
  border-color: #ddd;
  z-index: 3;
}
.pagination > a:first-child,
.pagination > a:last-child {
  padding: 4px 12px 8px;
}
.pagination span {
  z-index: 2;
  color: #fff;
  cursor: default;
  background-color: #337ab7;
  border-color: #337ab7;
}
#page-nav {
  float: none !important;
  margin-bottom: 20px !important;
  margin-left: 5px;
}
/* Extra info topbar tweaks */
@media (max-width: 480px) {
  .pre-header .list-inline li {
    margin-bottom: 2px;
  }
  .page-header-fixed .pre-header {
    opacity: 0;
  }
}
@media (max-width: 767px) {
  .pre-header .pull-right {
    float: right !important;
  }
}
/* Menu tweak */
@media (max-width: 1024px) {
  .page-header-fixed .header-navigation {
    height: auto !important;
  }
}
/* Typography and Posts */
p {
  line-height: 1.5;
}
h4 {
  line-height: 1.5 !important;
}
.article-entry p,
.article-entry li {
  text-align: inherit !important;
  line-height: 1.75em !important;
  font-size: 1.2em;
  color: #424242;
}
/* details の summary は p / li と違って本文サイズの指定対象から漏れており、
   body の 13px を継承して周囲（1.2em = 15.6px）より小さく表示されていた */
.article-entry summary {
  font-size: 1.2em;
}
.article-entry li p {
  font-size: 1em;
}
.article-entry li li {
  font-size: 1em;
}
.article-entry blockquote {
  font-size: 0.9em;
}
.blog-item blockquote {
  background-color: #f8f9fa;
}
blockquote p {
  margin: 0.5rem 0 0.5rem 0;
}
.article-entry h1 {
  border-bottom: solid 2px #ecebeb;
  font-size: 26px;
  line-height: 1.2;
  margin-bottom: 8px;
  margin-top: 64px;
  padding-bottom: 8px;
  font-weight: 700;
}
.article-entry h2 {
  margin-top: 40px;
  font-size: 24px;
  border-bottom: solid 1px #ecebeb;
  line-height: 1.225;
  margin-bottom: 12px;
  padding-bottom: 8px;
  font-weight: 700;
}
.article-entry h3 {
  margin-top: 20px;
  font-size: 22px;
  font-weight: 700;
}
.article-entry h4 {
  margin-top: 20px;
  font-size: 20px;
}
.article-entry h5 {
  margin-top: 20px;
  font-size: 18px;
}
.blog-item img {
  max-width: 100%;
  height: auto;
  margin: 16px 0px;
  border-radius: 5px;
}
.blog-item .img-middle-size {
  width: 65%;
}
.blog-item .img-small-size {
  width: 45%;
}
.blog-item .img-very-small-size {
  width: 25%;
}
.blog-item .img-reset-size {
  width: initial;
}
.img_wrap {
  overflow: hidden;
}
.img_wrap img {
  cursor: pointer;
  transition-duration: 0.3s;
  border-radius: 4px;
  display: block;
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 160px;
  margin: 0 auto;
}
.img_wrap:hover img,
.img_wrap:focus img {
  opacity: 0.6;
  transition-duration: 0.3s;
}
a:focus .img_wrap img {
  opacity: 0.6;
  transition-duration: 0.3s;
}
.social-area {
  padding: 1.5em 0;
}
/* ul.social-button の padding-left: 16px のぶん、親が左余白を持たない場所では
   本文やコンテナの左端からずれて見える。該当する2箇所で打ち消す。
   記事一覧の各記事に付くボタン（.archive-social-button）は親カラムの
   余白があるため対象外 */
.social-area ul.social-button,
.home-social-button ul.social-button {
  padding-left: 0;
}
.img-frame-line {
  border: 1px solid #ddd;
  margin-bottom: 1em;
}
/******************************
 全体レイアウト
******************************/
body {
  font: 400 13px "Hiragino Kaku Gothic Pro", Meiryo, "メイリオ", "MS PGothic", sans-serif;
  overflow-x: hidden;
}
#article-nav {
  clear: both;
}
.header {
  position: relative !important;
  background-image: url("/banner.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 50% 50%;
}
.header .container {
  height: 100%;
  background-color: rgba(0,0,0,0.2);
}
body.page-header-fixed {
  padding-top: 0px !important;
}
body.page-header-fixed .header {
  position: relative !important;
}
.header-overlay {
  background-color: rgba(0,0,0,0.3);
}
.header-menu {
  height: 3px;
  background-color: rgba(0,0,0,0.6);
}
.header-title {
  margin-top: 1px;
  font-size: 80px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  font-weight: 700;
  color: #ddd;
  text-align: center;
  text-shadow: 0px 4px 3px rgba(0,0,0,0.4), 0px 8px 13px rgba(0,0,0,0.1), 0px 18px 23px rgba(0,0,0,0.1);
}
.header-title a {
  color: #ddd;
  text-decoration: none;
}
.header-title-sub {
  padding-bottom: 15px;
  font-size: 20px;
  font-family: 'Segoe UI', 'Helvetica Neue', 'Hiragino Kaku Gothic ProN', 'メイリオ', 'meiryo', 'sans-serif';
  font-weight: 400;
  color: #ddd;
  text-align: center;
  text-shadow: 0px 4px 3px rgba(0,0,0,0.4), 0px 8px 13px rgba(0,0,0,0.1), 0px 18px 23px rgba(0,0,0,0.1);
}
.site-logo {
  padding: 0px;
  margin: 20px 0px 20px 10px;
}
@media (max-width: 1204px) {
  body.page-header-fixed {
    padding-top: 0px !important;
  }
  .header-title {
    margin-top: 15px;
    font-size: 65px;
  }
}
@media (max-width: 558px) {
  .header-title {
    font-size: 36px;
  }
}
.article-card {
  box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16), 0 2px 10px 0 rgba(0,0,0,0.12);
  padding: 24px 20px 0px 20px;
  margin: 0 0 32px 0;
  border-radius: 8px;
}
/******************************
 見出し
******************************/
@media (max-width: 1024px) {
  .h1,
  h1 {
    font-size: 28px;
  }
  .h2,
  h2 {
    font-size: 24px;
  }
}
/******************************
 ソーシャルボタン
******************************/
.home-social-button {
  margin-top: 20px;
  margin-bottom: 20px;
}
ul.social-button {
  border: none;
  display: flex;
  flex-wrap: wrap;
  list-style-type: none;
  padding: 8px 0px 4px 16px;
  width: auto;
}
ul.social-button li {
  height: 21px;
  margin: 0.5em 1em 0 0em;
}
ul.social-button li a {
  width: 100%;
  height: 100%;
}
/* Custom Twitter Button */
.social-btn {
  display: inline-block;
  max-width: 100%;
  min-width: 7em;
  cursor: pointer;
  padding: 1px 8px 1px 6px;
  font: normal normal normal 11px/18px 'Helvetica Neue', Arial, sans-serif;
  position: relative;
  box-sizing: border-box;
  border-radius: 3px;
}
.social-btn i {
  top: 2px;
  position: relative;
  display: inline-block;
  width: 14px;
  height: 14px;
  background: transparent 0 0 no-repeat;
}
.social-btn-label {
  vertical-align: top;
  position: relative;
  top: 0px;
  display: inline-block;
  margin-left: 6px;
  white-space: nowrap;
}
/* Custom X Button */
.x-btn,
.x-btn:visited {
  color: #000;
  border: 1px solid #000;
}
.x-btn i {
/* 箱の大きさは他のボタン（14px）と揃える。ここだけ11pxにすると
     アイコンとラベルの位置が他とずれ、ボタン内の余白配分も崩れる。
     Xのアイコンは他より字面が大きいため、グリフだけ11px相当に縮めて調整する */
  background-size: 11px 11px;
  background-repeat: no-repeat; /* アイコンの繰り返しを防止 */
  background-position: center; /* アイコンを中央に配置 */
/* 通常時の黒いXアイコン */
  background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIwMCIgaGVpZ2h0PSIxMjI3IiB2aWV3Qm94PSIwIDAgMTIwMCAxMjI3IiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxwYXRoIGQ9Ik03MTQuMTYzIDUxOS4yODRMMTE2MC44OSAwSDEwNTUuMDNMNjY3LjEzNyA0NTAuODg3TDM1Ny4zMjggMEgwTDQ2OC40OTIgNjgxLjgyMUwwIDEyMjYuMzdoMTA1Ljg2Nkw1MTUuNDkxIDc1MC4yMThMODQyLjY3MiAxMjI2LjM3SDEyMDBMNzE0LjEzNyA1MTkuMjg0SDcxNC4xNjNaTTY1OC44OCA1ODMuNTc5TDU2OS4xNjUgNjg3LjgyOEw4OTIuNDc2IDExNTAuMzAxSDEwNTUuMDhMNjU4Ljg4IDU4My41NzlaTTYxMS40MTIgNTE1LjY4NUwzMDYuNjE1IDc5LjY5NDRIMTQ0LjAxMUw1MjEuNjk3IDYxOS45MzRMNjExLjQxMiA1MTUuNjg1WiIgZmlsbD0iIzAwMDAwMCIvPjwvc3ZnPg==");
}
.x-follow-btn {
  margin-bottom: 6px;
}
.x-btn:hover,
.x-btn:focus {
  color: #fff;
  border: none;
  background-color: #000;
}
.x-btn:hover i,
.x-btn:focus i {
/* ホバー時の白いXアイコン */
  background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIwMCIgaGVpZ2h0PSIxMjI3IiB2aWV3Qm94PSIwIDAgMTIwMCAxMjI3IiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxwYXRoIGQ9Ik03MTQuMTYzIDUxOS4yODRMMTE2MC44OSAwSDEwNTUuMDNMNjY3LjEzNyA0NTAuODg3TDM1Ny4zMjggMEgwTDQ2OC40OTIgNjgxLjgyMUwwIDEyMjYuMzdoMTA1Ljg2Nkw1MTUuNDkxIDc1MC4yMThMODQyLjY3MiAxMjI2LjM3SDEyMDBMNzE0LjEzNyA1MTkuMjg0SDcxNC4xNjNaTTY1OC44OCA1ODMuNTc5TDU2OS4xNjUgNjg3LjgyOEw4OTIuNDc2IDExNTAuMzAxSDEwNTUuMDhMNjU4Ljg4IDU4My41NzlaTTYxMS40MTIgNTE1LjY4NUwzMDYuNjE1IDc5LjY5NDRIMTQ0LjAxMUw1MjEuNjk3IDYxOS45MzRMNjExLjQxMiA1MTUuNjg1WiIgZmlsbD0iI2ZmZiIvPjwvc3ZnPg==");
}
.x-btn-label {
  color: #000;
}
.x-btn-label:hover,
.x-btn-label:hover:focus {
  color: #fff;
}
.x-btn-follow {
  border: 1px solid #000;
  background-color: #000;
}
.x-btn-follow i {
/* アイコンのサイズを調整 */
  width: 11px;
  height: 11px;
  background-size: contain; /* アイコンを要素にフィットさせる */
  background-repeat: no-repeat; /* アイコンの繰り返しを防止 */
  background-position: center; /* アイコンを中央に配置 */
  background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTIwMCIgaGVpZ2h0PSIxMjI3IiB2aWV3Qm94PSIwIDAgMTIwMCAxMjI3IiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxwYXRoIGQ9Ik03MTQuMTYzIDUxOS4yODRMMTE2MC44OSAwSDEwNTUuMDNMNjY3LjEzNyA0NTAuODg3TDM1Ny4zMjggMEgwTDQ2OC40OTIgNjgxLjgyMUwwIDEyMjYuMzdoMTA1Ljg2Nkw1MTUuNDkxIDc1MC4yMThMODQyLjY3MiAxMjI2LjM3SDEyMDBMNzE0LjEzNyA1MTkuMjg0SDcxNC4xNjNaTTY1OC44OCA1ODMuNTc5TDU2OS4xNjUgNjg3LjgyOEw4OTIuNDc2IDExNTAuMzAxSDEwNTUuMDhMNjU4Ljg4IDU4My41NzlaTTYxMS40MTIgNTE1LjY4NUwzMDYuNjE1IDc5LjY5NDRIMTQ0LjAxMUw1MjEuNjk3IDYxOS45MzRMNjExLjQxMiA1MTUuNjg1WiIgZmlsbD0iI2ZmZiIvPjwvc3ZnPg==");
}
.x-btn-follow-label {
  color: #fff;
}
/* Custom Facebook Button */
.fb-btn,
.fb-btn:visited {
  color: #3b5998;
  border: 1px solid #3b5998;
  padding-left: 10px;
}
.fb-btn i {
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMi44IDI0IiBjbGFzcz0iYSI+PGRlZnM+PHN0eWxlPi5he2ZpbGw6IzNCNTk5ODt9PC9zdHlsZT48L2RlZnM+PHBhdGggY2xhc3M9ImEiIGQ9Ik0zOS43NjMsNDQuMjM5VjMzLjI5MmgzLjc3NGwuNTY1LTQuMjY2SDM5Ljc2M1YyNi4zYzAtMS4yMzUuMzUyLTIuMDc3LDIuMTcxLTIuMDc3aDIuMzJWMjAuNDA3YTMxLjg4NywzMS44ODcsMCwwLDAtMy4zODEtLjE2OGMtMy4zNDUsMC01LjYzNSwxLjk4OC01LjYzNSw1LjY0djMuMTQ2SDMxLjQ1NXY0LjI2NmgzLjc4M1Y0NC4yMzlaIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMzEuNDU1IC0yMC4yMzkpIi8+PC9zdmc+");
}
.fb-btn:hover,
.fb-btn:focus {
  color: #fff;
  border: none;
  background-color: #3b5998;
}
.fb-btn:hover i,
.fb-btn:focus i {
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMi44IDI0IiBjbGFzcz0iYSI+PGRlZnM+PHN0eWxlPi5he2ZpbGw6I2ZmZjt9PC9zdHlsZT48L2RlZnM+PHBhdGggY2xhc3M9ImEiIGQ9Ik0zOS43NjMsNDQuMjM5VjMzLjI5MmgzLjc3NGwuNTY1LTQuMjY2SDM5Ljc2M1YyNi4zYzAtMS4yMzUuMzUyLTIuMDc3LDIuMTcxLTIuMDc3aDIuMzJWMjAuNDA3YTMxLjg4NywzMS44ODcsMCwwLDAtMy4zODEtLjE2OGMtMy4zNDUsMC01LjYzNSwxLjk4OC01LjYzNSw1LjY0djMuMTQ2SDMxLjQ1NXY0LjI2NmgzLjc4M1Y0NC4yMzlaIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMzEuNDU1IC0yMC4yMzkpIi8+PC9zdmc+");
}
/* Custom Pocket Button */
.pocket-btn,
.pocket-btn:visited {
  color: #ee4056;
  border: 1px solid #ee4056;
  padding-left: 10px;
}
.pocket-btn i {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20%20viewBox%3D%2275.247%20261.708%20445.529%20401.074%22%3E%3Cpath%20fill%3D%22%23EF4056%22%20d%3D%22M114.219%20261.708c-24.275%201.582-38.972%2015.44-38.972%2040.088v147.611c0%20119.893%20119.242%20214.114%20222.393%20213.37%20115.986-.837%20223.137-98.779%20223.137-213.37V301.796c0-24.741-15.626-38.693-40.088-40.088h-366.47zm93.943%20120.079L297.64%20466.8l89.571-85.013c40.088-16.835%2057.574%2028.927%2041.111%2042.321L311.685%20535.443c-3.813%203.628-24.183%203.628-27.996%200L167.051%20424.107c-15.72-14.789%204.743-61.295%2041.111-42.32z%22%2F%3E%3C%2Fsvg%3E");
}
.pocket-btn:hover,
.pocket-btn:focus {
  color: #fff;
  border: none;
  background-color: #ee4056;
}
.pocket-btn:hover i,
.pocket-btn:focus i {
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciICB2aWV3Qm94PSI3NS4yNDcgMjYxLjcwOCA0NDUuNTI5IDQwMS4wNzQiPjxwYXRoIGZpbGw9IiNmZmYiIGQ9Ik0xMTQuMjE5IDI2MS43MDhjLTI0LjI3NSAxLjU4Mi0zOC45NzIgMTUuNDQtMzguOTcyIDQwLjA4OHYxNDcuNjExYzAgMTE5Ljg5MyAxMTkuMjQyIDIxNC4xMTQgMjIyLjM5MyAyMTMuMzcgMTE1Ljk4Ni0uODM3IDIyMy4xMzctOTguNzc5IDIyMy4xMzctMjEzLjM3VjMwMS43OTZjMC0yNC43NDEtMTUuNjI2LTM4LjY5My00MC4wODgtNDAuMDg4aC0zNjYuNDd6bTkzLjk0MyAxMjAuMDc5TDI5Ny42NCA0NjYuOGw4OS41NzEtODUuMDEzYzQwLjA4OC0xNi44MzUgNTcuNTc0IDI4LjkyNyA0MS4xMTEgNDIuMzIxTDMxMS42ODUgNTM1LjQ0M2MtMy44MTMgMy42MjgtMjQuMTgzIDMuNjI4LTI3Ljk5NiAwTDE2Ny4wNTEgNDI0LjEwN2MtMTUuNzItMTQuNzg5IDQuNzQzLTYxLjI5NSA0MS4xMTEtNDIuMzJ6Ii8+PC9zdmc+");
}
/* Custom Hatebu Button */
.hatebu-btn,
.hatebu-btn:visited {
/* #1b95e0 は白背景に対してコントラスト比3.27で、11pxの文字ではAA基準(4.5)に満たない。
     同系色のまま暗くして5.65まで上げる。枠線と hover 時の背景は視認性に影響しないため元の色のまま */
  color: #0b6ba8;
  border: 1px solid #1b95e0;
  padding-left: 10px;
}
.hatebu-btn i {
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2aWV3Qm94PSIwIDAgMzU1LjAwNCAzMDAiPgogIDxkZWZzPgogICAgPHN0eWxlPgogICAgICAuZmlsbCB7ZmlsbDogIzAwQTRERTt9CiAgICA8L3N0eWxlPgogIDwvZGVmcz4KICA8Zz4KICAgIDxwYXRoIGNsYXNzPSJmaWxsIiBkPSJNMjgwLjAwOSwwaDcwdjIwMC4wMDVoLTcwVjB6Ii8+CiAgICA8cGF0aCBjbGFzcz0iZmlsbCIgZD0iTTIxNS4xOTIsMTYwLjU5NmMtMTEuODQ0LTEzLjIzOS0yOC4zMTQtMjAuNjgzLTQ5LjQ0My0yMi4yODggYzE4Ljc5NS01LjEyMiwzMi40NDMtMTIuNjE2LDQxLjA3Ny0yMi42MjhjOC41OTMtOS44OCwxMi44NTYtMjMuMjkyLDEyLjg1Ni00MC4xNzFjMC0xMy4zNjItMi45MjItMjUuMTg0LTguNTc5LTM1LjM5NyBjLTUuODA1LTEwLjE1Mi0xNC4xNC0xOC4yNzYtMjUuMTAyLTI0LjM1N2MtOS41ODYtNS4yNzQtMjAuOTgtOC45OTQtMzQuMjYyLTExLjE4OGMtMTMuMzQ5LTIuMTI2LTM2LjcwOS0zLjE5OC03MC4yMzEtMy4xOThIMCBWMjk4LjYzaDgzLjk3NmMzMy43MzcsMCw1OC4wNjQtMS4xODIsNzIuOTQtMy40NDFjMTQuODYzLTIuMzM3LDI3LjMzNC02LjI3LDM3LjQyOC0xMS42NjIgYzEyLjQ4NC02LjU4NywyMi4wMDctMTUuOTY0LDI4LjY2Mi0yOC4wMWM2LjY5OC0xMi4wODUsMTAuMDE0LTI2LjAyLDEwLjAxNC00MS45NTYgQzIzMy4wMTcsMTkxLjUxNCwyMjcuMDc5LDE3My43OTgsMjE1LjE5MiwxNjAuNTk2eiBNNzUuMjYsNjcuMjdoMTcuMzk4YzIwLjEwOCwwLDMzLjYxNywyLjI2Nyw0MC41OSw2Ljc4NyBjNi44NzcsNC41NDIsMTAuMzg4LDEyLjM4LDEwLjM4OCwyMy41NDdjMCwxMC43NDUtMy43MzMsMTguMzEzLTExLjExOCwyMi43NTFjLTcuNDgzLDQuMzU0LTIxLjExNyw2LjU2Mi00MS4wNzksNi41NjJINzUuMjYgVjY3LjI3eiBNMTQ0LjI3NiwyMzcuNzMzYy03LjkxNiw0Ljg2Mi0yMS41NTcsNy4yNTEtNDAuNjk2LDcuMjUxSDc1LjI2NXYtNjQuOTQ5aDI5LjU0YzE5LjY1NCwwLDMzLjI0MywyLjQ3NSw0MC40NjksNy40MTQgYzcuMzQzLDQuOTQyLDEwLjk1NSwxMy42NjUsMTAuOTU1LDI2LjE5MUMxNTYuMjI2LDIyNC44NSwxNTIuMjYzLDIzMi44OTksMTQ0LjI3NiwyMzcuNzMzeiIvPgogICAgPHBhdGggY2xhc3M9ImZpbGwiIGQ9Ik0zMTUuMDE0LDIyMC4wMDNjLTIyLjEwMSwwLTQwLjAwMiwxNy44OTEtNDAuMDAyLDM5Ljk5MSBjMCwyMi4xLDE3LjkwMiw0MC4wMDYsNDAuMDAyLDQwLjAwNmMyMi4wNzIsMCwzOS45OS0xNy45MDYsMzkuOTktNDAuMDA2QzM1NS4wMDQsMjM3Ljg5NCwzMzcuMDg4LDIyMC4wMDMsMzE1LjAxNCwyMjAuMDAzeiIvPgogIDwvZz4KPC9zdmc+Cg==");
}
.hatebu-btn:hover,
.hatebu-btn:focus {
  color: #fff;
  border: none;
  background-color: #1b95e0;
}
.hatebu-btn:hover i,
.hatebu-btn:focus i {
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2aWV3Qm94PSIwIDAgMzU1LjAwNCAzMDAiPg0KICA8ZGVmcz4NCiAgICA8c3R5bGU+DQogICAgICAuZmlsbCB7ZmlsbDogI2ZmZjt9DQogICAgPC9zdHlsZT4NCiAgPC9kZWZzPg0KICA8Zz4NCiAgICA8cGF0aCBjbGFzcz0iZmlsbCIgZD0iTTI4MC4wMDksMGg3MHYyMDAuMDA1aC03MFYweiIvPg0KICAgIDxwYXRoIGNsYXNzPSJmaWxsIiBkPSJNMjE1LjE5MiwxNjAuNTk2Yy0xMS44NDQtMTMuMjM5LTI4LjMxNC0yMC42ODMtNDkuNDQzLTIyLjI4OCBjMTguNzk1LTUuMTIyLDMyLjQ0My0xMi42MTYsNDEuMDc3LTIyLjYyOGM4LjU5My05Ljg4LDEyLjg1Ni0yMy4yOTIsMTIuODU2LTQwLjE3MWMwLTEzLjM2Mi0yLjkyMi0yNS4xODQtOC41NzktMzUuMzk3IGMtNS44MDUtMTAuMTUyLTE0LjE0LTE4LjI3Ni0yNS4xMDItMjQuMzU3Yy05LjU4Ni01LjI3NC0yMC45OC04Ljk5NC0zNC4yNjItMTEuMTg4Yy0xMy4zNDktMi4xMjYtMzYuNzA5LTMuMTk4LTcwLjIzMS0zLjE5OEgwIFYyOTguNjNoODMuOTc2YzMzLjczNywwLDU4LjA2NC0xLjE4Miw3Mi45NC0zLjQ0MWMxNC44NjMtMi4zMzcsMjcuMzM0LTYuMjcsMzcuNDI4LTExLjY2MiBjMTIuNDg0LTYuNTg3LDIyLjAwNy0xNS45NjQsMjguNjYyLTI4LjAxYzYuNjk4LTEyLjA4NSwxMC4wMTQtMjYuMDIsMTAuMDE0LTQxLjk1NiBDMjMzLjAxNywxOTEuNTE0LDIyNy4wNzksMTczLjc5OCwyMTUuMTkyLDE2MC41OTZ6IE03NS4yNiw2Ny4yN2gxNy4zOThjMjAuMTA4LDAsMzMuNjE3LDIuMjY3LDQwLjU5LDYuNzg3IGM2Ljg3Nyw0LjU0MiwxMC4zODgsMTIuMzgsMTAuMzg4LDIzLjU0N2MwLDEwLjc0NS0zLjczMywxOC4zMTMtMTEuMTE4LDIyLjc1MWMtNy40ODMsNC4zNTQtMjEuMTE3LDYuNTYyLTQxLjA3OSw2LjU2Mkg3NS4yNiBWNjcuMjd6IE0xNDQuMjc2LDIzNy43MzNjLTcuOTE2LDQuODYyLTIxLjU1Nyw3LjI1MS00MC42OTYsNy4yNTFINzUuMjY1di02NC45NDloMjkuNTRjMTkuNjU0LDAsMzMuMjQzLDIuNDc1LDQwLjQ2OSw3LjQxNCBjNy4zNDMsNC45NDIsMTAuOTU1LDEzLjY2NSwxMC45NTUsMjYuMTkxQzE1Ni4yMjYsMjI0Ljg1LDE1Mi4yNjMsMjMyLjg5OSwxNDQuMjc2LDIzNy43MzN6Ii8+DQogICAgPHBhdGggY2xhc3M9ImZpbGwiIGQ9Ik0zMTUuMDE0LDIyMC4wMDNjLTIyLjEwMSwwLTQwLjAwMiwxNy44OTEtNDAuMDAyLDM5Ljk5MSBjMCwyMi4xLDE3LjkwMiw0MC4wMDYsNDAuMDAyLDQwLjAwNmMyMi4wNzIsMCwzOS45OS0xNy45MDYsMzkuOTktNDAuMDA2QzM1NS4wMDQsMjM3Ljg5NCwzMzcuMDg4LDIyMC4wMDMsMzE1LjAxNCwyMjAuMDAzeiIvPg0KICA8L2c+DQo8L3N2Zz4NCg==");
}
/* Custom Feedly Button */
.feedly-btn,
.feedly-btn:visited {
  color: #2bb24c;
  border: 1px solid #2bb24c;
  padding-left: 10px;
}
.feedly-btn i {
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjUxLjYyMiAyMDUuMzg5IDQ4Ny4zODUgNDMxLjM0NiI+PHBhdGggZmlsbD0iI0ZGRiIgZD0iTTExMS42MTUgNDIwLjk0NUwyOTcuNjQgMjM0LjkybDE4Ni4wMjUgMTg2LjAyNUwyOTcuNjQgNjA2Ljk3IDExMS42MTUgNDIwLjk0NXoiLz48cGF0aCBmaWxsPSIjNkNDNjU1IiBkPSJNMjAxLjgzNyA2MjIuNzgyTDY0LjE3OSA0ODQuMTkzYy0xNi43NDItMTYuNzQyLTE2Ljc0Mi01My4wMTcgMC02OC44MjlsMTk3LjE4Ny0xOTguMTE3YzE1LjgxMi0xNS44MTIgNTEuMTU2LTE1LjgxMiA2Ni45NjkgMEw1MjYuNDUgNDE1LjM2NGMxNi43NDIgMTYuNzQyIDE2Ljc0MiA1My4wMTggMCA2OC44MjlMMzg4Ljc5MiA2MjIuNzgyYy04LjM3MSA4LjM3MS0yMS4zOTMgMTMuOTUyLTM0LjQxNSAxMy45NTJIMjM0LjM5MmMtMTIuMDkyIDAtMjQuMTg0LTUuNTgxLTMyLjU1NS0xMy45NTJ6bTEyNS41NjctNTMuOTQ3YzIuNzkxLTIuNzkgMi43OTEtOC4zNzEgMC0xMS4xNjFMMzAwLjQzIDUzMC43Yy0yLjc5LTIuNzkxLTguMzctMi43OTEtMTEuMTYxIDBsLTI2Ljk3NCAyNi45NzRjLTIuNzkgMi43OS0yLjc5IDguMzcxIDAgMTEuMTYxbDIxLjM5MyAyMC40NjNoMjIuMzIzbDIxLjM5My0yMC40NjN6bTAtMTE0LjQwNWMxLjg2LTEuODYgMS44Ni02LjUxMSAwLTguMzcxbC0yOC44MzQtMjguODM0Yy0xLjg1OS0xLjg2LTYuNTEtMS44Ni04LjM3IDBsLTgzLjcxMiA4My43MTFjLTIuNzkgMi43OTEtMi43OSA5LjMwMiAwIDEyLjA5MmwxOS41MzMgMTkuNTMzaDIyLjMyM2w3OS4wNi03OC4xMzF6bTAtMTEzLjQ3NmMxLjg2LTEuODYgMi43OTEtNy40NDEgMC05LjMwMUwyOTkuNSAzMDMuNzQ5Yy0xLjg2LTEuODYtNy40NC0xLjg2LTEwLjIzMSAwTDE0OC44MiA0NDQuMTk4Yy0xLjg1OSAxLjg2LTIuNzkgNy40NDEtLjkzIDkuMzAxbDIyLjMyMyAyMS4zOTRoMjEuMzkzbDEzNS43OTgtMTMzLjkzOXoiLz48L3N2Zz4=");
}
.feedly-btn:hover,
.feedly-btn:focus {
  color: #fff;
  border: none;
  background-color: #2bb24c;
}
.feedly-btn:hover i,
.feedly-btn:focus i {
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjUxLjYyMiAyMDUuMzg5IDQ4Ny4zODUgNDMxLjM0NiI+PHBhdGggZmlsbD0iIzZDQzY1NSIgZD0iTTExMS42MTUgNDIwLjk0NUwyOTcuNjQgMjM0LjkybDE4Ni4wMjUgMTg2LjAyNUwyOTcuNjQgNjA2Ljk3IDExMS42MTUgNDIwLjk0NXoiLz48cGF0aCBmaWxsPSIjZmZmIiBkPSJNMjAxLjgzNyA2MjIuNzgyTDY0LjE3OSA0ODQuMTkzYy0xNi43NDItMTYuNzQyLTE2Ljc0Mi01My4wMTcgMC02OC44MjlsMTk3LjE4Ny0xOTguMTE3YzE1LjgxMi0xNS44MTIgNTEuMTU2LTE1LjgxMiA2Ni45NjkgMEw1MjYuNDUgNDE1LjM2NGMxNi43NDIgMTYuNzQyIDE2Ljc0MiA1My4wMTggMCA2OC44MjlMMzg4Ljc5MiA2MjIuNzgyYy04LjM3MSA4LjM3MS0yMS4zOTMgMTMuOTUyLTM0LjQxNSAxMy45NTJIMjM0LjM5MmMtMTIuMDkyIDAtMjQuMTg0LTUuNTgxLTMyLjU1NS0xMy45NTJ6bTEyNS41NjctNTMuOTQ3YzIuNzkxLTIuNzkgMi43OTEtOC4zNzEgMC0xMS4xNjFMMzAwLjQzIDUzMC43Yy0yLjc5LTIuNzkxLTguMzctMi43OTEtMTEuMTYxIDBsLTI2Ljk3NCAyNi45NzRjLTIuNzkgMi43OS0yLjc5IDguMzcxIDAgMTEuMTYxbDIxLjM5MyAyMC40NjNoMjIuMzIzbDIxLjM5My0yMC40NjN6bTAtMTE0LjQwNWMxLjg2LTEuODYgMS44Ni02LjUxMSAwLTguMzcxbC0yOC44MzQtMjguODM0Yy0xLjg1OS0xLjg2LTYuNTEtMS44Ni04LjM3IDBsLTgzLjcxMiA4My43MTFjLTIuNzkgMi43OTEtMi43OSA5LjMwMiAwIDEyLjA5MmwxOS41MzMgMTkuNTMzaDIyLjMyM2w3OS4wNi03OC4xMzF6bTAtMTEzLjQ3NmMxLjg2LTEuODYgMi43OTEtNy40NDEgMC05LjMwMUwyOTkuNSAzMDMuNzQ5Yy0xLjg2LTEuODYtNy40NC0xLjg2LTEwLjIzMSAwTDE0OC44MiA0NDQuMTk4Yy0xLjg1OSAxLjg2LTIuNzkgNy40NDEtLjkzIDkuMzAxbDIyLjMyMyAyMS4zOTRoMjEuMzkzbDEzNS43OTgtMTMzLjkzOXoiLz48L3N2Zz4=");
}
.scroll {
  overflow-x: auto;
}
table {
  table-layout: auto;
  border-collapse: collapse;
  border-left-width: 1px;
  border-left-style: solid;
  border-left-color: #d9d9d9;
  margin-top: 0em;
  margin-right: 2px;
  margin-bottom: 2em;
  margin-left: 2px;
  background-color: #fff;
}
.thead td,
th {
  font-weight: 900;
  background-color: #fff;
  border-top: solid 1px #ccc;
  border-right: solid 1px #ccc;
  padding: 8px 10px;
}
tr {
  display: table-row;
  border-bottom: solid 1px #ccc;
  border-right: solid 1px #ccc;
  padding: 8px 10px;
  padding-top: 8px;
}
td {
  border-bottom: solid 1px #ccc;
  border-right: solid 1px #ccc;
  padding: 8px 10px;
  padding-top: 8px;
}
tbody tr:nth-child(odd) {
  background-color: rgba(0,0,0,0.05);
}
.highlight .pre {
  margin-bottom: 50px;
}
.highlight table {
  table-layout: auto;
  width: 100%;
  border-collapse: collapse;
  border: none;
}
.highlight tr {
  border: none;
}
.highlight .gutter .line {
  font-size: 12px;
  color: #d3d3d3;
}
.article-entry .highlight {
  border-radius: 5px;
  tab-size: 2em;
  margin-bottom: 0.5rem;
}
.highlight ::selection {
  background-color: #808080;
}
/* リンクの折り返し */
article a {
  word-wrap: break-word;
  word-break: break-all;
}
.blog-sidebar a {
  color: #424242;
}
/* ワンライナーの折り返し */
code {
  word-wrap: break-word;
  width: 100%;
}
.archives-wrap {
  margin-top: 30px;
}
/* トップページのリンク */
.archive-post-item a {
  color: #424242;
}
.archive-post-item a:hover,
.archive-post-item a:active,
.archive-post-item a:focus {
  color: #757575;
  text-decoration: none;
}
.archive-post-title {
  font-size: 20px;
  font-weight: bold;
}
.article-title {
  color: #424242;
  font-weight: 700;
/* 以前は Bootstrap のリセットCSSが h2 にサイズを与えていた（>=1200px で 2rem）。
     CDN 読み込みをやめた際にサブセットへ取り込めておらず、タイトルだけが
     ブラウザ既定の 1.5em まで縮んでいたため、当時の値を明示して復元する */
  font-size: calc(1.325rem + 0.9vw);
}
@media (max-width: 1024px) {
  .article-title {
    font-size: 24px;
  }
}
@media (min-width: 1200px) {
  .article-title {
    font-size: 2rem;
  }
}
/* トップページのソーシャルボタン */
.archive-social-button {
  margin-left: 0px;
}
/* 本文の箇条書きのインデントを低く。スマホ対応 */
.article-entry ul {
  padding-inline-start: 20px;
}
.article-entry ol {
  padding-inline-start: 20px;
}
.inline-code-color {
  border-radius: 3px;
  border: 1px solid #ddd;
  display: inline-block;
  height: 0.8em;
  margin-left: 4px;
  vertical-align: middle;
  width: 0.8em;
}
/* インラインコードのフォントカラーを赤→黒に */
.article-entry code {
  color: #424242;
}
.article-entry a code {
  color: #0d6efd;
}
.article-entry a:visited code {
  color: #590fc7;
}
.nav {
  display: block;
}
.nav li a {
  padding: 6px 4px;
  display: block;
  text-decoration: none;
}
.nav a:hover,
.nav a:focus {
  background-color: #efefef;
}
.nav-flex {
  display: flex;
  flex-wrap: wrap;
  padding: 6px 4px;
  margin-bottom: 0;
  list-style: none;
}
.nav-flex li a {
  padding: 6px 10px;
  display: block;
  text-decoration: none;
}
.nav-flex a:hover,
.nav-flex a:focus {
  background-color: #efefef;
}
/* タブレットで発生する右側の余白を削除 */
.wrap {
  overflow: hidden;
}
.blog-info ul {
  padding-inline-start: 10px;
}
.blog-info-item a {
  padding: 2px 16px 2px 16px;
}
.blog-info-item:first-child > a {
  padding-left: 0px;
}
.publish-date {
  color: #616161;
  font-weight: bold;
}
/* Tag */
.blog-tags ul {
  padding: 0;
}
.blog-tags li {
  display: inline-block;
}
.tag-list-link {
  color: #616161;
  position: relative;
  margin: 4px 6px 7px 4px;
  display: inline-block;
  box-sizing: border-box;
  padding: 2px 8px 1px 8px;
  background-color: #f5f5f3;
  border-radius: 14px;
  font-weight: bold;
  font-size: 12px;
  color: #616161;
  line-height: 1.4;
}
.tag-list-link:hover,
.tag-list-link:focus {
  background: var(--main-font-color);
  color: #fff;
  text-decoration: none;
}
.tag-list-text {
  color: #616161;
  position: relative;
  margin: 4px 6px 7px 4px;
  display: inline-block;
  box-sizing: border-box;
  padding: 2px 8px 1px 8px;
  background-color: #f5f5f3;
  border-radius: 14px;
  font-size: 12px;
  color: #616161;
  line-height: 1.4;
}
.blog-tags li a span {
  font-size: 0.5em;
  margin-left: 5px;
}
.article-category-link {
  display: inline-block;
  padding: 0.125rem 1rem;
  font-weight: 400;
  font-size: calc(1rem * 10 / 12);
  line-height: calc(1em * 60 / 40);
  color: #fff;
  background-color: #096fc8;
  border-radius: 12px;
  margin-bottom: 12px;
}
.article-category-link:hover,
.article-category-link:focus {
  color: #fff;
  text-decoration: none;
  opacity: 0.6;
  transition-duration: 0.3s;
}
.sidebar-categories li a {
  padding: 10px 0;
  border-bottom: 1px solid #ecebeb;
  color: #424242;
}
/* Blog Item */
.blog-item .blog-item-img {
  margin: 6px 0 25px;
}
.blog-item blockquote {
  padding: 6px 10px;
  border-left: 4px solid #adb5bd;
}
.blog-item .blog-info {
  margin: 20px 0;
  padding: 8px 0;
}
.blog-info-item {
  padding-left: 8px;
}
.blog-info-item:first-child {
  padding-left: 0;
  border-left: none;
}
.blog-info-item ul li:first-child {
  padding-left: 4px;
}
.blog-info-item ul li {
  margin-right: 10px;
}
#footnotelist li {
  padding-top: 0.2em;
}
.toc-section {
  padding: 50px 0px 0px 0px;
}
.toc-section ol,
.toc-section li {
  list-style-type: none;
  padding-left: 0px;
}
.toc-section li > ol {
  list-style-type: none;
  margin: 4px 0;
  padding: 0 0 0 0.8em;
}
.toc-section a {
  list-style-type: none;
  margin: 4px 0;
  display: block;
  color: #424242;
  text-decoration: none;
  line-height: 1.5;
}
.toc-section a:hover,
.toc-section a:focus {
  background-color: #efefef;
}
@media screen and (max-width: 768px) {
  .toc-section {
    display: none;
  }
}
.article-list {
  padding-inline-start: 0px;
}
.article-list li {
  list-style: none;
  margin-bottom: 8px;
  padding: 0 0 0 1.2em;
}
.article-list .date {
  padding-right: 10px;
  color: #999;
  font-weight: bold;
}
.article-list .count {
  padding-right: 5px;
  color: #999;
  font-weight: bold;
  display: inline-block;
  min-width: 40px;
}
.article-list .title {
  text-decoration: none;
  color: #1a75ff;
  font-size: 1.1em;
}
/*Archive*/
.archive-list {
  display: flex;
  flex-wrap: wrap;
  padding-left: 0;
  list-style: none;
  margin: 10px 0px 30px 0px;
}
.archive-list-item {
  width: 100px;
  padding: 8px 0;
}
.archive-list-item a {
  margin-left: 8px;
  color: #424242;
  text-decoration: none;
}
.archive-list-item a:hover,
.archive-list-item a:focus {
  margin-left: 8px;
  color: #424242;
  background-color: #eee;
  border-color: #ddd;
  z-index: 3;
}
.archive-list-count {
  padding-left: 6px;
}
.archive-list-count:before {
  content: "(";
}
.archive-list-count:after {
  content: ")";
}
.archive-list-current {
  background: linear-gradient(transparent 60%, #ff6 60%);
  font-weight: bold;
}
.post-author {
  color: #616161;
  font-weight: bold;
  padding-right: 10px;
}
.author-list {
  padding-inline-start: 0px;
  display: flex;
  flex-wrap: wrap;
  max-width: auto;
  padding: 0 0 25px 0;
}
.author-list li {
  list-style: none;
  margin-bottom: 8px;
  width: 160px;
  min-width: 160px;
}
.author-list .author-list-count {
  padding: 0 5px 0 5px;
}
/* /categoeis */
@media screen and (max-width: 768px) {
  .category {
    display: none;
  }
}
.category-list {
  font-size: 1.2em;
  list-style: none;
  padding: 0 5px 5px 5px;
}
.category-list-item {
  padding: 0 5px 5px 5px;
}
.category-list-link {
  padding: 0 6px 0 0;
}
.category-list-current a {
  background: linear-gradient(transparent 60%, #ff6 60%);
  font-weight: bold;
}
/* 人気のタグ */
.popular-articles {
  margin-top: 40px;
}
.popular-tag {
  list-style: none;
  padding-inline-start: 10px;
  display: flex;
  flex-wrap: wrap;
  font-size: 1em;
}
.popular-tag li {
  list-style: none;
  margin-bottom: 8px;
  padding: 0 5px 5px 5px;
}
.popular-tag .pupular-tag-count {
  font-size: 0.5em;
}
.tag-cloud {
  margin: 0 0 40px 15px;
}
.tag-cloud a {
  margin: 0 0 5px 5px;
}
.related-post-link li {
  border-bottom: 1px solid #ecebeb;
}
.related-post-link li:last-child {
  border-bottom: none;
}
/* 一覧ページ */
.list-page {
  font-weight: bold;
}
.summary {
  font-weight: bold;
  font-size: 1.2em;
  list-style: none;
  padding-inline-start: 0px;
  display: flex;
  flex-wrap: wrap;
  padding: 0 0 4px 0;
}
.summary li {
  list-style: none;
  margin-bottom: 8px;
  padding-inline-start: 0px;
  padding: 0 5px 0px 25px;
}
.summary li:first-child {
  padding: 0 5px 0px 0px;
}
.summary-count {
  font-size: 1.6em;
  font-weight: bold;
}
.summary-label {
  font-size: 1em;
  font-weight: lighter;
}
.bottom-content-header {
  font-weight: bold;
}
/*タブのスタイル*/
.tab_item {
  width: calc(100% / 5);
  line-height: 50px;
  font-size: 1.6em;
  float: left;
  transition: all 0.1s ease;
}
.tab_item:hover,
.tab_item:focus {
  background-color: #efefef;
  cursor: pointer;
  color: #424242;
}
/*ラジオボタンを全て消す*/
input[name="tab_item"] {
  display: none;
}
/*タブ切り替えの中身のスタイル*/
.tab_content {
  display: none;
  clear: both;
  overflow: hidden;
}
/*選択されているタブのコンテンツのみを表示*/
#weekly:checked ~ #popular_weekly,
#monthly:checked ~ #popular_monthly,
#yearly:checked ~ #popular_yearly,
#sns:checked ~ #popular_sns {
  display: block;
}
/*選択されているタブのスタイルを変える*/
.tabs input:checked + .tab_item {
  border-bottom: 2px solid #424242;
  background: none;
  color: #424242;
}
.tabs label {
  font-weight: 700;
  display: inline-block;
  max-width: 100%;
  margin-bottom: 5px;
  padding: 2px 8px 1px 8px;
  color: #ecebeb;
  border-radius: 10px;
  font-weight: bold;
  line-height: 1.4;
}
.github-edit-icon {
  display: inline-block;
  width: 24px;
  height: 24px;
  margin-right: 1em;
  background-size: contain;
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMjRweCIgdmlld0JveD0iMCAwIDI0IDI0IiB3aWR0aD0iMjRweCIgZmlsbD0iIzVmNmQ3YiI+PHBhdGggZD0iTTAgMGgyNHYyNEgwVjB6IiBmaWxsPSJub25lIi8+PHBhdGggZD0iTTE0LjA2IDkuMDJsLjkyLjkyTDUuOTIgMTlINXYtLjkybDkuMDYtOS4wNk0xNy42NiAzYy0uMjUgMC0uNTEuMS0uNy4yOWwtMS44MyAxLjgzIDMuNzUgMy43NSAxLjgzLTEuODNjLjM5LS4zOS4zOS0xLjAyIDAtMS40MWwtMi4zNC0yLjM0Yy0uMi0uMi0uNDUtLjI5LS43MS0uMjl6bS0zLjYgMy4xOUwzIDE3LjI1VjIxaDMuNzVMMTcuODEgOS45NGwtMy43NS0zLjc1eiIvPjwvc3ZnPg==");
}
.techcast li {
  border-bottom: 1px solid #ecebeb;
}
.newitem {
  color: #fff;
  padding: 2px 4px 1px 4px;
  display: inline-block;
  box-sizing: border-box;
  background-color: #424242;
  border-radius: 14px;
  font-weight: bold;
  font-size: 11px;
  line-height: 1.4;
}
.search-wrapper {
  margin: 45px auto 50px auto;
}
.search-wrapper input {
  width: 80%;
  height: 40px;
  padding: 10px 15px;
  font: normal 16px 'Arial', 'Tahoma';
  border: 1px solid #ccc;
  border-radius: 8px 0 0 8px;
}
.search-wrapper button {
  width: 20%;
  height: 40px;
  float: right;
  border: 0;
  cursor: pointer;
  font: bold 18px 'Arial', 'Tahoma';
  background: #c1c1c1;
  border-radius: 0 8px 8px 0;
}
.search-wrapper button:hover,
.search-wrapper button:active,
.search-wrapper button:focus {
  background: #1b95e0;
  transition: all 0.1s linear;
  border: 0;
}
.blog-news {
  padding-top: 20px;
}
.blog-news h2 {
  font-weight: bold;
}
.news {
  padding-left: 0;
  margin-bottom: 0;
  list-style: none;
}
.news-category {
  padding-left: 0.5em;
  color: #e84a85;
}
.news-title {
  padding-left: 0.5em;
}
.reference-lede {
  padding: 1em 0 0 0.6em;
  font-weight: bold;
}
.reference-posts-item {
  list-style: none;
  padding: 0 0 0 0;
}
.reference-posts-item a {
  color: #424242;
}
.reference-post-link {
  padding: 0.4em 0 0 0.6em;
}
.list-sub-text {
  font-size: 18px;
  margin-left: 4px;
}
.author-profile {
  padding: 0 0 20px 0;
}
.author-profile a {
  margin: 0 8px;
}
.author-icon {
  width: 18px;
  height: 18px;
}
/* パンくずリスト直下のページング情報（2ページ以降） */
.pagination-info {
  margin-top: 20px;
  color: #5f6d7b;
}
/* Mermaidの背景をテーマのスタイルから独立させる */
pre.mermaid {
  background-color: transparent !important;
  border: none !important;
  padding: 0 !important;
  line-height: 1; /* SVGの上下にできる余分な空白を消す */
  font-size: inherit; /* コードブロック用の文字サイズを図に持ち込まない */
}
/* .article-entry p 等のスタイルがMermaid SVG内の foreignObject に波及するのを防ぐ */
.article-entry pre.mermaid p,
.article-entry pre.mermaid span,
.article-entry pre.mermaid li {
  color: inherit !important;
  font-size: inherit !important;
  line-height: inherit !important;
  text-align: inherit !important;
  margin: 0;
}
/* /articles/20260602a/ で崩れたため */
.article-entry pre.mermaid .edgeLabel {
  color: #424242;
}
/* ::: note tip 対応 */
.tip {
  background: rgba(142,150,170,0.141);
  padding: 16px;
  margin: 24px 12px;
  border-radius: 8px;
}
/* ::: note info 対応 */
.info {
  background: #e5f8e2;
  padding: 16px;
  margin: 24px 12px;
  border-radius: 8px;
}
/* ::: note warn 対応 */
.warn {
  background: #fdf9e2;
  padding: 16px;
  margin: 24px 12px;
  border-radius: 8px;
}
/* ::: note alert 対応 */
.alert {
  background: #ffdbdb;
  padding: 16px;
  margin: 24px 12px;
  border-radius: 8px;
}
.note-container {
  display: flex;
  align-items: flex-start; /* アイコンとテキストを上揃えにする */
  padding: 1rem 1.5rem 0.2rem 1rem;
  margin: 1rem 0;
  border-radius: 5px;
}
/* 本文側のフレックスアイテム。
   min-width の初期値 auto のままだと、内部のコードブロックの最小内容幅より狭くなれず、
   狭い画面でコンテナごと画面外にはみ出してしまう。
   0 を明示すると幅を画面に合わせられ、コードブロックは .highlight の
   overflow: auto でコンテナ内を横スクロールする */
.note-container > div {
  flex: 1;
  min-width: 0;
}
.info > .fa-check-circle {
  display: inline-block;
  width: 18px;
  height: 18px;
  margin-right: 0.8em;
  flex-shrink: 0;
  background-size: contain;
  background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pg0KPCEtLSBVcGxvYWRlZCB0bzogU1ZHIFJlcG8sIHd3dy5zdmdyZXBvLmNvbSwgR2VuZXJhdG9yOiBTVkcgUmVwbyBNaXhlciBUb29scyAtLT4NCjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+DQo8c3ZnIGZpbGw9IiM1NWM1MDAiIHZlcnNpb249IjEuMSIgaWQ9IkNhcGFfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgDQoJIHdpZHRoPSI4MDBweCIgaGVpZ2h0PSI4MDBweCIgdmlld0JveD0iMCAwIDMwNS4wMDIgMzA1LjAwMiINCgkgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+DQo8Zz4NCgk8Zz4NCgkJPHBhdGggZD0iTTE1Mi41MDIsMC4wMDFDNjguNDEyLDAuMDAxLDAsNjguNDEyLDAsMTUyLjUwMXM2OC40MTIsMTUyLjUsMTUyLjUwMiwxNTIuNWM4NC4wODksMCwxNTIuNS02OC40MTEsMTUyLjUtMTUyLjUNCgkJCVMyMzYuNTkxLDAuMDAxLDE1Mi41MDIsMC4wMDF6IE0xNTIuNTAyLDI4MC4wMDFDODIuMTk3LDI4MC4wMDEsMjUsMjIyLjgwNiwyNSwxNTIuNTAxYzAtNzAuMzA0LDU3LjE5Ny0xMjcuNSwxMjcuNTAyLTEyNy41DQoJCQljNzAuMzA0LDAsMTI3LjUsNTcuMTk2LDEyNy41LDEyNy41QzI4MC4wMDIsMjIyLjgwNiwyMjIuODA2LDI4MC4wMDEsMTUyLjUwMiwyODAuMDAxeiIvPg0KCQk8cGF0aCBkPSJNMjE4LjQ3Myw5My45N2wtOTAuNTQ2LDkwLjU0N2wtNDEuMzk4LTQxLjM5OGMtNC44ODItNC44ODEtMTIuNzk2LTQuODgxLTE3LjY3OCwwYy00Ljg4MSw0Ljg4Mi00Ljg4MSwxMi43OTYsMCwxNy42NzgNCgkJCWw1MC4yMzcsNTAuMjM3YzIuNDQxLDIuNDQsNS42NCwzLjY2MSw4LjgzOSwzLjY2MWMzLjE5OSwwLDYuMzk4LTEuMjIxLDguODM5LTMuNjYxbDk5LjM4NS05OS4zODUNCgkJCWM0Ljg4MS00Ljg4Miw0Ljg4MS0xMi43OTYsMC0xNy42NzhDMjMxLjI2OSw4OS4wODksMjIzLjM1NCw4OS4wODksMjE4LjQ3Myw5My45N3oiLz4NCgk8L2c+DQo8L2c+DQo8L3N2Zz4=");
  background-repeat: no-repeat;
  background-position: center;
  transform: translateY(4px); /* テキストラインに合わせるため下に移動させる */
}
.warn > .fa-check-circle {
  display: inline-block;
  width: 18px;
  height: 18px;
  margin-right: 0.8em;
  flex-shrink: 0;
  background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjwhLS0gQ3JlYXRlZCB3aXRoIElua3NjYXBlIChodHRwOi8vd3d3Lmlua3NjYXBlLm9yZy8pIC0tPgoKPHN2ZwogICB4bWxuczpkYz0iaHR0cDovL3B1cmwub3JnL2RjL2VsZW1lbnRzLzEuMS8iCiAgIHhtbG5zOmNjPSJodHRwOi8vY3JlYXRpdmVjb21tb25zLm9yZy9ucyMiCiAgIHhtbG5zOnJkZj0iaHR0cDovL3d3dy53My5vcmcvMTk5OS8wMi8yMi1yZGYtc3ludGF4LW5zIyIKICAgeG1sbnM6c3ZnPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKICAgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIgogICB4bWxuczpzb2RpcG9kaT0iaHR0cDovL3NvZGlwb2RpLnNvdXJjZWZvcmdlLm5ldC9EVEQvc29kaXBvZGktMC5kdGQiCiAgIHhtbG5zOmlua3NjYXBlPSJodHRwOi8vd3d3Lmlua3NjYXBlLm9yZy9uYW1lc3BhY2VzL2lua3NjYXBlIgogICB3aWR0aD0iNDUxLjQyOTAyIgogICBoZWlnaHQ9IjQ1MS40MjkwMiIKICAgaWQ9InN2ZzIiCiAgIHZlcnNpb249IjEuMSIKICAgaW5rc2NhcGU6dmVyc2lvbj0iMC45Mi4zICgyNDA1NTQ2LCAyMDE4LTAzLTExKSIKICAgc29kaXBvZGk6ZG9jbmFtZT0iRXhjbGFtYXRpb24gcG9pbnQgeWVsbG93LnN2ZyI+CiAgPGRlZnMKICAgICBpZD0iZGVmczQiIC8+CiAgPHNvZGlwb2RpOm5hbWVkdmlldwogICAgIGlkPSJiYXNlIgogICAgIHBhZ2Vjb2xvcj0iI2ZmZmZmZiIKICAgICBib3JkZXJjb2xvcj0iIzY2NjY2NiIKICAgICBib3JkZXJvcGFjaXR5PSIxLjAiCiAgICAgaW5rc2NhcGU6cGFnZW9wYWNpdHk9IjAuMCIKICAgICBpbmtzY2FwZTpwYWdlc2hhZG93PSIyIgogICAgIGlua3NjYXBlOnpvb209IjAuOTkzMDgwNzIiCiAgICAgaW5rc2NhcGU6Y3g9Ii0xODQuNzkzMzQiCiAgICAgaW5rc2NhcGU6Y3k9IjM4Ni4yODI5NiIKICAgICBpbmtzY2FwZTpkb2N1bWVudC11bml0cz0icHgiCiAgICAgaW5rc2NhcGU6Y3VycmVudC1sYXllcj0ibGF5ZXIxIgogICAgIHNob3dncmlkPSJmYWxzZSIKICAgICBpbmtzY2FwZTpzbmFwLW9iamVjdC1taWRwb2ludHM9InRydWUiCiAgICAgaW5rc2NhcGU6c25hcC1jZW50ZXI9InRydWUiCiAgICAgaW5rc2NhcGU6b2JqZWN0LXBhdGhzPSJ0cnVlIgogICAgIGlua3NjYXBlOm9iamVjdC1ub2Rlcz0idHJ1ZSIKICAgICBpbmtzY2FwZTpzbmFwLWdsb2JhbD0idHJ1ZSIKICAgICBpbmtzY2FwZTpzbmFwLXNtb290aC1ub2Rlcz0iZmFsc2UiCiAgICAgaW5rc2NhcGU6c25hcC1pbnRlcnNlY3Rpb24tcGF0aHM9InRydWUiCiAgICAgc2hvd2d1aWRlcz0idHJ1ZSIKICAgICBpbmtzY2FwZTpndWlkZS1iYm94PSJ0cnVlIgogICAgIGZpdC1tYXJnaW4tdG9wPSIwIgogICAgIGZpdC1tYXJnaW4tbGVmdD0iMCIKICAgICBmaXQtbWFyZ2luLXJpZ2h0PSIwIgogICAgIGZpdC1tYXJnaW4tYm90dG9tPSIwIgogICAgIGlua3NjYXBlOndpbmRvdy13aWR0aD0iMTkyMCIKICAgICBpbmtzY2FwZTp3aW5kb3ctaGVpZ2h0PSIxMDEzIgogICAgIGlua3NjYXBlOndpbmRvdy14PSItOSIKICAgICBpbmtzY2FwZTp3aW5kb3cteT0iLTkiCiAgICAgaW5rc2NhcGU6d2luZG93LW1heGltaXplZD0iMSIKICAgICBpbmtzY2FwZTpzbmFwLXBhZ2U9InRydWUiIC8+CiAgPG1ldGFkYXRhCiAgICAgaWQ9Im1ldGFkYXRhNyI+CiAgICA8cmRmOlJERj4KICAgICAgPGNjOldvcmsKICAgICAgICAgcmRmOmFib3V0PSIiPgogICAgICAgIDxkYzpmb3JtYXQ+aW1hZ2Uvc3ZnK3htbDwvZGM6Zm9ybWF0PgogICAgICAgIDxkYzp0eXBlCiAgICAgICAgICAgcmRmOnJlc291cmNlPSJodHRwOi8vcHVybC5vcmcvZGMvZGNtaXR5cGUvU3RpbGxJbWFnZSIgLz4KICAgICAgICA8ZGM6dGl0bGU+PC9kYzp0aXRsZT4KICAgICAgPC9jYzpXb3JrPgogICAgPC9yZGY6UkRGPgogIDwvbWV0YWRhdGE+CiAgPGcKICAgICBpbmtzY2FwZTpsYWJlbD0iQ2FscXVlIDEiCiAgICAgaW5rc2NhcGU6Z3JvdXBtb2RlPSJsYXllciIKICAgICBpZD0ibGF5ZXIxIgogICAgIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yODg3LjU5MTYsLTE5Mi4zNjE1MSkiPgogICAgPGcKICAgICAgIHRyYW5zZm9ybT0ibWF0cml4KDEuMzU4MDQyOCwwLDAsMS4zNTgwNDI4LDIwNjUuMDc4LDQ0LjkyODMwMikiCiAgICAgICBpZD0ibGF5ZXIxLTYiCiAgICAgICBpbmtzY2FwZTpsYWJlbD0iQ2FscXVlIDEiIC8+CiAgICA8cGF0aAogICAgICAgdHJhbnNmb3JtPSJtYXRyaXgoMS4xNzAzNzE1LDAsMCwxLjE3MDM3MTUsMTc3Mi4zOTQ4LC0xODkuOTM3OSkiCiAgICAgICBkPSJNIDEzMzguNTcxNCw1MTkuNTA1MDcgQSAxOTIuODU3MTUsMTkyLjg1NzE1IDAgMCAxIDExNDUuNzE0Miw3MTIuMzYyMjEgMTkyLjg1NzE1LDE5Mi44NTcxNSAwIDAgMSA5NTIuODU3MDksNTE5LjUwNTA3IDE5Mi44NTcxNSwxOTIuODU3MTUgMCAwIDEgMTE0NS43MTQyLDMyNi42NDc5MiAxOTIuODU3MTUsMTkyLjg1NzE1IDAgMCAxIDEzMzguNTcxNCw1MTkuNTA1MDcgWiIKICAgICAgIHNvZGlwb2RpOnJ5PSIxOTIuODU3MTUiCiAgICAgICBzb2RpcG9kaTpyeD0iMTkyLjg1NzE1IgogICAgICAgc29kaXBvZGk6Y3k9IjUxOS41MDUwNyIKICAgICAgIHNvZGlwb2RpOmN4PSIxMTQ1LjcxNDIiCiAgICAgICBpZD0icGF0aDM4NjYiCiAgICAgICBzdHlsZT0iZmlsbDojZmZjYzMzO2ZpbGwtb3BhY2l0eToxO2ZpbGwtcnVsZTpub256ZXJvO3N0cm9rZTpub25lIgogICAgICAgc29kaXBvZGk6dHlwZT0iYXJjIiAvPgogICAgPGcKICAgICAgIHRyYW5zZm9ybT0ibWF0cml4KC0zLjE0MzU1MjksMCwwLC0zLjE0MzU1MjksMTA5MjYuMTYxLC0xMzguNDkxNjIpIgogICAgICAgc3R5bGU9ImZvbnQtc3R5bGU6bm9ybWFsO2ZvbnQtdmFyaWFudDpub3JtYWw7Zm9udC13ZWlnaHQ6Ym9sZDtmb250LXN0cmV0Y2g6bm9ybWFsO2ZvbnQtc2l6ZToxNDRweDtsaW5lLWhlaWdodDoxMjUlO2ZvbnQtZmFtaWx5OidDb2xsZWdlIFNsYWInOy1pbmtzY2FwZS1mb250LXNwZWNpZmljYXRpb246J0NvbGxlZ2UgU2xhYiBCb2xkJztsZXR0ZXItc3BhY2luZzowcHg7d29yZC1zcGFjaW5nOjBweDtmaWxsOiNmZmZmZmY7ZmlsbC1vcGFjaXR5OjE7c3Ryb2tlOm5vbmUiCiAgICAgICBpZD0idGV4dDM4OTAiPgogICAgICA8cGF0aAogICAgICAgICBzdHlsZT0iZm9udC1mYW1pbHk6TGF0bzstaW5rc2NhcGUtZm9udC1zcGVjaWZpY2F0aW9uOidMYXRvIEJvbGQnO2ZpbGw6I2ZmZmZmZiIKICAgICAgICAgZD0ibSAyNDk0LjI4NjMsLTE5Ny41OTA3OSB2IDczLjg3MiBoIC0xNy44NTYgdiAtNzMuODcyIGggMTcuODU2IgogICAgICAgICBpZD0icGF0aDMwODkiCiAgICAgICAgIGlua3NjYXBlOmNvbm5lY3Rvci1jdXJ2YXR1cmU9IjAiIC8+CiAgICAgIDxjaXJjbGUKICAgICAgICAgc3R5bGU9ImZpbGw6I2ZmZmZmZjtmaWxsLW9wYWNpdHk6MTtmaWxsLXJ1bGU6bm9uemVybztzdHJva2U6bm9uZSIKICAgICAgICAgaWQ9InBhdGgzMDg1IgogICAgICAgICB0cmFuc2Zvcm09Im1hdHJpeCgwLjMxODExMTQsMCwwLDAuMzE4MTExNCwyNDQwLjkwNjUsLTI1MS40NDcxOSkiCiAgICAgICAgIGN4PSIxMzkuNzM2NTkiCiAgICAgICAgIGN5PSIxMDEuMjg2NTIiCiAgICAgICAgIHI9IjM1LjA2NzY1NCIgLz4KICAgIDwvZz4KICA8L2c+Cjwvc3ZnPgo=");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  transform: translateY(4px); /* テキストラインに合わせるため下に移動させる */
}
.alert > .fa-check-circle {
  display: inline-block;
  width: 18px;
  height: 18px;
  margin-right: 0.8em;
  flex-shrink: 0;
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2ZXJzaW9uPSIxLjEiIHdpZHRoPSIyNTYiIGhlaWdodD0iMjU2IiB2aWV3Qm94PSIwIDAgMjU2IDI1NiIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI+Cgo8ZGVmcz4KPC9kZWZzPgo8ZyBzdHlsZT0ic3Ryb2tlOiBub25lOyBzdHJva2Utd2lkdGg6IDA7IHN0cm9rZS1kYXNoYXJyYXk6IG5vbmU7IHN0cm9rZS1saW5lY2FwOiBidXR0OyBzdHJva2UtbGluZWpvaW46IG1pdGVyOyBzdHJva2UtbWl0ZXJsaW1pdDogMTA7IGZpbGw6IG5vbmU7IGZpbGwtcnVsZTogbm9uemVybzsgb3BhY2l0eTogMTsiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDEuNDA2NTkzNDA2NTkzNDAxNiAxLjQwNjU5MzQwNjU5MzQwMTYpIHNjYWxlKDIuODEgMi44MSkiID4KCTxwYXRoIGQ9Ik0gNDUgOTAgQyAyMC4xODcgOTAgMCA2OS44MTMgMCA0NSBDIDAgMjAuMTg3IDIwLjE4NyAwIDQ1IDAgYyAyNC44MTMgMCA0NSAyMC4xODcgNDUgNDUgQyA5MCA2OS44MTMgNjkuODEzIDkwIDQ1IDkwIHoiIHN0eWxlPSJzdHJva2U6IG5vbmU7IHN0cm9rZS13aWR0aDogMTsgc3Ryb2tlLWRhc2hhcnJheTogbm9uZTsgc3Ryb2tlLWxpbmVjYXA6IGJ1dHQ7IHN0cm9rZS1saW5lam9pbjogbWl0ZXI7IHN0cm9rZS1taXRlcmxpbWl0OiAxMDsgZmlsbDogcmdiKDI0NCw2Nyw1NCk7IGZpbGwtcnVsZTogbm9uemVybzsgb3BhY2l0eTogMTsiIHRyYW5zZm9ybT0iIG1hdHJpeCgxIDAgMCAxIDAgMCkgIiBzdHJva2UtbGluZWNhcD0icm91bmQiIC8+Cgk8cGF0aCBkPSJNIDQ1IDYwLjQ3MyBjIC0yLjQ5MyAwIC00LjUxNSAtMi4wMjIgLTQuNTE1IC00LjUxNSB2IC0zNi40NCBjIDAgLTIuNDkzIDIuMDIyIC00LjUxNSA0LjUxNSAtNC41MTUgcyA0LjUxNSAyLjAyMiA0LjUxNSA0LjUxNSB2IDM2LjQ0IEMgNDkuNTE1IDU4LjQ1MSA0Ny40OTMgNjAuNDczIDQ1IDYwLjQ3MyB6IiBzdHlsZT0ic3Ryb2tlOiBub25lOyBzdHJva2Utd2lkdGg6IDE7IHN0cm9rZS1kYXNoYXJyYXk6IG5vbmU7IHN0cm9rZS1saW5lY2FwOiBidXR0OyBzdHJva2UtbGluZWpvaW46IG1pdGVyOyBzdHJva2UtbWl0ZXJsaW1pdDogMTA7IGZpbGw6IHJnYigyNTUsMjU1LDI1NSk7IGZpbGwtcnVsZTogbm9uemVybzsgb3BhY2l0eTogMTsiIHRyYW5zZm9ybT0iIG1hdHJpeCgxIDAgMCAxIDAgMCkgIiBzdHJva2UtbGluZWNhcD0icm91bmQiIC8+Cgk8cGF0aCBkPSJNIDQ1IDc1LjAwMyBjIC0xLjE4NiAwIC0yLjM0OCAtMC40ODYgLTMuMTk1IC0xLjMzMyBjIC0wLjIwMyAtMC4yMDMgLTAuMzk1IC0wLjQ0IC0wLjU2NCAtMC42NzcgYyAtMC4xNTggLTAuMjQ4IC0wLjI5NCAtMC41MDggLTAuNDA2IC0wLjc5IGMgLTAuMTEzIC0wLjI3MSAtMC4yMDMgLTAuNTUzIC0wLjI2IC0wLjgzNiBjIC0wLjA1NiAtMC4yOTMgLTAuMDkgLTAuNTg2IC0wLjA5IC0wLjg4IGMgMCAtMS4xOTcgMC40ODUgLTIuMzU5IDEuMzIxIC0zLjE5NSBjIDAuMjE0IC0wLjIxNSAwLjQ0IC0wLjQwNyAwLjY4OCAtMC41NjQgYyAwLjI0OSAtMC4xNyAwLjUwOCAtMC4zMDUgMC43NzkgLTAuNDE4IGMgMC4yNzEgLTAuMTEyIDAuNTUzIC0wLjIwMyAwLjg0NyAtMC4yNiBjIDAuNTc2IC0wLjExMiAxLjE4NiAtMC4xMTIgMS43NjEgMCBjIDAuMjk0IDAuMDU3IDAuNTc2IDAuMTQ4IDAuODQ3IDAuMjYgYyAwLjI3IDAuMTEyIDAuNTMgMC4yNDggMC43NzggMC40MTggYyAwLjI0OCAwLjE1OCAwLjQ3NCAwLjM0OSAwLjY4OSAwLjU2NCBjIDAuODM0IDAuODM2IDEuMzIxIDEuOTk3IDEuMzIxIDMuMTk1IGMgMCAxLjE4NSAtMC40ODYgMi4zNDggLTEuMzIxIDMuMTgyIGMgLTAuMjE1IDAuMjE1IC0wLjQ0MSAwLjQwNyAtMC42ODkgMC41NjQgYyAtMC4yNDggMC4xNTkgLTAuNTA4IDAuMzA1IC0wLjc3OCAwLjQxOCBjIC0wLjI3MSAwLjExNCAtMC41NTMgMC4yMDQgLTAuODQ3IDAuMjYgQyA0NS41ODcgNzQuOTY5IDQ1LjI5MyA3NS4wMDMgNDUgNzUuMDAzIHoiIHN0eWxlPSJzdHJva2U6IG5vbmU7IHN0cm9rZS13aWR0aDogMTsgc3Ryb2tlLWRhc2hhcnJheTogbm9uZTsgc3Ryb2tlLWxpbmVjYXA6IGJ1dHQ7IHN0cm9rZS1saW5lam9pbjogbWl0ZXI7IHN0cm9rZS1taXRlcmxpbWl0OiAxMDsgZmlsbDogcmdiKDI1NSwyNTUsMjU1KTsgZmlsbC1ydWxlOiBub256ZXJvOyBvcGFjaXR5OiAxOyIgdHJhbnNmb3JtPSIgbWF0cml4KDEgMCAwIDEgMCAwKSAiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgLz4KPC9nPgo8L3N2Zz4=");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  transform: translateY(4px); /* テキストラインに合わせるため下に移動させる */
}
/* リンクプレビューカードのスタイル */
.link-preview-card {
  max-width: 500px;
  margin: 1.5em 0;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  overflow: hidden;
  transition: box-shadow 0.3s, transform 0.3s;
  background-color: #fff;
}
.link-preview-card:hover {
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  transform: translateY(-2px);
}
.link-preview-card-anchor {
  display: flex;
  text-decoration: none;
  color: inherit;
  min-height: 110px;
}
.link-preview-card-main {
  padding: 12px 16px;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
}
.link-preview-card-title {
  font-size: 1em;
  font-weight: bold;
  margin-bottom: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.link-preview-card-description {
  font-size: 0.85em;
  color: #555;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2; /* 表示する行数を2行に制限 */
  overflow: hidden;
  flex-grow: 1;
}
.link-preview-card-meta {
  display: flex;
  align-items: center;
  font-size: 0.75em;
  color: #888;
  margin-top: 8px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.link-preview-card-favicon {
  width: 16px;
  height: 16px;
  margin-right: 6px;
  border-radius: 2px;
}
.link-preview-card-image {
  flex-shrink: 0;
  width: 110px;
  background-size: cover;
  background-position: center;
  border-left: 1px solid #e0e0e0;
}
/* 画像がない場合のスタイル調整 */
.link-preview-card-anchor:not(:has(.link-preview-card-image)) .link-preview-card-main {
  width: 100%;
}
/* Slideshareの埋め込み用途 */
.slideshare-responsive {
  width: 90%;
}
/* フッターのリンクは行の高さ分しかタップ領域が無く、Lighthouse の
   target-size（最低24px、間隔も必要）を満たしていなかった。
   上下に余白を持たせてタップしやすくする */
.footer-links a {
  display: inline-block;
  padding: 7px 0;
  line-height: 1.4;
}