body.optib-preset-blog {
--optib-shadow-sm: 0 1px 2px rgb(0 0 0 / 6%);
--optib-shadow-md: 0 2px 8px rgb(0 0 0 / 8%);
--optib-shadow-lg: 0 8px 24px rgb(0 0 0 / 10%);
} body.optib-preset-blog.optib-no-sidebar .l-grid__main {
grid-column: span 12;
}
body.optib-preset-blog.optib-no-sidebar .l-grid__sidebar {
display: none;
} @media (min-width: 992px) {
body.optib-sidebar-left:not(.optib-no-sidebar) .l-grid__sidebar {
grid-column: 1 / span 3;
grid-row: 1;
}
body.optib-sidebar-left:not(.optib-no-sidebar) .l-grid__main {
grid-column: 4 / span 9;
grid-row: 1;
}
} @media (min-width: 992px) {
body.optib-sidebar-right:not(.optib-no-sidebar) .l-grid__main {
grid-column: span 9;
}
body.optib-sidebar-right:not(.optib-no-sidebar) .l-grid__sidebar {
grid-column: span 3;
}
} @media (min-width: 992px) { body.optib-sidebar-sticky-on:not(.optib-no-sidebar) .l-grid > .l-grid__sidebar {
align-self: start;
}
body.optib-sidebar-sticky-on:not(.optib-no-sidebar) .l-grid > .l-grid__sidebar.optib-sticky-ready {
position: sticky;
bottom: 0; will-change: transform;
}
} body.optib-preset-blog .widget {
padding: 16px;
} @media (min-width: 992px) {
body.optib-preset-blog.search.optib-sidebar-left .row > .l-grid__sidebar {
grid-column: 1 / span 3;
}
body.optib-preset-blog.search.optib-sidebar-left .row > .col-lg-8 {
grid-column: 4 / span 9;
} body.optib-preset-blog.search.optib-sidebar-right .row > .col-lg-8 {
grid-column: span 9;
}
body.optib-preset-blog.search.optib-sidebar-right .row > .l-grid__sidebar {
grid-column: span 3;
}
}  body.optib-preset-blog.single-post .optib-post-width {
width: 100%;
max-width: 798px;
margin-inline: auto;
}
body.optib-preset-blog.single-post .p-post__thumbnail-wrap {
max-width: calc(798px + var(--container-padding) * 2);
margin-inline: auto;
padding-inline: var(--container-padding);
box-sizing: border-box;
}   .optib-breadcrumb-bar + .l-site-content {
margin-top: 0;
} .optib-headline-row {
display: flex;
align-items: stretch;
gap: var(--spacing-md);
margin-bottom: var(--spacing-md);
}
.optib-headline-col {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
justify-content: center;
} .optib-post-topline {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--spacing-sm) var(--spacing-md);
margin-bottom: var(--spacing-xs);
}
.optib-headline-col .p-post__title {
margin: 0;
} .optib-date-badge {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
line-height: 1.15;
min-width: 4.5em;
padding: 0.5em 0.75em;
border-radius: var(--radius-sm, 2px);
background: var(--color-bg-light);
border: 1px solid var(--color-border);
color: var(--color-text);
flex-shrink: 0;
}
.optib-date-badge__m {
font-size: 0.75rem;
color: var(--color-text-muted);
}
.optib-date-badge__d {
font-weight: 700;
font-size: 1.5rem;
}
.optib-date-badge__y {
font-size: 0.6875rem;
color: var(--color-text-muted);
} .optib-cat-badges {
display: flex;
flex-wrap: wrap;
gap: 0.375em;
list-style: none;
margin: 0;
padding: 0;
}
.optib-cat-badge {
display: inline-block;
padding: 2px 8px;
border-radius: 2px;
background: var(--color-primary);
color: #fff;
font-size: 0.75rem;
text-decoration: none;
line-height: 1.6;
}
.optib-cat-badge:hover {
background: color-mix(in srgb, var(--color-primary) 80%, black);
color: #fff;
}
.optib-post-author {
display: inline-flex;
align-items: center;
gap: 0.25em;
font-size: 0.875rem;
color: var(--color-text-muted);
}
.optib-post-author a {
color: inherit;
} body.optib-preset-blog .optib-single-with-sidebar .optib-post-width {
max-width: none;
margin-inline: 0;
}
body.optib-preset-blog .optib-single-with-sidebar .p-post__thumbnail-wrap {
max-width: none;
margin-inline: 0;
padding-inline: 0;
} body.optib-preset-blog #secondary .widget {
margin-bottom: var(--spacing-lg);
padding-bottom: var(--spacing-lg);
border-bottom: 1px solid var(--color-border);
}
body.optib-preset-blog #secondary .widget:last-child {
border-bottom: none;
}
body.optib-preset-blog #secondary .widget-title {
margin: 0 0 var(--spacing-md);
font-size: 1rem;
color: var(--color-text);
} @media (max-width: 767.98px) {
.optib-headline-row {
flex-direction: column;
align-items: stretch;
gap: var(--spacing-sm, 12px);
margin-bottom: 0;
}
.optib-date-badge {
flex-direction: row;
align-items: baseline;
gap: 0.3em;
align-self: flex-start;
min-width: 0;
padding: 0.3em 0.7em;
line-height: 1.2;
font-size: 0.8125rem;
}
.optib-date-badge__y {
order: 1;
font-size: inherit;
color: var(--color-text);
}
.optib-date-badge__y::after {
content: "年";
}
.optib-date-badge__m {
order: 2;
font-size: inherit;
color: var(--color-text);
}
.optib-date-badge__d {
order: 3;
font-size: inherit;
font-weight: 600;
}
.optib-date-badge__d::after {
content: "日";
}
.optib-headline-col .p-post__title {
font-size: 1.375rem;
line-height: 1.45;
}
body.optib-preset-blog.single-post .p-post__thumbnail-wrap {
padding-inline: 0;
}
.wp-block-optib-conversation .wew-conversation-avatar {
width: 64px;
flex-basis: 64px;
}
.wp-block-optib-conversation .wew-conversation-avatar img {
width: 48px;
height: 48px;
}
.wp-block-optib-conversation .wew-conversation-participant-name {
font-size: 0.6875rem;
}
} body.optib-header-sticky-off .l-header {
position: static;
}  body.optib-headers-bar .l-header {
background-color: var(--color-primary);
border-bottom: 0;
color: #fff;
} body.optib-headers-bar .l-header__brand-link,
body.optib-headers-bar .l-header__phrase {
color: #fff;
} body.optib-headers-bar .l-header__nav .c-nav__link {
color: #fff;
} body.optib-headers-bar .l-header__nav .c-nav__link:hover,
body.optib-headers-bar .l-header__nav .c-nav__link:focus-visible {
color: #fff;
opacity: 0.75;
} body.optib-headers-bar .l-header__nav .c-nav__item.has-children > .c-nav__link::after {
border-top-color: #fff;
} body.optib-headers-bar .l-header__nav .c-dropdown__menu {
background-color: #fff;
}
body.optib-headers-bar .l-header__nav .c-dropdown__menu a {
color: var(--color-text);
opacity: 1;
}
body.optib-headers-bar .l-header__nav .c-dropdown__menu a:hover,
body.optib-headers-bar .l-header__nav .c-dropdown__menu a:focus-visible {
color: var(--color-primary);
opacity: 1;
} body.optib-headers-bar .p-search__btn {
color: #fff;
}
body.optib-headers-bar .p-search__btn:hover,
body.optib-headers-bar .p-search__btn:focus-visible {
color: #fff;
opacity: 0.75;
} body.optib-headers-bar .p-search__overlay {
gap: 12px;
padding: 6px 0;
background-color: var(--color-primary);
}
body.optib-headers-bar .p-search__form {
position: relative;
flex: 1;
max-width: 640px;
margin: 0 auto;
} body.optib-headers-bar .p-search__form::before {
content: "";
position: absolute;
top: 50%;
left: 14px;
width: 18px;
height: 18px;
transform: translateY(-50%);
background-color: #8a8a8a;
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.5-3.5'/%3E%3C/svg%3E") center / contain no-repeat;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.5-3.5'/%3E%3C/svg%3E") center / contain no-repeat;
pointer-events: none;
}
body.optib-headers-bar .p-search__input {
height: 40px;
padding: 0 16px 0 42px;
font-size: 15px;
color: var(--color-text, #333);
background-color: #fff;
border: 0;
border-radius: 999px;
box-sizing: border-box;
}
body.optib-headers-bar .p-search__input:focus {
outline: none;
box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.35);
}
body.optib-headers-bar .p-search__input::placeholder {
color: #8a8a8a;
}
body.optib-headers-bar .p-search__close {
color: #fff;
opacity: 0.85;
}
body.optib-headers-bar .p-search__close:hover,
body.optib-headers-bar .p-search__close:focus-visible {
color: #fff;
opacity: 1;
} @media (max-width: 991px) { body.optib-headers-bar .l-header__toggle {
color: #fff;
} body.optib-headers-bar .l-header__mobile-nav {
background-color: color-mix(in srgb, var(--color-primary) 85%, #000);
border-bottom: 0;
} body.optib-headers-bar .c-nav--mobile .c-nav__link {
color: #fff;
border-bottom-color: rgba(255, 255, 255, 0.12);
}
body.optib-headers-bar .c-nav--mobile .c-nav__link:hover,
body.optib-headers-bar .c-nav--mobile .c-nav__link:focus-visible {
color: #fff;
opacity: 0.75;
}
body.optib-headers-bar .c-nav--mobile .c-nav__item.has-children > .c-nav__link::after {
border-top-color: rgba(255, 255, 255, 0.7);
} body.optib-headers-bar .c-nav--mobile .c-dropdown__menu {
position: static;
display: none;
margin: 0 12px 8px;
padding: 4px 0;
background-color: rgba(255, 255, 255, 0.08);
border: 0;
border-radius: 8px;
box-shadow: none;
}
body.optib-headers-bar .c-nav--mobile .c-dropdown__menu a {
display: block;
padding: 12px 20px 12px 28px;
color: rgba(255, 255, 255, 0.9);
font-size: 14px;
font-weight: 500;
border-bottom: 0;
opacity: 1;
}
body.optib-headers-bar .c-nav--mobile .c-dropdown__menu a:hover,
body.optib-headers-bar .c-nav--mobile .c-dropdown__menu a:focus-visible {
color: #fff;
background-color: rgba(255, 255, 255, 0.08);
opacity: 1;
}
body.optib-headers-bar .c-nav--mobile .c-dropdown.is-open > .c-dropdown__menu {
display: block;
} body.optib-headers-bar .c-nav--mobile .c-dropdown.is-open > .c-nav__link .ti-angle-down,
body.optib-headers-bar .c-nav--mobile .c-dropdown.is-open > a .ti-angle-down {
display: inline-block;
transform: rotate(180deg);
} body.optib-headers-bar .c-nav--mobile .c-dropdown__menu .c-dropdown__menu {
margin: 0 8px 4px;
background-color: rgba(255, 255, 255, 0.06);
}
} body.optib-palettes-dark .l-header,
body.optib-palettes-dark .p-search__overlay {
background-color: #111;
}
@media (max-width: 991px) {
body.optib-palettes-dark .l-header__mobile-nav {
background-color: #000;
}
}