@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.4
*/

:root {
  --site-ink: #263238;
  --site-muted: #657178;
  --site-line: #dfe5e7;
  --site-bg: #f6f8f8;
  --site-surface: #ffffff;
  --site-primary: #087f8c;
  --site-primary-dark: #075d67;
  --site-accent: #f3b33d;
}

body {
  background: var(--site-bg);
  color: var(--site-ink);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Hiragino Kaku Gothic ProN",
    "Hiragino Sans", "Yu Gothic", Meiryo, sans-serif;
  line-height: 1.85;
}

html,
body {
  overflow-x: hidden;
}

a {
  color: var(--site-primary);
}

.header-container,
.footer {
  background: var(--site-surface);
}

.header-container {
  border-bottom: 1px solid var(--site-line);
  box-shadow: 0 2px 12px rgb(38 50 56 / 6%);
}

@media screen and (min-width: 835px) {
  .header {
    height: 430px !important;
  }

  .header-in {
    height: 100%;
  }
}

.site-name-text {
  color: var(--site-ink);
  font-weight: 700;
}

.tagline {
  color: var(--site-muted);
}

.navi,
.navi-in > ul .sub-menu {
  background: var(--site-surface);
}

.navi-in a {
  color: var(--site-ink);
  font-weight: 600;
}

.navi-in a:hover {
  background: #edf7f8;
  color: var(--site-primary-dark);
}

.content {
  margin-top: 28px;
}

.main,
.sidebar {
  background: var(--site-surface);
  border: 1px solid var(--site-line);
  border-radius: 6px;
  box-shadow: 0 8px 26px rgb(38 50 56 / 5%);
}

.entry-card-wrap {
  border-bottom: 1px solid var(--site-line);
  padding: 22px 8px;
}

.entry-card-wrap:last-child {
  border-bottom: 0;
}

.entry-card-title {
  color: var(--site-ink);
  font-size: 1.15rem;
  line-height: 1.55;
}

.entry-card-snippet,
.post-date,
.post-update,
.entry-card-info {
  color: var(--site-muted);
}

.article h1 {
  color: var(--site-ink);
  font-size: clamp(1.7rem, 4vw, 2.25rem);
  line-height: 1.45;
}

.article h2 {
  background: #edf7f8;
  border-left: 5px solid var(--site-primary);
  color: var(--site-ink);
  padding: 0.75em 0.9em;
}

.article h3 {
  border-bottom: 2px solid var(--site-line);
  padding-bottom: 0.45em;
}

.beginner-welcome {
  background: var(--site-primary-dark);
  box-sizing: border-box;
  color: #fff;
  margin: 0 0 28px;
  padding: 34px 38px;
  text-align: left;
  width: 100%;
}

.widget-index-top-title {
  display: none;
}

.beginner-welcome__eyebrow {
  color: #bde8ec;
  font-size: 0.78rem;
  font-weight: 700;
  margin: 0 0 8px;
  text-transform: uppercase;
}

.beginner-welcome h2 {
  background: none;
  border: 0;
  color: #fff;
  font-size: clamp(1.6rem, 4vw, 2.25rem);
  margin: 0 0 12px;
  padding: 0;
}

.beginner-welcome p {
  margin: 0 0 20px;
}

.beginner-welcome__button {
  background: var(--site-accent);
  color: #2f2a1f;
  display: inline-block;
  font-weight: 700;
  padding: 11px 20px;
  text-decoration: none;
}

.beginner-welcome__button:hover {
  background: #ffd06d;
  color: #2f2a1f;
}

.welcome-note {
  background: #f3f8f8;
  border-left: 4px solid var(--site-primary);
  margin-top: 2em;
  padding: 20px 24px;
}

.welcome-note h3,
.welcome-note p {
  margin-top: 0;
}

.widget-title {
  border-bottom: 2px solid var(--site-primary);
  color: var(--site-ink);
  padding-bottom: 8px;
}

.pagination-next-link,
.page-numbers {
  border-radius: 4px;
}

.page-numbers.current,
.pagination-next-link:hover {
  background: var(--site-primary);
  color: #fff;
}

.footer {
  border-top: 1px solid var(--site-line);
  color: var(--site-muted);
}

@media screen and (max-width: 834px) {
  html,
  body,
  .container,
  .wrap,
  .header-container,
  .header-container-in {
    box-sizing: border-box;
    min-width: 0 !important;
    width: 100% !important;
  }

  .content {
    margin-top: 16px;
  }

  .main,
  .sidebar {
    border-left: 0;
    border-radius: 0;
    border-right: 0;
  }

  .beginner-welcome {
    padding: 28px 22px;
  }

  #navi-in > ul.menu-pc {
    display: none !important;
  }

  #navi-in > ul.menu-mobile {
    display: grid !important;
    grid-template-columns: repeat(2, 50vw);
    width: 100% !important;
  }

  #navi-in > ul.menu-mobile > li {
    min-width: 0 !important;
    width: auto !important;
  }

  #navi-in > ul.menu-mobile a {
    box-sizing: border-box;
    padding: 12px 8px;
    white-space: normal;
  }

  #navi-in > ul.menu-mobile .item-label {
    overflow-wrap: anywhere;
    word-break: break-all;
    white-space: normal !important;
  }

  #navi-in {
    max-width: 100vw !important;
    width: 100vw !important;
  }

  .content-in,
  .main,
  .recommended-in {
    box-sizing: border-box;
    max-width: 100% !important;
    width: 100% !important;
  }

  .recommended .navi-entry-cards {
    display: grid !important;
    gap: 8px;
    grid-template-columns: repeat(2, calc((100vw - 24px) / 2));
    padding: 8px;
    width: 100% !important;
  }

  .recommended .navi-entry-card-link,
  .recommended .navi-entry-card,
  .recommended .navi-entry-card-thumb {
    margin: 0 !important;
    min-width: 0 !important;
    width: auto !important;
  }

  .recommended .navi-entry-card-image {
    height: 128px;
    object-fit: cover;
    width: 100%;
  }

  .widget-index-top {
    box-sizing: border-box;
    max-width: calc(100vw - 32px) !important;
    width: calc(100vw - 32px) !important;
  }

  .beginner-welcome h2,
  .beginner-welcome p {
    overflow-wrap: anywhere;
    white-space: normal !important;
  }
}

@media screen and (max-width: 480px) {
  .article h1 {
    font-size: 1.65rem;
  }

  .entry-card-title {
    font-size: 1.05rem;
  }
}