/* Generic fallback styling — the original Cocoon theme CSS was not captured by
   Wayback (theme distributed outside wordpress.org, unrecoverable). This restores
   a clean, readable single-column blog layout so the pages are not naked HTML.
   Intentionally minimal and neutral; the article template carries its own typography. */

:root { --accent: #2c6ba0; }

body.body {
  margin: 0;
  color: #333;
  background: #f4f5f7;
  font-family: -apple-system, "Hiragino Kaku Gothic ProN", "Hiragino Sans",
               "Yu Gothic", Meiryo, sans-serif;
  font-size: 16px;
  line-height: 1.8;
}

.wrap { max-width: 1080px; margin: 0 auto; padding: 0 16px; box-sizing: border-box; }

#header-container { background: #fff; border-bottom: 1px solid #e3e3e3; }
.header-in { padding: 14px 16px; }
#header .logo-image img, #header img.logo-image { max-height: 56px; width: auto; }

#navi { background: #333; }
#navi .navi-in { padding: 0; }
#navi ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; }
#navi li a { display: block; padding: 12px 16px; color: #fff; text-decoration: none; font-size: 14px; }
#navi li a:hover { background: rgba(255,255,255,.12); }

/* The article template contains separate desktop and mobile menus. */
#navi .menu-pc { display: flex; }
#navi .menu-mobile { display: none; }

@media screen and (max-width: 834px) {
  #navi .menu-pc { display: none; }
  #navi .menu-mobile { display: flex; }
}

#content { padding: 28px 0; }
#content .wrap { display: flex; gap: 32px; align-items: flex-start; }
#main { flex: 1 1 auto; min-width: 0; background: #fff; padding: 28px; border-radius: 4px; }
#sidebar { flex: 0 0 300px; }
#sidebar .widget { background: #fff; padding: 18px; border-radius: 4px; margin-bottom: 20px; }
@media (max-width: 820px) {
  #content .wrap { display: block; }
  #sidebar { margin-top: 28px; }
}

@media screen and (max-width: 834px) {
  #content { padding: 16px 0; }
  #content .wrap { padding-left: 8px; padding-right: 8px; }
  #main { width: auto; margin: 0; padding: 16px; }
  #sidebar { width: auto; max-width: none; margin: 28px 0 0; padding: 0; }
  #sidebar .widget { width: auto; box-sizing: border-box; }
}

.article { }
.entry-title, h1.entry-title { font-size: 1.7em; line-height: 1.4; margin: 0 0 .8em; color: #1c1c1c; }
.entry-content { word-wrap: break-word; }
.entry-content h2 { font-size: 1.4em; margin: 1.8em 0 .7em; padding: .4em .6em; border-left: 5px solid var(--accent); background: #f0f4f8; }
.entry-content h3 { font-size: 1.2em; margin: 1.5em 0 .6em; padding-bottom: .2em; border-bottom: 2px solid #e3e3e3; }
.entry-content h4 { font-size: 1.05em; margin: 1.3em 0 .5em; }
.entry-content p { margin: 0 0 1.2em; }
.entry-content a { color: var(--accent); }
.entry-content img { max-width: 100%; height: auto; }
.entry-content ul, .entry-content ol { margin: 0 0 1.2em; padding-left: 1.6em; }
.entry-content li { margin: .3em 0; }
.entry-content blockquote { margin: 1.2em 0; padding: .6em 1.2em; border-left: 4px solid #ccc; background: #f7f7f7; color: #555; }
.entry-content table { border-collapse: collapse; width: 100%; margin: 1.2em 0; font-size: .95em; }
.entry-content th, .entry-content td { border: 1px solid #ddd; padding: .6em .8em; text-align: left; }
.entry-content th { background: #f0f4f8; }
.entry-content code { background: #f2f2f2; padding: .1em .35em; border-radius: 3px; font-size: .92em; }
.entry-content hr { border: 0; border-top: 1px solid #e0e0e0; margin: 2em 0; }
img { max-width: 100%; height: auto; }

.eye-catch-wrap img, .eyecatch-image { max-width: 100%; height: auto; display: block; margin: 0 auto 1.2em; }

#footer { background: #2b2b2b; color: #cfcfcf; margin-top: 40px; }
#footer a { color: #cfcfcf; }
.footer-in { padding: 30px 16px; font-size: 13px; }

a { color: var(--accent); }