/*
  SMATECH LAB design v4.5 (2026-11-03 隠し文を HTML から外す) テーマなし・原本 design/v4/
  Responsive: yes
*/
/*! == lab-v4.css == */
:root {
--color-primary: #0b6363;
--color-primary-strong: #084c4c;
--color-primary-weak: #eaf3f2;
--color-bg: #f6f7f7;
--color-surface: #ffffff;
--color-subtle: #eef1f1;
--color-text: #15191d;
--color-text-2: #3b444d;
--color-muted: #5b646e;
--color-border: #e2e6e8;
--color-border-strong: #c9d0d5;
--color-warn-bg: #fbf6ea;
--color-warn-border: #e9dbb6;
--color-testing: #835500;
--color-validated: #1d6f36;
--color-failed: #b42318;
--color-paused: #5b646e;
--color-promoted: #1d4ed8;
--radius: 8px;
--radius-sm: 5px;
--content-width: 1120px;
--reading-width: 720px;
--sidebar-width: 300px;
--gutter: 24px;
--space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px;
--space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 72px;
--font-sans: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Yu Gothic UI", Meiryo, sans-serif;
--font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
--fs-label: 11px;
--fs-small: 13px;
--fs-body: 16px;
--thumb-ratio: 1.91 / 1;
--mini-thumb-w: 120px;
--ease: .18s ease;
}
@media (max-width: 599px) { :root { --gutter: 16px; } }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--color-bg); color: var(--color-text); font: 400 var(--fs-body)/1.75 var(--font-sans); -webkit-font-smoothing: antialiased; }
a { color: var(--color-primary); text-decoration: none; }
@media (prefers-reduced-motion: reduce) { *, ::before, ::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; } }
a:hover { color: var(--color-primary-strong); }
img { max-width: 100%; height: auto; }
:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }
h1, h2, h3, h4, h5, h6 { color: var(--color-text); font-weight: 700; }
.lab-label, .hatena-module-title, .lab-footer__h, .lab-eyebrow {
margin: 0; font: 700 12px/1.4 var(--font-sans); letter-spacing: .04em; color: var(--color-muted);
}
.lab-mono { font: 600 var(--fs-label)/1.4 var(--font-mono); letter-spacing: .12em; color: var(--color-muted); }
#container-inner { position: relative; }
#content { padding: 0 var(--gutter); }
#content-inner {
max-width: var(--content-width); margin: 0 auto; padding: var(--space-6) 0 var(--space-8);
display: grid; grid-template-columns: minmax(0, 1fr) var(--sidebar-width); gap: var(--space-7); align-items: start;
}
#wrapper, #main, #main-inner { min-width: 0; }
#box1 { display: none; }
@media (max-width: 1023px) { #content-inner { grid-template-columns: minmax(0, 1fr); gap: var(--space-7); } }
#blog-title { background: var(--color-surface); border-bottom: 1px solid var(--color-border); padding: 0 var(--gutter); }
#blog-title-inner { max-width: var(--content-width); margin: 0 auto; min-height: 64px; display: flex; align-items: center; }
#blog-title-content { display: flex; align-items: center; gap: var(--space-3); }
#title { margin: 0; font-size: 20px; line-height: 1.3; letter-spacing: .02em; }
#title a { color: var(--color-text); display: inline-flex; align-items: center; gap: var(--space-2); }
#title a::before {
content: "LAB"; display: inline-block; padding: 3px 6px; border-radius: var(--radius-sm);
background: var(--color-primary); color: var(--color-surface); font: 700 11px/1.2 var(--font-mono); letter-spacing: .08em;
}
#blog-description { display: none; }
#top-editarea { padding: 0 var(--gutter); }
.lab-nav {
position: absolute; top: 0; right: max(calc(var(--gutter) + 112px), calc((100% - var(--content-width)) / 2));
height: 64px; display: flex; align-items: center; gap: var(--space-1); font-size: 14px;
}
.lab-nav a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--space-3); color: var(--color-text-2); border-radius: var(--radius-sm); white-space: nowrap; }
.lab-nav a:hover { color: var(--color-primary); background: var(--color-primary-weak); }
.lab-nav .lab-nav__ext::after { content: "↗"; margin-left: 3px; font-size: 11px; color: var(--color-muted); }
.lab-nav .lab-nav__sep { width: 1px; height: 18px; background: var(--color-border); margin: 0 var(--space-2); }
@media (max-width: 767px) {
#blog-title-inner { min-height: 52px; }
#title { font-size: 18px; }
.lab-nav {
position: static; height: auto; margin: 0 calc(var(--gutter) * -1); padding: 0 var(--gutter);
background: var(--color-surface); border-bottom: 1px solid var(--color-border); overflow-x: auto; scrollbar-width: none;
}
.lab-nav::-webkit-scrollbar { display: none; }
.lab-nav a { padding: 0 var(--space-2); font-size: 13.5px; }
.lab-nav a:first-child { margin-left: calc(var(--space-2) * -1); }
.blog-controlls { display: none; }
}
.lab-home-only { display: none; }
.page-index .lab-home-only { display: block; }
.lab-hero { max-width: var(--content-width); margin: 0 auto; padding: var(--space-6) 0 var(--space-4); }
.lab-hero .lab-eyebrow { color: var(--color-primary); margin-bottom: var(--space-2); }
.lab-hero__title { margin: 0 0 var(--space-2); font-size: 30px; line-height: 1.35; font-weight: 700; letter-spacing: .01em; }
.lab-hero__lead { margin: 0; max-width: 40em; font-size: 15.5px; line-height: 1.8; color: var(--color-text-2); }
.lab-hero__topics { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: var(--space-4) 0 0; padding: 0; list-style: none; }
.lab-hero__topics a {
display: inline-flex; align-items: center; min-height: 36px; padding: 0 var(--space-4); border: 1px solid var(--color-border);
border-radius: 999px; background: var(--color-surface); color: var(--color-text-2); font-size: 14px; white-space: nowrap; transition: border-color var(--ease), color var(--ease);
}
.lab-hero__topics a:hover { border-color: var(--color-primary); color: var(--color-primary); }
.lab-hero__first { margin: var(--space-3) 0 0; font-size: 14px; color: var(--color-muted); }
.lab-hero__first a { margin-right: var(--space-3); text-decoration: underline; text-underline-offset: 3px; }
.page-index #content-inner { padding-top: var(--space-3); }
.page-index #wrapper { display: none; }
.page-archive #main-inner::before {
display: block; margin: 0 0 var(--space-4); font: 600 var(--fs-label)/1.4 var(--font-mono); letter-spacing: .12em; color: var(--color-muted);
}
.page-archive:not(.page-archive-category) #main-inner::before { content: "すべての記事（新しい順）"; font-family: var(--font-sans); letter-spacing: .04em; }
@media (max-width: 599px) {
.lab-hero { padding: var(--space-4) 0 var(--space-3); }
.lab-hero__title { font-size: 21px; line-height: 1.45; text-wrap: balance; }
.lab-hero__lead { font-size: 14px; line-height: 1.75; }
.lab-hero__topics { flex-wrap: nowrap; overflow-x: auto; margin: var(--space-3) calc(var(--gutter) * -1) 0; padding: 0 var(--gutter); scrollbar-width: none; }
.lab-hero__topics::-webkit-scrollbar { display: none; }
.lab-hero__topics a { min-height: 36px; padding: 0 var(--space-3); font-size: 13px; }
.lab-hero__first { font-size: 13px; }
.page-index #box2 .hatena-module-recent-entries .hatena-module-title { margin-bottom: var(--space-3); }
}
#box2 .hatena-module-recent-entries { display: none; }
.page-index #box2 .hatena-module-recent-entries { display: block; order: 0; }
.page-index #box2 .hatena-module-recent-entries .hatena-module-title { color: var(--color-text); font-size: 15px; }
#box2 .recent-entries { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5); }
#box2 .recent-entries .urllist-item-inner {
display: flex; flex-direction: column; align-items: stretch; box-sizing: border-box; height: 100%; padding: 0 0 var(--space-4);
background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); overflow: hidden;
transition: border-color var(--ease);
}
@media (hover: hover) { #box2 .recent-entries .urllist-item:hover .urllist-item-inner { border-color: var(--color-primary); } }
#box2 .recent-entries .urllist-image-link { order: 0; width: auto; border-radius: 0; }
#box2 .recent-entries .urllist-categories { order: 1; margin: var(--space-4) var(--space-4) var(--space-1); line-height: 1.4; position: relative; z-index: 1; }
#box2 .recent-entries .urllist-category-link + .urllist-category-link { display: none; }
#box2 .recent-entries .urllist-title-link { order: 2; margin: 0 var(--space-4); font-size: 16px; line-height: 1.55; }
#box2 .recent-entries .urllist-date-link { order: 3; display: block; margin: var(--space-2) var(--space-4) 0; font-size: 12px; color: var(--color-muted); }
#box2 .recent-entries .urllist-date-link a { color: inherit; }
.urllist-see-more { margin: var(--space-4) 0 0; text-align: center; }
.urllist-see-more-link {
display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--space-5); border: 1px solid var(--color-border-strong);
border-radius: var(--radius-sm); background: var(--color-surface); color: var(--color-text-2); font-size: 14px;
}
.urllist-see-more-link::after { content: " →"; margin-left: 4px; }
@media (min-width: 1024px) {
.page-index #content-inner { grid-template-columns: minmax(0, 1fr); }
.page-index #box2-inner { display: grid; grid-template-columns: minmax(0, 1fr) var(--sidebar-width); gap: var(--space-7); align-items: start; }
.page-index #box2 .hatena-module-recent-entries { grid-column: 1; grid-row: 1 / span 6; }
.page-index #box2 .hatena-module:not(.hatena-module-recent-entries) { grid-column: 2; }
}
@media (max-width: 1023px) {
.page-index #box2 { display: flex; flex-direction: column; gap: var(--space-7); border-top: 0; padding-top: 0; }
.page-index #box2-inner { display: contents; }
.page-index #box2 .hatena-module-html { order: 1; }
.page-index #box2 > .adx-responsive-mode { order: 2; }
.page-index #box2 .hatena-module-entries-access-ranking { order: 3; }
.page-index #box2 .hatena-module-category { order: 4; }
.page-index #box2 .hatena-module-search-box { order: 5; }
}
@media (max-width: 1023px) and (min-width: 768px) { #box2 .recent-entries { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 599px) {
#box2 .recent-entries { grid-template-columns: minmax(0, 1fr); gap: var(--space-3); }
#box2 .recent-entries .urllist-item:not(:first-child) .urllist-item-inner {
display: grid; grid-template-columns: var(--mini-thumb-w) minmax(0, 1fr); grid-template-rows: auto auto 1fr; column-gap: var(--space-3); height: auto; padding: var(--space-3);
}
#box2 .recent-entries .urllist-item:not(:first-child) .urllist-image-link { grid-row: 1 / 4; align-self: start; width: var(--mini-thumb-w); border-radius: var(--radius-sm); }
#box2 .recent-entries .urllist-item:not(:first-child) .urllist-categories { grid-column: 2; margin: 0; }
#box2 .recent-entries .urllist-item:not(:first-child) .urllist-title-link { grid-column: 2; margin: 2px 0 0; font-size: 15px; }
#box2 .recent-entries .urllist-item:not(:first-child) .urllist-categories { grid-row: 1; }
#box2 .recent-entries .urllist-item:not(:first-child) .urllist-date-link { grid-column: 2; grid-row: 3; align-self: start; margin: var(--space-1) 0 0; }
#box2 .recent-entries .urllist-item:first-child .urllist-title-link { font-size: 17px; }
}
.archive-header-category { margin: 0 0 var(--space-2); }
.page-archive-category .archive-heading { margin: 0; font-size: 28px; line-height: 1.4; }
.archive-entries-sort { margin: 0 0 var(--space-5); font-size: var(--fs-small); color: var(--color-muted); display: flex; gap: var(--space-3); }
.lab-cat-intro { display: none; margin: 0 0 var(--space-5); max-width: 46em; font-size: 14.5px; line-height: 1.85; color: var(--color-text-2); }
.page-archive-category.category-LAB .lab-cat-intro--LAB,
.page-archive-category.category-Local-AI .lab-cat-intro--Local-AI,
.page-archive-category.category-AI-Agents .lab-cat-intro--AI-Agents,
.page-archive-category.category-Creative-Tech .lab-cat-intro--Creative-Tech,
.page-archive-category.category-Automation .lab-cat-intro--Automation,
.page-archive-category.category-BLOG .lab-cat-intro--BLOG,
.page-archive-category.category-SMART-HOME .lab-cat-intro--SMART-HOME,
.page-archive-category.category-Amazon .lab-cat-intro--Amazon,
.page-archive-category.category-RaspPi .lab-cat-intro--RaspPi,
.page-archive-category.category-ダイエット .lab-cat-intro--diet { display: block; }
#top-box { padding: 0 var(--gutter); }
.breadcrumb { max-width: var(--content-width); margin: var(--space-4) auto 0; font-size: 12.5px; color: var(--color-muted); }
.breadcrumb-inner { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.breadcrumb a { color: var(--color-muted); }
.breadcrumb a:hover { color: var(--color-primary); }
.breadcrumb-gt { margin: 0 6px; }
.page-entry .breadcrumb-child:last-child, .page-entry .breadcrumb-gt:nth-last-child(2) { display: none; }
.page-archive-category #top-box { display: none; }
.archive-entries { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5); }
.page-archive .archive-entry::after { content: none; }
.page-archive .archive-entry {
position: relative; display: flex; flex-direction: column; margin: 0; padding: 0 0 var(--space-4);
background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); overflow: hidden;
transition: border-color var(--ease);
}
@media (hover: hover) { .page-archive .archive-entry:hover { border-color: var(--color-primary); } }
.archive-entry-header, .archive-entry-body { display: contents; }
.archive-entry .entry-thumb { display: none; }
.page-archive .archive-entry:not(:has(.entry-thumb-link))::before {
content: "SMATECH LAB"; order: 0; display: flex; align-items: center; justify-content: center; aspect-ratio: var(--thumb-ratio);
background: var(--color-primary-weak); color: var(--color-primary); font: 600 var(--fs-label)/1 var(--font-mono); letter-spacing: .14em;
}
.archive-entry .entry-thumb-link { order: 0; display: block; aspect-ratio: var(--thumb-ratio); background: var(--color-subtle); overflow: hidden; }
.lab-thumb { display: block; width: 100%; height: 100%; object-fit: contain; }
.lab-thumb.is-cover { object-fit: cover; }
.archive-entry .categories { order: 1; position: relative; z-index: 1; margin: var(--space-4) var(--space-4) var(--space-1); line-height: 1.4; }
.archive-category-link, .entry-category-link, .urllist-category-link {
font: 600 var(--fs-label)/1.4 var(--font-mono); letter-spacing: .08em; color: var(--color-primary); background: none; border: 0; padding: 0;
}
.archive-entry .categories a + a, .urllist-categories-link a + a { display: none; }
.archive-entry .entry-title { order: 2; margin: 0 var(--space-4); font-size: 17px; line-height: 1.55; }
.archive-entry .entry-title a { color: var(--color-text); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.archive-entry .entry-title a::after { content: ""; position: absolute; inset: 0; }
.archive-entry .entry-description {
order: 3; margin: var(--space-2) var(--space-4) 0; font-size: 14px; line-height: 1.7; color: var(--color-muted);
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.archive-entry .date { order: 4; margin: var(--space-3) var(--space-4) 0; font-size: 12px; color: var(--color-muted); }
.archive-entry .date a { color: inherit; }
.archive-entry-tags-wrapper, .archive-entry .social-buttons, .archive-entry .star-container { display: none; }
@media (max-width: 1023px) and (min-width: 768px) { .archive-entries { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 599px) {
.archive-entries { grid-template-columns: minmax(0, 1fr); gap: var(--space-3); }
.page-archive .archive-entry:not(:first-child) {
display: grid; grid-template-columns: var(--mini-thumb-w) minmax(0, 1fr); grid-template-rows: auto 1fr auto; column-gap: var(--space-3);
padding: var(--space-3);
}
.page-archive .archive-entry:not(:first-child) .entry-thumb-link,
.page-archive .archive-entry:not(:first-child):not(:has(.entry-thumb-link))::before { grid-row: 1 / 4; align-self: start; border-radius: var(--radius-sm); }
.page-archive .archive-entry:not(:first-child):not(:has(.entry-thumb-link))::before { content: "LAB"; width: var(--mini-thumb-w); }
.archive-entry:not(:first-child) .categories, .urllist-categories-link, .urllist-categories { display: none; }
.archive-entry:not(:first-child) .entry-title { margin: 2px 0 0; font-size: 15px; }
.archive-entry:not(:first-child) .entry-description { display: none; }
.archive-entry:not(:first-child) .date { margin: var(--space-1) 0 0; }
}
.hatena-urllist { list-style: none; margin: 0; padding: 0; }
.urllist-item { position: relative; margin: 0; padding: 0; border: 0; }
.urllist-item-inner {
display: grid; grid-template-columns: var(--mini-thumb-w) minmax(0, 1fr); grid-template-rows: auto 1fr; column-gap: var(--space-3);
align-items: start;
}
.urllist-image-link {
grid-row: 1 / 3; display: block; width: var(--mini-thumb-w); aspect-ratio: var(--thumb-ratio);
border-radius: var(--radius-sm); background: var(--color-subtle); overflow: hidden;
}
.urllist-with-thumbnails .urllist-item .urllist-image { display: block; float: none; width: 100%; height: 100%; max-width: none; object-fit: contain; margin: 0; }
.urllist-with-thumbnails .urllist-item .urllist-image.is-cover { object-fit: cover; }
.urllist-categories-link { grid-column: 2; grid-row: 1; line-height: 1.4; }
.urllist-title-link {
grid-column: 2; grid-row: 2; font-size: 14.5px; font-weight: 600; line-height: 1.55; color: var(--color-text);
display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.urllist-title-link::after { content: ""; position: absolute; inset: 0; }
.urllist-item:hover .urllist-title-link { color: var(--color-primary); }
.urllist-date-link, .urllist-entry-body, .urllist-item .bookmark-widget-counter { display: none; }
.entry { margin: 0; }
.page-entry .entry, .page-about .entry { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); padding: var(--space-7) var(--space-7) var(--space-6); }
.entry-header { display: flex; flex-direction: column; margin: 0 0 var(--space-6); }
.entry-header .entry-categories { order: 1; margin: 0 0 var(--space-3); }
.entry-header .entry-categories a { margin-right: var(--space-3); }
.entry-header .entry-title { order: 2; margin: 0; font-size: 30px; line-height: 1.45; letter-spacing: .01em; }
.entry-header .entry-title a { color: var(--color-text); }
.entry-header .entry-date { order: 3; margin: var(--space-3) 0 0; font-size: var(--fs-small); color: var(--color-muted); }
.entry-header .entry-date a { color: inherit; }
.customized-header { order: 4; }
.lab-ad-note { margin: var(--space-4) 0 0; font-size: 12px; color: var(--color-muted); }
.entry-content { max-width: var(--reading-width); font-size: 16.5px; line-height: 1.95; color: var(--color-text); overflow-wrap: break-word; }
.entry-content > :first-child { margin-top: 0; }
.entry-content p { margin: 0 0 1.5em; }
.entry-content h2 { margin: 2.6em 0 .8em; padding: 0; font-size: 24px; line-height: 1.5; letter-spacing: .01em; background: none; border: 0; }
.entry-content h3 { margin: 2.1em 0 .6em; padding: 0; font-size: 19.5px; line-height: 1.55; background: none; border: 0; }
.entry-content h4 { margin: 1.8em 0 .5em; font-size: 17px; line-height: 1.6; }
.entry-content h5, .entry-content h6 { margin: 1.6em 0 .4em; font-size: 16px; }
.entry-content ul, .entry-content ol { margin: 0 0 1.5em; padding-left: 1.5em; }
.entry-content li { margin: .35em 0; line-height: 1.85; }
.entry-content li > ul, .entry-content li > ol { margin: .3em 0 0; }
.entry-content a { text-decoration: underline; text-decoration-color: var(--color-border-strong); text-underline-offset: 3px; }
.entry-content a:hover { text-decoration-color: currentColor; }
.entry-content a.keyword { color: inherit; text-decoration: none; }
.entry-content img { border-radius: var(--radius-sm); }
.entry-content strong { font-weight: 700; }
.entry-content hr { margin: var(--space-7) 0; border: 0; border-top: 1px solid var(--color-border); }
.entry-content blockquote { margin: 0 0 1.5em; padding: .2em 0 .2em 1.1em; border-left: 3px solid var(--color-border-strong); color: var(--color-text-2); background: none; }
.entry-content blockquote::before, .entry-content blockquote::after { content: none; }
.entry-content blockquote p:last-child { margin-bottom: 0; }
.entry-content blockquote cite { display: block; font-size: var(--fs-small); color: var(--color-muted); }
.entry-content pre {
margin: 0 0 1.5em; padding: var(--space-4) 18px; background: var(--color-subtle); color: var(--color-text); border-radius: var(--radius);
font: 13.5px/1.7 var(--font-mono); tab-size: 2; overflow-x: auto; white-space: pre; max-width: 100%;
}
.entry-content :not(pre) > code { padding: 1px 5px; border-radius: 4px; background: var(--color-subtle); font: .88em var(--font-mono); overflow-wrap: anywhere; }
.entry-content pre code { background: none; padding: 0; font: inherit; }
.synComment { color: #6a737d; } .synConstant { color: #0a6b4f; } .synIdentifier, .synType { color: #0b4f8a; }
.synStatement, .synPreProc { color: #9a2a5c; } .synSpecial { color: #8a5a00; }
.entry-content table {
display: block; max-width: 100%; overflow-x: auto; margin: 0 0 1.5em; border-collapse: collapse; border: 0;
font-size: 14.5px; line-height: 1.65; font-variant-numeric: tabular-nums;
}
.entry-content th, .entry-content td { padding: 9px 12px; border: 0; border-bottom: 1px solid var(--color-border); text-align: left; vertical-align: top; }
.entry-content th { background: var(--color-subtle); font-weight: 600; white-space: nowrap; }
.entry-content tr:first-child > * { border-top: 1px solid var(--color-border); }
.entry-content th[align="right"], .entry-content td[align="right"], .entry-content th[style*="right"], .entry-content td[style*="right"] { text-align: right; white-space: nowrap; }
.entry-content .table-of-contents { margin: 0 0 2em; padding: var(--space-4) var(--space-5) var(--space-4) 2.2em; background: var(--color-subtle); border-radius: var(--radius); font-size: 15px; line-height: 1.7; }
.entry-content .table-of-contents li { margin: .25em 0; }
.entry-content .table-of-contents a { color: var(--color-text-2); text-decoration: none; }
.entry-content .table-of-contents a:hover { color: var(--color-primary); }
.entry-content iframe { max-width: 100%; }
.entry-content .embed-card, .entry-content .embed-blogcard, .entry-content .embed-webcard { display: block; width: 100%; max-width: 100%; margin: 0 0 1.5em; }
.entry-content .footnote { font-size: var(--fs-small); color: var(--color-muted); }
.entry-content .hatena-asin-detail {
display: flex; gap: var(--space-4); margin: 0 0 1.5em; padding: var(--space-4); border: 1px solid var(--color-border); border-radius: var(--radius); background: var(--color-surface); line-height: 1.6;
}
.entry-content .hatena-asin-detail-image { max-width: 120px; border-radius: 0; }
.entry-content .hatena-asin-detail-info { min-width: 0; font-size: 14px; }
.entry-content .hatena-asin-detail-title { margin: 0 0 var(--space-2); font-size: 15px; font-weight: 700; }
.entry-content .hatena-asin-detail-meta { margin: 0; padding: 0; list-style: none; font-size: var(--fs-small); color: var(--color-muted); }
.entry-content .hatena-asin-detail a { text-decoration: none; }
.entry-content .asin-detail-buy { display: inline-block; margin-top: var(--space-2); padding: 6px 14px; border-radius: var(--radius-sm); background: var(--color-primary); color: var(--color-surface); }
.entry-content figure { margin: 0 0 1.5em; }
.entry-content figcaption { margin-top: 6px; font-size: var(--fs-small); color: var(--color-muted); text-align: center; }
.entry-content .movie-wrap { margin-bottom: 1.5em; }
.lab-status {
display: inline-block; padding: 0 6px; border: 1px solid currentColor; border-radius: var(--radius-sm); background: var(--color-surface);
font: 600 var(--fs-label)/1.6 var(--font-mono); letter-spacing: .06em; color: var(--color-testing);
}
.lab-status--validated { color: var(--color-validated); } .lab-status--failed { color: var(--color-failed); }
.lab-status--paused { color: var(--color-paused); } .lab-status--promoted { color: var(--color-promoted); }
.entry-content .lab-meta { margin: 0 0 var(--space-6); padding: var(--space-4) var(--space-5); background: var(--color-subtle); border-radius: var(--radius); border-left: 3px solid var(--color-testing); }
.entry-content .lab-meta--validated { border-left-color: var(--color-validated); } .entry-content .lab-meta--failed { border-left-color: var(--color-failed); }
.entry-content .lab-meta--paused { border-left-color: var(--color-paused); } .entry-content .lab-meta--promoted { border-left-color: var(--color-promoted); }
.entry-content .lab-meta dl { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: var(--space-1) var(--space-4); margin: 0; }
.entry-content .lab-meta dt { margin: 0; font: 600 var(--fs-label)/1.9 var(--font-mono); letter-spacing: .1em; color: var(--color-muted); }
.entry-content .lab-meta dd { margin: 0; font-size: 14px; line-height: 1.7; overflow-wrap: anywhere; }
.entry-content .lab-callout { margin: 0 0 1.5em; padding: var(--space-3) var(--space-4); background: var(--color-primary-weak); border-radius: var(--radius); font-size: 15px; line-height: 1.85; }
.entry-content .lab-callout--warn { background: var(--color-warn-bg); }
.entry-content .lab-callout p:last-child { margin-bottom: 0; }
.entry-content .lab-product { margin: 0 0 1.5em; padding: var(--space-3) var(--space-4); border: 1px solid var(--color-border); border-radius: var(--radius); }
.entry-content .lab-product p { margin: 0 0 6px; font-size: 14px; line-height: 1.7; }
.entry-content .lab-product__name { font-weight: 700; }
.entry-content figure.lab-fig { margin: var(--space-6) 0; text-align: center; }
.entry-content figure.lab-fig svg { width: 100%; max-width: 640px; height: auto; }
.entry-content .yx-post { max-width: 100%; box-sizing: border-box; }
.entry-content .fas { display: inline-block; font: normal normal normal 14px/1 FontAwesome; font-size: inherit; }
.entry-header-html::after { display: block; margin: var(--space-4) 0 0; padding: var(--space-3) var(--space-4); background: var(--color-warn-bg); border: 1px solid var(--color-warn-border); border-radius: var(--radius); font-size: 14px; line-height: 1.75; color: var(--color-text-2); }
.lab-share { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin: var(--space-6) 0; padding: var(--space-5) 0 0; border-top: 1px solid var(--color-border); }
.lab-share__label { margin-right: var(--space-2); }
.lab-share a {
display: inline-flex; align-items: center; min-height: 40px; padding: 0 var(--space-4); border: 1px solid var(--color-border); border-radius: 999px;
color: var(--color-text-2); font-size: 13.5px; font-weight: 600; text-decoration: none; transition: border-color var(--ease), color var(--ease);
}
.lab-share a:hover { border-color: var(--color-primary); color: var(--color-primary); }
.entry-footer { margin-top: var(--space-5); }
.entry-tags-wrapper { margin: 0 0 var(--space-4); }
.entry-tag { display: inline-block; margin: 0 var(--space-2) var(--space-2) 0; }
.entry-tag-link { display: inline-block; padding: 2px 10px; border-radius: 999px; background: var(--color-subtle); color: var(--color-text-2); font-size: 12.5px; }
.entry-tag-icon { display: none; }
.entry-footer-section { font-size: 12.5px; color: var(--color-muted); }
.entry-footer-section a { color: inherit; }
.entry-footer .social-buttons, .entry-footer-subscribe { display: none; }
.entry-footer-modules .hatena-module { margin: var(--space-7) 0 0; padding: var(--space-6) 0 0; border-top: 1px solid var(--color-border); }
.entry-footer-modules .hatena-module-title { margin-bottom: var(--space-4); font-size: 17px; letter-spacing: 0; color: var(--color-text); }
.entry-footer-modules .related-entries { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5) var(--space-6); }
.lab-backcat { margin: var(--space-5) 0 0; font-size: 14px; }
.lab-backcat a { font-weight: 600; }
.lab-series { display: none; }
.lab-series { margin: var(--space-6) 0 0; padding: var(--space-5) var(--space-5) var(--space-4); background: var(--color-subtle); border-radius: var(--radius); }
.category-LAB .lab-series { display: block; }
.lab-series > :is(p:nth-of-type(-n+3), ul) { display: none; }
.category-Local-AI .lab-series > :is(p:nth-of-type(1), ul:nth-of-type(1)),
.category-AI-Agents .lab-series > :is(p:nth-of-type(2), ul:nth-of-type(2)),
.category-Automation .lab-series > :is(p:nth-of-type(2), ul:nth-of-type(2)),
.category-Creative-Tech .lab-series > :is(p:nth-of-type(3), ul:nth-of-type(3)),
body:not(.category-Local-AI):not(.category-AI-Agents):not(.category-Automation):not(.category-Creative-Tech) .lab-series > :is(p, ul) { display: block; }
.lab-series ul { margin: var(--space-2) 0 var(--space-4); padding: 0; list-style: none; }
.lab-series li { padding: 5px 0; font-size: 14.5px; line-height: 1.6; border-bottom: 1px solid var(--color-border); }
.lab-series li:last-child { border-bottom: 0; }
.lab-series a { color: var(--color-text); }
.lab-series a:hover { color: var(--color-primary); }
.lab-series .lab-label a { color: var(--color-primary); }
.lab-next-step { margin: var(--space-6) 0 0; padding: var(--space-5) 0 0; border-top: 1px solid var(--color-border); }
.lab-next-step .lab-label { margin-bottom: var(--space-3); }
.lab-cta { display: block; padding: var(--space-4) var(--space-5); border: 1px solid var(--color-border); border-radius: var(--radius); background: var(--color-surface); color: var(--color-text); text-decoration: none; }
.lab-cta + .lab-cta { margin-top: var(--space-3); }
.lab-cta--main { border-color: var(--color-primary); }
.lab-cta__why { display: block; font-size: 14px; line-height: 1.75; color: var(--color-text-2); }
.lab-cta__to { display: block; margin-top: var(--space-1); font-size: 15px; font-weight: 700; line-height: 1.6; color: var(--color-primary); }
@media (hover: hover) { .lab-cta:hover { border-color: var(--color-primary); } }
.lab-legacy-cta { margin: var(--space-6) 0; padding: var(--space-4) var(--space-5); background: var(--color-primary-weak); border-radius: var(--radius); font-size: 14.5px; line-height: 1.8; }
.entry-content .lab-legacy-cta p { margin: 0 0 6px; font-size: 14.5px; }
.entry-content .lab-legacy-cta p:last-child { margin-bottom: 0; }
.page-entry .pager { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); margin: var(--space-6) 0 0; }
.page-entry .pager a {
display: block; height: 100%; box-sizing: border-box; padding: var(--space-4) var(--space-5); background: var(--color-surface); border: 1px solid var(--color-border);
border-radius: var(--radius); color: var(--color-text); font-size: 14px; line-height: 1.6; transition: border-color var(--ease);
}
.page-entry .pager a:hover { border-color: var(--color-primary); }
.page-entry .pager-prev a::before, .page-entry .pager-next a::before { display: block; margin-bottom: 4px; font-size: 12px; font-weight: 700; color: var(--color-muted); }
.page-entry .pager-prev a::before { content: "← 新しい記事"; }
.page-entry .pager-next { grid-column: 2; text-align: right; }
.page-entry .pager-next a::before { content: "古い記事 →"; }
.pager-arrow { display: none; }
.page-archive .pager { margin: var(--space-6) 0 0; text-align: center; }
.page-archive .pager a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--space-6); border: 1px solid var(--color-border-strong); border-radius: 999px; background: var(--color-surface); color: var(--color-text); font-weight: 600; }
.page-archive .pager a:hover { border-color: var(--color-primary); color: var(--color-primary); }
.adsbygoogle, .google-afc-user-container { margin: var(--space-5) 0; }
ins.adsbygoogle[data-ad-status="unfilled"] { display: none !important; }
#box2-inner { display: flex; flex-direction: column; gap: var(--space-7); }
#box2 .hatena-module { margin: 0; order: 5; }
#box2 .hatena-module-html { order: 1; }
#box2 .hatena-module-entries-access-ranking { order: 2; }
#box2 .hatena-module-category { order: 3; }
#box2 .hatena-module-search-box { order: 4; }
#box2 .hatena-module-title { margin: 0 0 var(--space-4); padding: 0; border: 0; background: none; }
#box2 .hatena-module-title a { color: inherit; }
#box2 .hatena-module-body { padding: 0; }
#box2 .entries-access-ranking { counter-reset: rank; display: flex; flex-direction: column; gap: var(--space-4); }
#box2 .entries-access-ranking .urllist-item:nth-child(n+6) { display: none; }
#box2 .urllist-item-inner { grid-template-columns: 96px minmax(0, 1fr); }
#box2 .urllist-image-link { width: 96px; }
#box2 .urllist-title-link { font-size: 13.5px; -webkit-line-clamp: 3; }
.hatena-urllist-categories, #box2 .hatena-module-category ul { display: flex; flex-wrap: wrap; gap: var(--space-2); list-style: none; margin: 0; padding: 0; }
#box2 .hatena-module-category li { margin: 0; padding: 0; border: 0; }
#box2 .hatena-module-category a {
display: inline-flex; align-items: center; min-height: 32px; padding: 0 var(--space-3); border: 1px solid var(--color-border); border-radius: 999px;
background: var(--color-surface); color: var(--color-text-2); font-size: 13px; transition: border-color var(--ease), color var(--ease);
}
#box2 .hatena-module-category a:hover { border-color: var(--color-primary); color: var(--color-primary); }
.search-form { display: flex; gap: var(--space-2); margin: 0; }
.search-module-input { flex: 1; min-width: 0; height: 40px; padding: 0 var(--space-3); border: 1px solid var(--color-border-strong); border-radius: var(--radius-sm); background: var(--color-surface); font: inherit; font-size: 14px; box-sizing: border-box; }
.search-module-button { height: 40px; padding: 0 var(--space-4); border: 0; border-radius: var(--radius-sm); background: var(--color-primary); color: var(--color-surface); font-size: 13px; cursor: pointer; }
.lab-side-about__head { display: flex; align-items: center; gap: var(--space-3); color: var(--color-text); }
.lab-side-about__head img { width: 56px; height: 56px; border-radius: 50%; flex: none; }
.lab-side-about__name { display: block; font-size: 16px; font-weight: 700; line-height: 1.4; }
.lab-side-about__role { display: block; font-size: 12.5px; color: var(--color-muted); }
.lab-side-about p { margin: var(--space-3) 0 0; font-size: 14px; line-height: 1.8; color: var(--color-text-2); }
.lab-side-links { list-style: none; margin: var(--space-4) 0 0; padding: 0; border-top: 1px solid var(--color-border); }
.lab-side-links li { margin: 0; border-bottom: 1px solid var(--color-border); }
.lab-side-links a { display: flex; flex-direction: column; justify-content: center; min-height: 52px; padding: var(--space-2) 0; color: var(--color-text); }
.lab-side-links a:hover strong { color: var(--color-primary); }
.lab-side-links strong { font-size: 14px; line-height: 1.4; }
.lab-side-links strong::after { content: " ↗"; font-size: 11px; color: var(--color-muted); }
.lab-side-links span { font-size: 12.5px; line-height: 1.5; color: var(--color-muted); }
.lab-side-about .lab-side-about__more { font-size: 13px; }
.lab-side-about iframe { display: block; margin-top: var(--space-3); }
@media (max-width: 1023px) {
#box2 { border-top: 1px solid var(--color-border); padding-top: var(--space-6); }
#box2-inner { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6) var(--space-7); }
#box2 .hatena-module-html { grid-column: 1; grid-row: 1 / 3; }
}
@media (max-width: 767px) { #box2-inner { display: flex; } }
#bottom-editarea { background: var(--color-surface); border-top: 1px solid var(--color-border); padding: 0 var(--gutter); }
.lab-footer { max-width: var(--content-width); margin: 0 auto; padding: var(--space-7) 0 var(--space-5); }
.lab-footer__grid { display: grid; grid-template-columns: 1.4fr repeat(3, minmax(0, 1fr)); gap: var(--space-6); }
.lab-footer__name { margin: 0 0 var(--space-2); font-size: 17px; font-weight: 700; }
.lab-footer__brand p { margin: 0 0 var(--space-2); font-size: 13.5px; line-height: 1.8; color: var(--color-muted); }
.lab-footer__h { margin-bottom: var(--space-3); }
.lab-footer ul { list-style: none; margin: 0; padding: 0; }
.lab-footer li { padding: 3px 0; font-size: 14px; line-height: 1.6; }
.lab-footer li a { color: var(--color-text-2); }
.lab-footer li a:hover { color: var(--color-primary); }
.lab-footer li span { display: block; font-size: 12px; color: var(--color-muted); }
.lab-disclosure { margin: var(--space-6) 0 0; padding-top: var(--space-4); border-top: 1px solid var(--color-border); font-size: 12px; color: var(--color-muted); }
#footer { background: var(--color-surface); padding: 0 var(--gutter) var(--space-6); font-size: 12px; color: var(--color-muted); text-align: left; }
#footer-inner { max-width: var(--content-width); margin: 0 auto; }
#footer a { color: var(--color-muted); }
#footer .footer-address img { display: none; }
@media (max-width: 1023px) { .lab-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 599px) { .lab-footer__grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-5); } }
.page-about .entry-content > dl { display: none; }
.page-about #box2 .hatena-module-html { display: none; }
.page-about .entry-content { max-width: var(--reading-width); }
.lab-about > .lab-label { color: var(--color-primary); margin-bottom: var(--space-2); }
.lab-about h2:first-of-type { margin-top: 0; }
@media (max-width: 767px) {
.page-entry .entry { padding: var(--space-6) var(--space-5) var(--space-5); }
.entry-header .entry-title { font-size: 25px; }
}
@media (max-width: 599px) {
.page-entry #content { padding: 0; }
.page-entry #content-inner { padding-top: var(--space-4); }
.page-entry #box2, .page-entry .pager { margin-left: var(--gutter); margin-right: var(--gutter); }
.page-entry .entry { border-radius: 0; border-left: 0; border-right: 0; padding: var(--space-5) var(--gutter); }
.entry-header .entry-title { font-size: 23px; line-height: 1.5; }
.entry-content { font-size: 16px; line-height: 1.9; }
.entry-content h2 { font-size: 21px; margin-top: 2.3em; }
.entry-content h3 { font-size: 18px; }
.entry-content pre { font-size: 12.5px; padding: var(--space-3) 14px; border-radius: var(--radius-sm); }
.entry-content table { font-size: 13.5px; }
.entry-content th, .entry-content td { min-width: 4.5em; padding: 7px 9px; }
.entry-content .lab-meta { padding: var(--space-3) var(--space-4); }
.entry-content .lab-meta dl { grid-template-columns: 6.5em minmax(0, 1fr); gap: 2px var(--space-3); }
.entry-content .hatena-asin-detail { flex-direction: column; }
.entry-footer-modules .related-entries { grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }
.page-entry .pager { grid-template-columns: minmax(0, 1fr); }
.page-entry .pager-next { grid-column: 1; }
}
@media (max-width: 599px) {
.page-about #content { padding: 0; }
.page-about #box2 { margin-left: var(--gutter); margin-right: var(--gutter); }
.page-about .entry { border-radius: 0; border-left: 0; border-right: 0; padding: var(--space-5) var(--gutter); }
}
@media (max-width: 767px) { .lab-footer nav[aria-label="ねじまのほかの場所"] { display: none; } }
@media (max-width: 767px) {
#box2 .hatena-module-entries-access-ranking { order: 1; }
#box2 .hatena-module-category { order: 2; }
#box2 .hatena-module-html { order: 3; }
}

