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

/************************************
** 子テーマ用のスタイルを書く
************************************/
/* Laugh〜ママの保健室〜 */
:root {
  --laugh-ink: #36423b;
  --laugh-muted: #6b746e;
  --laugh-sage: #6f8e78;
  --laugh-sage-soft: #eef3ee;
  --laugh-cream: #fffaf2;
  --laugh-terra: #d18b6b;
  --laugh-line: #e6e2da;
}

body {
  color: var(--laugh-ink);
  background: #fcfbf7;
  font-family: "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif;
  line-height: 1.9;
}

h1, h2, h3, h4, h5, h6,
.site-name-text {
  font-family: "Yu Mincho", "Hiragino Mincho ProN", serif;
  color: var(--laugh-ink);
  letter-spacing: 0.02em;
}

a {
  color: #567563;
  text-decoration-color: rgba(86, 117, 99, 0.35);
  text-underline-offset: 0.18em;
}

a:hover {
  color: var(--laugh-terra);
}

.header-container,
.header-container-in {
  background: var(--laugh-cream);
}

.site-name-text {
  font-weight: 600;
}

.navi,
.navi-in > ul {
  background: var(--laugh-sage);
}

.navi-in a,
.navi-in a:hover {
  color: #fff;
}

.navi-in a:hover {
  background: rgba(255, 255, 255, 0.12);
}

/* 固定ページは本文内の見出しを使い、Cocoon標準のページタイトル等を出さない */
.page .article-header,
.page .article-footer .sns-share,
.page .article-footer .sns-follow {
  display: none;
}

.page .entry-content {
  margin-top: 0;
}

/* トップページは1カラムで広く使う */
.home .content-in {
  display: block;
}

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

.home .sidebar {
  display: none;
}

.home .entry-content > .wp-block-group:not(.alignfull) {
  max-width: 1040px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 24px;
  padding-right: 24px;
}

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

.home .wp-block-column {
  background: rgba(255, 255, 255, 0.82);
  border: 1px solid var(--laugh-line);
  border-radius: 18px;
  padding: 28px 24px;
  box-shadow: 0 8px 28px rgba(54, 66, 59, 0.05);
}

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

.wp-block-button__link {
  transition: transform .18s ease, box-shadow .18s ease, opacity .18s ease;
}

.wp-block-button__link:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(54, 66, 59, 0.14);
  opacity: .96;
}

.page:not(.home) .entry-content {
  max-width: 820px;
  margin-left: auto;
  margin-right: auto;
}

.page:not(.home) .entry-content > h1 {
  margin-bottom: 1.2em;
  font-size: clamp(30px, 4vw, 42px);
}

.page:not(.home) .entry-content > h2 {
  margin-top: 2.2em;
  padding-bottom: .35em;
  border-bottom: 2px solid var(--laugh-sage-soft);
}

.footer-bottom {
  color: var(--laugh-muted);
}

@media screen and (max-width: 834px) {
  .home .wp-block-heading[style*="font-size:48px"] {
    font-size: 36px !important;
  }

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

@media screen and (max-width: 480px) {
  body {
    line-height: 1.85;
  }

  .home .wp-block-heading[style*="font-size:48px"] {
    font-size: 30px !important;
  }

  .home .wp-block-group[style*="padding-top:96px"] {
    padding-top: 64px !important;
    padding-bottom: 64px !important;
  }
}

/************************************
** 記事の共有ボタン
************************************/
/* 記事上部の共有ボタンは出さず、記事末尾だけを小さく表示 */
.single-post .sns-share.ss-top {
  display: none !important;
}

.single-post .sns-share.ss-bottom {
  margin: 34px 0 8px;
  padding-top: 16px;
  border-top: 1px solid var(--laugh-line);
}

.single-post .sns-share.ss-bottom .sns-share-message {
  margin: 0 0 8px;
  color: #8a918d;
  font-size: 12px;
  font-weight: 400;
  letter-spacing: .04em;
}

.single-post .sns-share.ss-bottom .sns-share-buttons {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 8px;
}

/* X・LINE・コピー以外は非表示 */
.single-post .sns-share.ss-bottom .sns-button {
  display: none !important;
}

.single-post .sns-share.ss-bottom .twitter-button,
.single-post .sns-share.ss-bottom .line-button,
.single-post .sns-share.ss-bottom .copy-button {
  display: inline-flex !important;
  flex: 0 0 auto !important;
  width: auto !important;
  min-width: 0 !important;
  height: auto !important;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 6px 10px !important;
  border: 1px solid #d9dedb !important;
  border-radius: 999px !important;
  background: transparent !important;
  color: #77807a !important;
  box-shadow: none !important;
  font-size: 12px !important;
  line-height: 1.2 !important;
  opacity: .86;
}

.single-post .sns-share.ss-bottom .twitter-button:hover,
.single-post .sns-share.ss-bottom .line-button:hover,
.single-post .sns-share.ss-bottom .copy-button:hover {
  background: #f4f6f3 !important;
  border-color: #cbd3cd !important;
  color: #56615a !important;
  opacity: 1;
  transform: none !important;
}

.single-post .sns-share.ss-bottom .button-caption {
  font-size: 12px !important;
  font-weight: 400 !important;
}

.single-post .sns-share.ss-bottom .social-icon {
  font-size: 13px !important;
}

.single-post .sns-share.ss-bottom .share-count {
  display: none !important;
}

/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1023px以下*/
@media screen and (max-width: 1023px){
  /*必要ならばここにコードを書く*/
}

/*834px以下*/
@media screen and (max-width: 834px){
  /*必要ならばここにコードを書く*/
}

/*480px以下*/
@media screen and (max-width: 480px){
  /*必要ならばここにコードを書く*/
}