@charset "UTF-8";

/*
Theme Name: Cocoon Child
Description: Cocoon専用の子テーマ
Theme URI: https://wp-cocoon.com/
Author: わいひら
Author URI: https://nelog.jp/
Template: cocoon-master
Version: 1.1.3
*/

/* ==================================================
   めんどう、やめました。 site design
   ================================================== */
:root {
  --md-bg: #f7f5f0;
  --md-paper: #fffefa;
  --md-text: #303532;
  --md-muted: #717873;
  --md-line: #e3dfd6;
  --md-accent: #61766c;
  --md-accent-dark: #4f6259;
  --md-soft: #edf1ed;
}

html {
  scroll-behavior: smooth;
}

body {
  background: var(--md-bg);
  color: var(--md-text);
  font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Yu Gothic", "YuGothic", "Noto Sans JP", sans-serif;
  letter-spacing: .025em;
}

a {
  color: #506e62;
  text-decoration-thickness: 1px;
  text-underline-offset: .18em;
}

a:hover {
  color: var(--md-accent-dark);
}

/* Header */
.header-container,
.navi,
.mobile-header-menu-buttons {
  background: rgba(255, 254, 250, .98) !important;
  box-shadow: none !important;
}

.header-container-in {
  min-height: 150px;
}

.logo-header {
  padding: 34px 0 22px;
}

.site-name-text {
  color: var(--md-text) !important;
  font-size: clamp(25px, 3vw, 34px);
  font-weight: 600;
  letter-spacing: .08em;
}

.tagline {
  color: var(--md-muted);
  font-size: 13px;
  letter-spacing: .06em;
  margin-top: 8px;
}

.navi {
  border-top: 1px solid var(--md-line);
  border-bottom: 1px solid var(--md-line);
}

.navi-in > ul {
  justify-content: center;
  gap: 6px;
}

.navi-in > ul > li > a {
  color: var(--md-text) !important;
  font-size: 14px;
  font-weight: 500;
  min-height: 52px;
  padding: 0 17px;
}

.navi-in > ul > li > a:hover {
  background: var(--md-soft) !important;
}

.navi-in .item-description,
.navi-in .caption-wrap > .item-description {
  display: none !important;
}

/* Overall layout */
.content {
  margin-top: 42px;
}

.content-in {
  gap: 0;
}

.main {
  background: var(--md-paper);
  border: 0;
  border-radius: 2px;
  box-shadow: 0 1px 0 rgba(48, 53, 50, .04);
}

.single .content-in,
.page .content-in {
  justify-content: center;
}

.single .main,
.page:not(.home) .main {
  width: min(100%, 840px);
  margin: 0 auto;
  padding: clamp(32px, 6vw, 68px);
}

.single .sidebar,
.page:not(.home) .sidebar {
  display: none !important;
}

/* Article typography */
.entry-title {
  color: var(--md-text);
  font-size: clamp(27px, 4vw, 39px);
  font-weight: 650;
  line-height: 1.4;
  letter-spacing: .015em;
  margin-bottom: 14px;
}

.date-tags,
.post-date,
.post-update {
  color: var(--md-muted);
  font-size: 12px;
}

.article {
  color: var(--md-text);
  font-size: 17px;
  line-height: 1.95;
}

.article p {
  margin: 1.45em 0;
}

.article h2 {
  background: transparent !important;
  border: 0 !important;
  border-bottom: 1px solid var(--md-line) !important;
  color: var(--md-text);
  font-size: clamp(23px, 3vw, 30px);
  font-weight: 650;
  line-height: 1.5;
  margin: 3.2em 0 1.25em;
  padding: 0 0 .62em !important;
}

.article h3 {
  background: transparent !important;
  border: 0 !important;
  color: var(--md-text);
  font-size: clamp(19px, 2.5vw, 23px);
  font-weight: 650;
  line-height: 1.55;
  margin: 2.3em 0 .9em;
  padding: 0 !important;
}

.article ul,
.article ol {
  margin: 1.4em 0;
  padding-left: 1.45em;
}

.article li {
  margin: .48em 0;
}

.article blockquote {
  background: var(--md-soft);
  border: 0;
  border-left: 3px solid var(--md-accent);
  color: var(--md-text);
  margin: 2em 0;
  padding: 1.4em 1.6em;
}

.article table {
  border: 1px solid var(--md-line);
  font-size: 15px;
  line-height: 1.65;
}

.article th {
  background: var(--md-soft);
  color: var(--md-text);
}

.article th,
.article td {
  border-color: var(--md-line);
  padding: .8em .9em;
}

.article figcaption {
  color: var(--md-muted);
  font-size: 12px;
  line-height: 1.6;
  margin-top: 8px;
  text-align: left;
}

/* PR notice: visible but quiet */
.article > p:first-child.has-small-font-size {
  background: transparent;
  border-bottom: 1px solid var(--md-line);
  color: var(--md-muted) !important;
  font-size: 12px !important;
  letter-spacing: .02em;
  margin: 0 0 2.1em;
  padding: 0 0 .8em;
}

/* Table of contents */
.toc {
  background: #faf9f5;
  border: 1px solid var(--md-line);
  border-radius: 2px;
  margin: 2.7em 0;
  padding: 1.4em 1.6em;
}