/*! == notices.css == */
article[data-uuid="26006613684870480"] .entry-header-html::after,
article[data-uuid="13574176438034892289"] .entry-header-html::after,
article[data-uuid="26006613657835816"] .entry-header-html::after,
article[data-uuid="13574176438037049808"] .entry-header-html::after,
article[data-uuid="6802418398507817707"] .entry-header-html::after,
article[data-uuid="26006613657353063"] .entry-header-html::after,
article[data-uuid="26006613673096337"] .entry-header-html::after,
article[data-uuid="6801883189122223951"] .entry-header-html::after,
article[data-uuid="26006613492876173"] .entry-header-html::after,
article[data-uuid="26006613660745514"] .entry-header-html::after,
article[data-uuid="26006613778133265"] .entry-header-html::after,
article[data-uuid="26006613778271584"] .entry-header-html::after,
article[data-uuid="4207112889898467962"] .entry-header-html::after,
article[data-uuid="4207112889939795188"] .entry-header-html::after,
article[data-uuid="4207112889940223145"] .entry-header-html::after,
article[data-uuid="17680117127218763549"] .entry-header-html::after,
article[data-uuid="26006613442295327"] .entry-header-html::after,
article[data-uuid="26006613468318729"] .entry-header-html::after,
article[data-uuid="26006613477320454"] .entry-header-html::after,
article[data-uuid="26006613477878798"] .entry-header-html::after,
article[data-uuid="26006613493692505"] .entry-header-html::after,
article[data-uuid="26006613660766142"] .entry-header-html::after,
article[data-uuid="13574176438049450770"] .entry-header-html::after { content: "※この記事は、公開当時のセールの記録です。セールは終了していて、価格や在庫は今とは違います。最新の価格は Amazon で確認してください。"; }
article[data-uuid="26006613657951111"] .entry-header-html::after,
article[data-uuid="26006613772323915"] .entry-header-html::after,
article[data-uuid="26006613773259882"] .entry-header-html::after,
article[data-uuid="26006613777677299"] .entry-header-html::after,
article[data-uuid="4207112889893428003"] .entry-header-html::after,
article[data-uuid="17680117127217890981"] .entry-header-html::after,
article[data-uuid="26006613633792615"] .entry-header-html::after,
article[data-uuid="13574176438035809020"] .entry-header-html::after { content: "※この記事のキャンペーンは終了しています。特典や条件は今とは違うので、最新の内容は Amazon の公式ページで確認してください。"; }

