.blog-detail { padding: 58px 24px 234px; background: #fff; color: #222; }
.blog-detail__header, .blog-detail__content, .blog-detail__navigation { max-width: var(--container-max); margin-inline: auto; }
.blog-detail__header h1 { margin: 0 0 14px; font-size: clamp(25px, 3vw, 34px); line-height: 1.5; letter-spacing: .04em; }
.blog-detail__header time { display: inline-block; min-width: 112px; padding: 6px 14px; background: #2f765e; color: #fff; font-size: 12px; text-align: center; }
.blog-detail__content { margin-top: 26px; }
.blog-detail__hero { margin: 0 0 34px; aspect-ratio: 16 / 8.6; overflow: hidden; }.blog-detail__hero img { width: 100%; height: 100%; object-fit: cover; display: block; }
.blog-detail__text { margin: 0 0 54px; }.blog-detail__text p, .blog-detail__columns p { margin: 0 0 13px; font-size: 14px; line-height: 2; }
.blog-detail__columns { margin-bottom: 44px; display: grid; grid-template-columns: 1fr 1fr; gap: 38px; align-items: start; }.blog-detail__columns img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.blog-content-heading { color: #222; letter-spacing: .035em; }
.blog-content-heading--h2 { margin: 72px 0 30px; padding: 15px 20px; border-left: 5px solid #2f765e; background: #f2f3f0; font-size: 25px; }
.blog-content-heading--h3 { margin: 46px 0 20px; padding-bottom: 10px; border-bottom: 2px solid #2f765e; font-size: 20px; }
.blog-content-heading--h4 { margin: 32px 0 15px; padding-left: 14px; border-left: 3px solid #8aa99c; font-size: 17px; }
.blog-content-list { margin: 0 0 38px; padding: 24px 30px 24px 54px; border-radius: 10px; background: #f6f6f4; list-style: disc; }.blog-content-list li { margin: 7px 0; padding-left: 5px; font-size: 14px; }.blog-content-list li::marker { color: #2f765e; }.blog-content-list--ordered { list-style: decimal; }.blog-content-list--ordered li::marker { font-weight: 700; }
.blog-content-quote { position: relative; margin: 46px 0; padding: 30px 36px 26px 62px; border-left: 4px solid #2f765e; background: #f6f6f4; }.blog-content-quote::before { content: "“"; position: absolute; top: 5px; left: 18px; color: #a9c1b7; font-family: Georgia, serif; font-size: 62px; line-height: 1; }.blog-content-quote blockquote { margin: 0; font-size: 16px; line-height: 1.9; }.blog-content-quote figcaption { margin-top: 12px; color: #777; font-size: 12px; text-align: right; }
.blog-content-columns { margin: 38px 0; display: grid; gap: 18px; }.blog-content-columns--2 { grid-template-columns: repeat(2, 1fr); }.blog-content-columns--3 { grid-template-columns: repeat(3, 1fr); }.blog-content-columns section { padding: 26px; border: 1px solid #e1e3df; border-radius: 10px; background: #fff; }.blog-content-columns h3 { margin: 0 0 10px; color: #2f765e; font-size: 17px; }.blog-content-columns p { margin: 0; font-size: 13px; line-height: 1.85; }
.blog-content-note { margin: 32px 0; padding: 22px 26px; border-radius: 8px; border-left: 5px solid #2f765e; background: #edf5f1; }.blog-content-note strong { display: block; margin-bottom: 5px; }.blog-content-note p { margin: 0; font-size: 13px; line-height: 1.8; }.blog-content-note--warning { border-color: #d28a3d; background: #fff5e9; }
.blog-content-link { margin: 26px 0; }.blog-content-link a { display: inline-flex; align-items: center; gap: 9px; color: #2f765e; font-weight: 700; text-decoration: underline; text-underline-offset: 5px; }.blog-content-link svg { transition: transform .2s ease; }.blog-content-link a:hover svg { transform: translateX(3px); }
.blog-content-link-card { margin: 32px 0; min-height: 126px; display: grid; grid-template-columns: 180px 1fr auto; align-items: center; gap: 24px; overflow: hidden; border: 1px solid #dfe2de; border-radius: 12px; background: #fff; transition: transform .2s ease, box-shadow .2s ease; }.blog-content-link-card:hover { transform: translateY(-3px); box-shadow: 0 12px 25px rgba(20,30,25,.1); }.blog-content-link-card img { width: 100%; height: 100%; object-fit: cover; }.blog-content-link-card > span { display: flex; flex-direction: column; gap: 5px; }.blog-content-link-card strong { font-size: 17px; }.blog-content-link-card small { color: #666; line-height: 1.7; }.blog-content-link-card > svg { margin-right: 24px; color: #2f765e; transition: transform .2s ease; }.blog-content-link-card:hover > svg { transform: translateX(3px); }
.blog-content-buttons { margin: 38px 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; }.blog-content-button { min-width: 210px; min-height: 54px; padding: 10px 22px; border: 1px solid #2f765e; border-radius: 999px; display: inline-flex; justify-content: center; align-items: center; gap: 12px; font-size: 14px; font-weight: 700; transition: transform .2s ease, background .2s ease, color .2s ease; }.blog-content-button:hover { transform: translateY(-2px); }.blog-content-button--primary { background: #2f765e; color: #fff; }.blog-content-button--primary:hover { background: #245e4b; }.blog-content-button--secondary { border-color: #222; background: #222; color: #fff; }.blog-content-button--secondary:hover { background: #444; }.blog-content-button--outline { background: #fff; color: #2f765e; }.blog-content-button--outline:hover,.blog-content-button--outline:focus-visible { background: #2f765e; color: #fff; }
.blog-content-table-wrap { margin: 40px 0; overflow-x: auto; }.blog-content-table { width: 100%; border-collapse: collapse; min-width: 600px; font-size: 13px; }.blog-content-table th, .blog-content-table td { padding: 15px 18px; border: 1px solid #dfe2de; text-align: left; }.blog-content-table th { background: #2f765e; color: #fff; }.blog-content-table tbody tr:nth-child(even) { background: #f6f6f4; }
.blog-entry-content > * { max-width: 100%; }
.blog-entry-content h1,.blog-entry-content h2,.blog-entry-content h3,.blog-entry-content h4,.blog-entry-content h5,.blog-entry-content h6 { color:#222; letter-spacing:.035em; line-height:1.55; }
.blog-entry-content h1 { margin:72px 0 30px; font-size:30px; }
.blog-entry-content h2,.blog-entry-content .is-style-okamoto-section { margin:72px 0 30px; padding:15px 20px; border-left:5px solid #2f765e; background:#f2f3f0; font-size:25px; }
.blog-entry-content h3,.blog-entry-content .is-style-okamoto-subsection { margin:46px 0 20px; padding-bottom:10px; border-bottom:2px solid #2f765e; font-size:20px; }
.blog-entry-content h4,.blog-entry-content .is-style-okamoto-minor { margin:32px 0 15px; padding-left:14px; border-left:3px solid #8aa99c; font-size:17px; }
.blog-entry-content h5 { margin:28px 0 12px; color:#2f765e; font-size:15px; }
.blog-entry-content h6 { margin:24px 0 10px; font-size:14px; text-transform:none; }
.blog-entry-content p { font-size:14px; line-height:2; }
.blog-entry-content .is-style-okamoto-lead { margin:0 0 34px; font-size:17px; font-weight:500; line-height:2; }
.blog-entry-content .is-style-okamoto-small { color:#666; font-size:12px; }
.blog-entry-content ul,.blog-entry-content ol { margin:0 0 38px; padding:24px 30px 24px 54px; border-radius:10px; background:#f6f6f4; }
.blog-entry-content li { margin:7px 0; padding-left:5px; font-size:14px; line-height:1.8; }
.blog-entry-content li::marker { color:#2f765e; font-weight:700; }
.blog-entry-content .is-style-okamoto-check-list { list-style:none; padding-left:30px; }
.blog-entry-content .is-style-okamoto-check-list li::before { content:"✓"; margin-right:10px; color:#2f765e; font-weight:700; }
.blog-entry-content blockquote,.blog-entry-content .is-style-okamoto-quote { position:relative; margin:46px 0; padding:30px 36px 26px 62px; border-left:4px solid #2f765e; background:#f6f6f4; }
.blog-entry-content blockquote::before { content:"“"; position:absolute; top:5px; left:18px; color:#a9c1b7; font-family:Georgia,serif; font-size:62px; line-height:1; }
.blog-entry-content blockquote p { margin:0; font-size:16px; line-height:1.9; }
.blog-entry-content blockquote cite { display:block; margin-top:12px; color:#777; font-size:12px; text-align:right; }
.blog-entry-content .wp-block-group.is-style-okamoto-info,.blog-entry-content .wp-block-group.is-style-okamoto-warning,.blog-entry-content .wp-block-group.is-style-okamoto-card { margin:32px 0; padding:22px 26px; border-radius:8px; border-left:5px solid #2f765e; background:#edf5f1; }
.blog-entry-content .wp-block-group.is-style-okamoto-warning { border-color:#d28a3d; background:#fff5e9; }
.blog-entry-content .wp-block-group.is-style-okamoto-card { border:1px solid #dfe2de; background:#fff; box-shadow:0 8px 22px rgba(20,30,25,.06); }
.blog-entry-content .wp-block-group h2,.blog-entry-content .wp-block-group h3,.blog-entry-content .wp-block-group h4 { margin-top:0; }
.blog-entry-content .wp-block-columns { margin:38px 0; gap:24px; }
.blog-entry-content .wp-block-columns.is-style-okamoto-card-columns > .wp-block-column { padding:24px; border:1px solid #dfe2de; border-radius:10px; background:#fff; }
.blog-entry-content figure { margin:36px 0; }
.blog-entry-content img { max-width:100%; height:auto; vertical-align:top; }
.blog-entry-content p > img { margin:0 12px 18px 0; }
.blog-entry-content .wp-block-image.is-style-okamoto-rounded img { border-radius:12px; }
.blog-entry-content .wp-block-image.is-style-okamoto-frame img { padding:8px; border:1px solid #dfe2de; background:#fff; }
.blog-entry-content figcaption { margin-top:8px; color:#777; font-size:11px; line-height:1.6; text-align:center; }
.blog-entry-content a:not(.wp-block-button__link) { color:#2f765e; text-decoration:underline; text-underline-offset:4px; }
.blog-entry-content .wp-block-buttons { margin:38px 0; gap:14px; }
.blog-entry-content .wp-block-button__link { min-width:210px; padding:15px 28px; border-radius:999px; font-size:14px; font-weight:700; transition:transform .2s ease,background .2s ease; }
.blog-entry-content .wp-block-button__link:hover { transform:translateY(-2px); }
.blog-entry-content .wp-block-button.is-style-okamoto-primary .wp-block-button__link { background:#2f765e; color:#fff; }
.blog-entry-content .wp-block-button.is-style-okamoto-dark .wp-block-button__link { background:#222; color:#fff; }
.blog-entry-content .wp-block-button.is-style-okamoto-outline .wp-block-button__link { border:1px solid #2f765e; background:#fff; color:#2f765e; }
.blog-entry-content .wp-block-button.is-style-okamoto-outline .wp-block-button__link:hover,.blog-entry-content .wp-block-button.is-style-okamoto-outline .wp-block-button__link:focus-visible { background:#2f765e; color:#fff; }
.blog-entry-content .wp-block-table { margin:40px 0; overflow-x:auto; }
.blog-entry-content .wp-block-table table { width:100%; min-width:600px; border-collapse:collapse; font-size:13px; }
.blog-entry-content .wp-block-table th,.blog-entry-content .wp-block-table td { padding:15px 18px; border:1px solid #dfe2de; text-align:left; }
.blog-entry-content .wp-block-table th { background:#2f765e; color:#fff; }
.blog-entry-content .wp-block-table tbody tr:nth-child(even) { background:#f6f6f4; }
.blog-entry-content .wp-block-separator.is-style-okamoto-separator { width:100%; margin:52px 0; border-color:#2f765e; opacity:1; }
.blog-entry-content .wp-block-embed { margin:40px 0; }
.blog-entry-content pre,.blog-entry-content code { font-family:ui-monospace,SFMono-Regular,Menlo,monospace; }
.blog-entry-content pre { margin:36px 0; padding:22px; overflow:auto; border-radius:8px; background:#1b1d1c; color:#fff; font-size:13px; line-height:1.7; }
.blog-detail__navigation { margin-top: 90px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(180px, 240px) minmax(0, 1fr); gap: 24px; align-items: center; }
.blog-detail__navigation-item { min-width: 0; }
.blog-detail__navigation-item--next { text-align: right; }
.blog-detail__navigation a { min-height: 54px; display: inline-flex; align-items: center; justify-content: center; gap: 12px; padding: 10px 22px; border: 2px solid #2f765e; border-radius: 999px; color: #2f765e; font-size: 14px; font-weight: 700; line-height: 1.4; transition: background-color .2s ease, color .2s ease, transform .2s ease, box-shadow .2s ease; }
.blog-detail__navigation a svg { flex: 0 0 auto; transition: transform .2s ease; }
.blog-detail__navigation-item a:hover,
.blog-detail__navigation-item a:focus-visible { background: #2f765e; color: #fff; transform: translateY(-2px); box-shadow: 0 10px 24px rgba(20,45,36,.14); }
.blog-detail__navigation-item--prev a:hover svg,
.blog-detail__navigation-item--prev a:focus-visible svg { transform: translateX(-3px); }
.blog-detail__navigation-item--next a:hover svg,
.blog-detail__navigation-item--next a:focus-visible svg { transform: translateX(3px); }
.blog-detail__back { width: 100%; background: #2f765e; color: #fff !important; }
.blog-detail__back:hover,
.blog-detail__back:focus-visible { background: #fff; color: #2f765e !important; transform: translateY(-2px); box-shadow: 0 0 0 1px #2f765e, 0 10px 24px rgba(20,45,36,.14); }
.blog-detail__back:hover svg,
.blog-detail__back:focus-visible svg { transform: translateX(3px); }
@media (max-width: 767px) {
  .blog-detail { padding: 40px 16px 200px; }.blog-detail__hero { aspect-ratio: 4 / 3; }.blog-detail__columns, .blog-content-columns--2, .blog-content-columns--3 { grid-template-columns: 1fr; gap: 22px; }.blog-detail__text p, .blog-detail__columns p { font-size: 13px; }.blog-content-heading--h2 { margin-top: 52px; font-size: 21px; }.blog-content-heading--h3 { font-size: 18px; }.blog-content-list { padding: 20px 20px 20px 42px; }.blog-content-quote { padding: 54px 22px 22px; }.blog-content-link-card { grid-template-columns: 110px 1fr; gap: 15px; }.blog-content-link-card > svg { display: none; }.blog-content-link-card strong { font-size: 15px; }.blog-content-buttons { display: grid; }.blog-content-button { width: 100%; }.blog-detail__navigation { margin-top: 58px; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px 10px; }.blog-detail__back { grid-column: 1 / -1; grid-row: 1; min-height: 52px; }.blog-detail__navigation-item { grid-row: 2; }.blog-detail__navigation-item a { width: 100%; min-height: 48px; padding: 9px 12px; gap: 8px; font-size: 13px; }.blog-detail__navigation-item--prev a { justify-content: flex-start; }.blog-detail__navigation-item--next a { justify-content: flex-end; }
  .blog-entry-content h1 { font-size:25px; }.blog-entry-content h2,.blog-entry-content .is-style-okamoto-section { margin-top:52px; padding:13px 15px; font-size:21px; }.blog-entry-content h3,.blog-entry-content .is-style-okamoto-subsection { margin-top:38px; font-size:18px; }.blog-entry-content h4,.blog-entry-content .is-style-okamoto-minor { font-size:16px; }.blog-entry-content .is-style-okamoto-lead { font-size:15px; }.blog-entry-content ul,.blog-entry-content ol { padding:20px 20px 20px 42px; }.blog-entry-content blockquote { padding:54px 22px 22px; }.blog-entry-content .wp-block-columns { gap:20px; }.blog-entry-content .wp-block-buttons { display:grid; }.blog-entry-content .wp-block-button,.blog-entry-content .wp-block-button__link { width:100%; }.blog-entry-content .wp-block-group.is-style-okamoto-info,.blog-entry-content .wp-block-group.is-style-okamoto-warning,.blog-entry-content .wp-block-group.is-style-okamoto-card { padding:19px; }
  .blog-entry-content p > img { display:block; width:100%; margin:0 0 18px; }
}