.toc-title {
  color: var(--md-text);
  font-size: 15px;
  font-weight: 650;
  letter-spacing: .06em;
}

.toc a {
  color: var(--md-text);
  text-decoration: none;
}

/* Affiliate and action buttons */
.wp-block-buttons {
  margin: 2.1em 0;
}

.wp-block-button__link,
.article .btn,
.article .ranking-item-link-buttons a {
  background: var(--md-accent) !important;
  border: 1px solid var(--md-accent) !important;
  border-radius: 3px !important;
  box-shadow: none !important;
  color: #fff !important;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.5;
  padding: .85em 1.55em !important;
  transition: background .18s ease, transform .18s ease;
}

.wp-block-button__link:hover,
.article .btn:hover {
  background: var(--md-accent-dark) !important;
  transform: translateY(-1px);
}

/* Remove elements that interrupt reading */
.sns-share,
.sns-share-message,
.sns-follow,
.sns-follow-message,
.author-info,
.comment-area,
.related-entry-heading + .sns-buttons,
.widget_archive,
.widget_categories {
  display: none !important;
}

/* Related articles */
.related-entry-heading {
  border-top: 1px solid var(--md-line);
  font-size: 20px;
  margin-top: 3.5em;
  padding-top: 1.5em;
}

.related-entry-card-wrap {
  border-bottom: 1px solid var(--md-line);
  padding: 15px 0;
}

.related-entry-card-title {
  color: var(--md-text);
  font-size: 16px;
  line-height: 1.6;
}

.related-entry-card-snippet {
  color: var(--md-muted);
  font-size: 13px;
  line-height: 1.7;
}

/* Home page */
.home .content {
  margin-top: 34px;
}

.home .main {
  background: transparent;
  box-shadow: none;
  padding: 0;
  width: 100%;
}

.home .entry-title {
  display: none;
}

.home .article {
  font-size: 16px;
}

.home .article > .wp-block-group:first-child {
  background: #f0ede5;
  border: 0;
  padding: clamp(48px, 8vw, 92px) clamp(24px, 7vw, 80px);
}

.home .article > .wp-block-group:first-child h1 {
  font-size: clamp(31px, 5vw, 50px);
  line-height: 1.45;
  letter-spacing: .025em;
}

.home .wp-block-columns {
  gap: 22px;
}

.home .wp-block-column {
  background: var(--md-paper);
  border: 1px solid var(--md-line);
  padding: clamp(22px, 3vw, 34px);
}

.home .wp-block-column h3 {
  margin-top: 0;
}

.home .wp-block-column a {
  text-decoration: none;
}

.home .wp-block-latest-posts li {
  border-bottom: 1px solid var(--md-line);
  margin: 0;
  padding: 18px 2px;
}

.home .wp-block-latest-posts__post-title {
  color: var(--md-text);
  font-size: 17px;
  font-weight: 600;
  line-height: 1.65;
  text-decoration: none;
}

.home .wp-block-latest-posts__post-date {
  color: var(--md-muted);
  font-size: 12px;
  margin-top: 4px;
}

/* Footer */
.footer {
  background: #ece9e1;
  color: var(--md-muted);
  margin-top: 70px;
}

.footer-in {
  padding-top: 38px;
  padding-bottom: 30px;
}

.footer a {
  color: var(--md-text);
}

.footer-bottom-logo .site-name-text {
  font-size: 18px;
}

.footer-bottom-content {
  font-size: 12px;
}

/* Tablet and phone */
@media screen and (max-width: 834px) {
  #navi {
    display: none;
  }

  .header-container-in {
    min-height: 104px;
  }

  .logo-header {
    padding: 24px 16px 18px;
  }

  .tagline {
    font-size: 11px;
  }

  .content {
    margin-top: 16px;
    padding: 0 12px;
  }

  .single .main,
  .page:not(.home) .main {
    padding: 30px 24px 42px;
  }

  .article {
    font-size: 16px;
    line-height: 1.9;
  }

  .entry-title {
    font-size: 26px;
    line-height: 1.45;
  }

  .article h2 {
    margin-top: 2.7em;
  }

  .home .article > .wp-block-group:first-child {
    padding: 46px 24px;
  }

  .home .wp-block-columns {
    gap: 14px;
  }

  .footer {
    margin-top: 48px;
  }
}

@media screen and (max-width: 480px) {
  body {
    letter-spacing: .015em;
  }

  .site-name-text {
    font-size: 24px;
  }

  .content {
    padding: 0 8px;
  }

  .single .main,
  .page:not(.home) .main {
    padding: 26px 19px 38px;
  }

  .entry-title {
    font-size: 24px;
  }

  .article p {
    margin: 1.35em 0;
  }

  .article h2 {
    font-size: 22px;
  }

  .article h3 {
    font-size: 19px;
  }

  .article table {
    font-size: 13px;
  }

  .article th,
  .article td {
    padding: .65em .6em;
  }

  .toc {
    padding: 1.2em 1.25em;
  }

  .wp-block-button,
  .wp-block-button__link {
    width: 100%;
  }

  .wp-block-button__link {
    text-align: center;
  }

  .home .article > .wp-block-group:first-child h1 {
    font-size: 30px;
  }

  .home .wp-block-column {
    padding: 22px 20px;
  }
}