/*! == legacy-parts.css == */
.entry-content .me,
.entry-content .you,
.entry-content .you2 {
position: relative;
width: 82%;
box-sizing: border-box;
-webkit-box-sizing: border-box;
padding: 15px;
border-radius: 6px;
z-index: 1;
}
.entry-content .me {
background-color: #abf18c;
margin: 20px 18% 40px 0;
}
.entry-content .you {
background-color: #dfdce3;
margin: 20px 0 40px 17%;
}
.entry-content .you2 {
background-color: #ffc0cb;
margin: 20px 0 40px 17%;
}
.entry-content .me::before,
.entry-content .you::before,
.entry-content .you2::before {
position: absolute;
content: "";
top: 16px;
width: 13px;
height: 13px;
z-index: 2;
}
.entry-content .me::before {
border-right: 2px solid #abf18c;
border-bottom: 2px solid #abf18c;
background-color: #abf18c;
right: -7px;
transform: rotate(-45deg);
-webkit-transform: rotate(-45deg);
}
.entry-content .you::before {
border-right: 2px solid #dfdce3;
border-bottom: 2px solid #dfdce3;
background-color: #dfdce3;
left: -7px;
transform: rotate(135deg);
-webkit-transform: rotate(135deg);
}
.entry-content .you2::before {
border-right: 2px solid #ffc0cb;
border-bottom: 2px solid #ffc0cb;
background-color: #ffc0cb;
left: -7px;
transform: rotate(135deg);
-webkit-transform: rotate(135deg);
}
.entry-content .me::after,
.entry-content .you::after,
.entry-content .you2::after {
position: absolute;
content: "";
width: 65px;
height: 65px;
top: -10px;
border-radius: 40px;
border: 3px solid #fff;
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
}
.entry-content .me::after {
right: -107px;
}
.entry-content .you::after {
left: -107px;
}
.entry-content .you2::after {
left: -107px;
}
@media screen and (max-width: 620px) {
.entry-content .me,
.entry-content .you,
.entry-content .you2 {
width: 73%
}
.entry-content .me {
margin-right: 27%;
}
.entry-content .you {
margin-left: 27%;
}
.entry-content .you2 {
margin-left: 27%;
}
}
@media screen and (max-width: 478px) {
.entry-content .me::after,
.entry-content .you::after,
.entry-content .you2::after {
width: 55px;
height: 55px;
border-radius: 30px;
}
.entry-content .me::after {
right: -84px;
}
.entry-content .you::after {
left: -84px;
}
.entry-content .you2::after {
left: -84px;
}
}
.nejima::after {background-image:url(https://cdn.profile-image.st-hatena.com/users/smatech/profile.png);}
.nejima2::after {background-image:url(https://cdn.profile-image.st-hatena.com/users/smatech/profile.png);}
.hatena::after {background-image:url(https://cdn-ak.f.st-hatena.com/images/fotolife/s/smatech/20190131/20190131231719.png);}
.hatena2::after {background-image:url(https://cdn-ak.f.st-hatena.com/images/fotolife/s/smatech/20190202/20190202085437.png);}
.ai::after {background-image:url(https://cdn-ak.f.st-hatena.com/images/fotolife/s/smatech/20190210/20190210202516.png);}
.list01 {
counter-reset:number;
list-style-type: none!important;
padding:0.5em;
background: #f9fff5;
}
.list01 li {
position: relative;
padding-left: 30px;
line-height: 1.5em;
padding: 0.5em 0.5em 0.5em 30px;
}
.list01 li:before{
position: absolute;
counter-increment: number;
content: counter(number);
display:inline-block;
background: #4abdac;
color: white;
font-family: 'Avenir','Arial Black','Arial',sans-serif;
font-weight:bold;
font-size: 15px;
border-radius: 50%;
left: 0;
width: 25px;
height: 25px;
line-height: 25px;
text-align: center;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
.list02 {
counter-reset:number;
list-style-type: none!important;
padding:0;
}
.list02 li {
position: relative;
padding: 0.5em;
line-height: 1.5em;
background: #f9fff5;
border-left : solid 35px #4abdac;
margin-bottom: 5px;
}
.list02 li:before{
position: absolute;
counter-increment: number;
content: counter(number);
display:inline-block;
color: white;
font-family: 'Avenir','Arial Black','Arial',sans-serif;
font-weight:bold;
font-size: 15px;
top: 50%;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
left: -35px;
width: 35px;
height: 1em;
line-height: 1;
text-align: center;
}
.list03 {
border: solid 2px #4abdac;
padding: 0.5em;
position: relative;
margin-top: 3em;
}
.list03 li {
line-height: 1.5;
padding: 0.5em 0 0.5em 1.4em;
border-bottom: dashed 1px silver;
list-style-type: none!important;
}
.list03 li:last-of-type {
border-bottom: none;
}
.list03 li:before {
font-family: "FontAwesome";
content: "\f138";
position: absolute;
left : 0.5em;
color: #4abdac;
}
.list03 li:after {
background: #4abdac;
color: #fff;
font-weight: bold;
position: absolute;
left: -2px;
bottom: 100%;
padding: 1px 7px;
content: "POINT";
letter-spacing: 0.05em;
}
.list04 {
border: solid 2px #4abdac;
border-radius: 5px;
padding: 0.5em 1em 0.5em 2.3em;
position: relative;
}
.list04 li {
line-height: 1.5;
padding: 0.5em 0;
list-style-type: none!important;
}
.list04 li:before {
font-family: "FontAwesome";
content: "\f138";
position: absolute;
left : 1em;
color: #4abdac;
}
.list05 {
border: solid 2px #f78733;
padding: 0.5em;
position: relative;
margin-top: 3em;
margin-bottom: 1em;
}
.list05 li {
line-height: 1.5;
padding: 0.5em 0 0.5em 1.4em;
border-bottom: dashed 1px silver;
list-style-type: none!important;
}
.list05 li:last-of-type {
border-bottom: none;
}
.list05 li:before {
font-family: "FontAwesome";
content: "\f138";
position: absolute;
left : 0.5em;
color: #f78733;
}
.list05 li:after {
background: #f78733;
color: #fff;
font-weight: bold;
position: absolute;
left: -2px;
bottom: 100%;
padding: 1px 7px;
content: "こんな人にオススメ";
letter-spacing: 0.05em;
}
.box01 {
position: relative;
margin: 2em 0;
padding: 0.5em 1em;
border: solid 3px #f78733;
}
.box01 .box-title {
position: absolute;
display: inline-block;
top: -27px;
left: -3px;
padding: 0 9px;
height: 25px;
line-height: 25px;
vertical-align: middle;
font-size: 16px;
background: #f78733;
color: #ffffff;
font-weight: bold;
border-radius: 5px 5px 0 0;
}
.box01 p {
margin: 0;
padding: 0;
}
.box01 ul li {
line-height: 1.5;
padding: 0.5em 0;
list-style-type: none!important;
}
.box01 ul li:before {
font-family: "FontAwesome";
content: "\f138";
position: absolute;
font-size: 16px;
left : 1.0em;
color: #f78733;
}
.box02 {
position: relative;
margin: 2em 0;
padding: 0.5em 1em;
border: solid 3px #f78733;
border-radius: 8px;
}
.box02 .box-title {
position: absolute;
display: inline-block;
top: -13px;
left: 10px;
padding: 0 9px;
line-height: 1;
font-size: 17px;
background: #FFF;
color: #f78733;
font-weight: bold;
}
.box02 p {
margin: 0;
padding: 0;
}
.box02 ul li {
line-height: 1.5;
padding: 0.5em 0;
list-style-type: none!important;
}
.box02 ul li:before {
font-family: "FontAwesome";
content: "\f00c";
position: absolute;
font-size: 16px;
left : 1.0em;
color: #f78733;
}
.movie-wrap {
position: relative;
padding-bottom: 56.25%;
height: 0;
overflow: hidden;
}
.movie-wrap iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.cstmreba {
width:98%;
height:auto;
margin:36px auto;
font-family:'Lucida Grande','Hiragino Kaku Gothic ProN',Helvetica, Meiryo, sans-serif;
line-height: 1.5;
word-wrap: break-word;
box-sizing: border-box;
display: block;
}
.cstmreba p {
margin: 0;
padding: 0;
}
.cstmreba a {
transition: 0.8s ;
color:#285EFF;
}
.cstmreba a:hover {
color:#FFCA28;
}
.cstmreba .booklink-box,
.cstmreba .kaerebalink-box{
width: 100%;
background-color: #fafafa;
overflow: hidden;
border-radius: 0px;
box-sizing: border-box;
padding: 12px 8px;
box-shadow: 0px 2px 5px 0 rgba(0,0,0,.26);
}
.cstmreba .booklink-image,
.cstmreba .kaerebalink-image{
width:150px;
float:left;
margin:0 14px 0 0;
text-align: center;
background: #fff;
}
.cstmreba .booklink-image a,
.cstmreba .kaerebalink-image a{
width:100%;
display:block;
}
.cstmreba .booklink-image a img,
.cstmreba .kaerebalink-image a img{
margin:0 ;
padding: 0;
text-align:center;
background: #fff;
}
.cstmreba .booklink-info,.cstmreba .kaerebalink-info{
overflow:hidden;
line-height:170%;
color: #333;
}
.cstmreba .booklink-info a,
.cstmreba .kaerebalink-info a{
text-decoration: none;
}
.cstmreba .booklink-name>a,
.cstmreba .kaerebalink-name>a{
border-bottom: 1px solid ;
font-size:16px;
}
.cstmreba .booklink-powered-date,
.cstmreba .kaerebalink-powered-date{
font-size:10px;
line-height:150%;
}
.cstmreba .booklink-powered-date a,
.cstmreba .kaerebalink-powered-date a{
color:#333;
border-bottom: none ;
}
.cstmreba .booklink-powered-date a:hover,
.cstmreba .kaerebalink-powered-date a:hover{
color:#333;
border-bottom: 1px solid #333 ;
}
.cstmreba .booklink-detail,.cstmreba .kaerebalink-detail{
font-size:12px;
}
.cstmreba .kaerebalink-link1 div img,.cstmreba .booklink-link2 div img{
display:none !important;
}
.cstmreba .kaerebalink-link1, .cstmreba .booklink-link2{
display: inline-block;
width: 100%;
margin-top: 5px;
}
.cstmreba .booklink-link2>div,
.cstmreba .kaerebalink-link1>div{
float:left;
width:24%;
min-width:128px;
margin:0.5%;
}
.cstmreba .booklink-link2 a,
.cstmreba .kaerebalink-link1 a{
width: 100%;
display: inline-block;
text-align: center;
box-sizing: border-box;
margin: 1px 0;
padding:3% 0.5%;
border-radius: 8px;
font-size: 13px;
font-weight: bold;
line-height: 180%;
color: #fff;
box-shadow: 0px 2px 4px 0 rgba(0,0,0,.26);
}
.cstmreba .kaerebalink-link1 .shoplinkyahoo a {background:#ff0033; border:2px solid #ff0033; letter-spacing:normal;}
.cstmreba .kaerebalink-link1 .shoplinkbellemaison a { background:#84be24 ; border: 2px solid #84be24;}
.cstmreba .kaerebalink-link1 .shoplinkcecile a { background:#8d124b; border: 2px solid #8d124b;}
.cstmreba .kaerebalink-link1 .shoplinkwowma a { background:#ea5404; border: 2px solid #ea5404;}
.cstmreba .kaerebalink-link1 .shoplinkkakakucom a {background:#314995; border: 2px solid #314995;}
.cstmreba .booklink-link2 .shoplinkkindle a { background:#007dcd; border: 2px solid #007dcd;}
.cstmreba .booklink-link2 .shoplinkrakukobo a { background:#bf0000; border: 2px solid #bf0000;}
.cstmreba .booklink-link2  .shoplinkbk1 a { background:#0085cd; border: 2px solid #0085cd;}
.cstmreba .booklink-link2 .shoplinkehon a { background:#2a2c6d; border: 2px solid #2a2c6d;}
.cstmreba .booklink-link2 .shoplinkkino a { background:#003e92; border: 2px solid #003e92;}
.cstmreba .booklink-link2 .shoplinkebj a { background:#f8485e; border: 2px solid #f8485e;}
.cstmreba .booklink-link2 .shoplinktoshokan a { background:#333333; border: 2px solid #333333;}
.cstmreba .kaerebalink-link1 .shoplinkamazon a,
.cstmreba .booklink-link2 .shoplinkamazon a {
background:#FF9901;
border: 2px solid #ff9901;
}
.cstmreba .kaerebalink-link1 .shoplinkrakuten a,
.cstmreba .booklink-link2 .shoplinkrakuten a {
background: #bf0000;
border: 2px solid #bf0000;
}
.cstmreba .kaerebalink-link1 .shoplinkseven a,
.cstmreba .booklink-link2 .shoplinkseven a {
background:#225496;
border: 2px solid #225496;
}
.cstmreba .booklink-link2 a:hover,
.cstmreba .kaerebalink-link1 a:hover{
background: #fff;
}
.cstmreba .kaerebalink-link1 .shoplinkyahoo a:hover {color:#ff0033;}
.cstmreba .kaerebalink-link1 .shoplinkbellemaison a:hover { color:#84be24 ; }
.cstmreba .kaerebalink-link1 .shoplinkcecile a:hover { color:#8d124b; }
.cstmreba .kaerebalink-link1 .shoplinkwowma a:hover { color:#ea5404; }
.cstmreba .kaerebalink-link1 .shoplinkkakakucom a:hover {color:#314995;}
.cstmreba .booklink-link2 .shoplinkkindle a:hover { color:#007dcd;}
.cstmreba .booklink-link2 .shoplinkrakukobo a:hover { color:#bf0000; }
.cstmreba .booklink-link2 .shoplinkbk1 a:hover { color:#0085cd; }
.cstmreba .booklink-link2 .shoplinkehon a:hover { color:#2a2c6d; }
.cstmreba .booklink-link2 .shoplinkkino a:hover { color:#003e92; }
.cstmreba .booklink-link2 .shoplinkebj a:hover { color:#f8485e; }
.cstmreba .booklink-link2 .shoplinktoshokan a:hover { color:#333333; }
.cstmreba .kaerebalink-link1 .shoplinkamazon a:hover,
.cstmreba .booklink-link2 .shoplinkamazon a:hover {
color:#FF9901; }
.cstmreba .kaerebalink-link1 .shoplinkrakuten a:hover,
.cstmreba .booklink-link2 .shoplinkrakuten a:hover {
color: #bf0000; }
.cstmreba .kaerebalink-link1 .shoplinkseven a:hover,
.cstmreba .booklink-link2 .shoplinkseven a:hover {
color:#225496;}
.cstmreba .booklink-footer {
clear:both;
}
@media screen and (max-width:768px){
.cstmreba .booklink-image,
.cstmreba .kaerebalink-image{
width:100%;
float:none;
}
.cstmreba .booklink-link2>div,
.cstmreba .kaerebalink-link1>div{
width: 32.33%;
margin: 0.5%;
}
.cstmreba .booklink-info,
.cstmreba .kaerebalink-info{
text-align:center;
padding-bottom: 1px;
}
}
@media screen and (max-width:480px){
.cstmreba .booklink-link2>div,
.cstmreba .kaerebalink-link1>div{
width: 49%;
margin: 0.5%;
}
}
.p-cv-btn-wrap *{
margin:0 !important;
padding:0 !important;
box-sizing: border-box;
}
.p-cv-btn-wrap{
background:#f7f7f7;
padding:1.5em !important;
margin: 0 0 2em !important;
font-size:16px;
line-height:1.8;
}
.p-cv-btn-wrap ul,.p-cv-btn-wrap a,.p-cv-note{
max-width:350px;
margin: auto !important;
border:none;
}
.p-cv-btn-wrap ul li{
font-weight:500;
list-style:none;
font-size:0.9em;
position:relative;
padding-left:1.5em !important;
}
.p-cv-btn-wrap ul li:before{
font-family: "Font Awesome 5 Free";
content: "\f00c" !important;
font-weight:600;
color:#1d89b5;
position:absolute;
left: 0 !important;
top: 0 !important;
width: 0 !important;
height: 0 !important;
}
.p-cv-btn a{
color:#fff;
text-decoration:none !important;
background:#489548;
border-bottom: solid 4px #61841f;
padding: 0.5em 1em !important;
border-radius: 7px;
margin: 0.3em auto !important;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.p-cv-btn:hover{
opacity:0.9;
}
.p-cv-btn a:active {
-webkit-transform: translateY(4px);
transform: translateY(4px);
border-bottom: none;
}
.p-cv-btn .p-cv-em{
font-size:0.9em;
line-height: 1.3;
text-align:center;
font-weight:600;
display:block;
color:#489548;
background:#fff;
padding: 5px 10px !important;
margin: 2px 10px 0px 0 !important;
border-radius: 30px;
min-width: 55px;
max-width: 80px;
}
.p-cv-btn .p-cv-text{
font-size:0.9em;
font-weight: 600;
color:#fff;
letter-spacing: 1px;
border-left: 1px solid #fff;
line-height: 25px;
margin: 0.6em auto 0.6em 0 !important;
padding: 0 0.6em 0 1em !important;
}
.p-cv-btn i,.p-cv-btn svg{
color:#fff;
min-width:22px;
}
.p-cv-url-wrap{
font-size: 0.8em !important;
max-width: 350px;
margin: 0 auto 0.5em !important;
display: block;
}
.p-cv-url-wrap a{
color: #1a0dab !important;
text-decoration:underline !important;
}
.p-cv-btn-wrap .p-cv-note{
font-size:0.9em;
border: 1px solid #4ABDAC;
margin-top:0.5em !important;
padding:0.5em 1em !important;
}
.sidebar .p-cv-btn-wrap{
background:#fff;
box-shadow: 0px 0px 5px rgba(0,0,0,0.1);
}
.p-cv-btn-img{
margin:0 auto !important;
text-align:center;
max-width:350px;
display:block;
}
@media screen and (max-width: 320px){
.p-cv-btn-wrap{
padding:1em !important;
}
}
.entry-content .l-border { box-sizing: border-box; max-width: calc(100% - 30px); }