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

/************************************
** 子テーマ用のスタイルを書く
************************************/
/*必要ならばここにコードを書く*/

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

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

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

/* =========================
   ヘッダーSNSアイコン 最終版
   X / YouTube
========================= */

.navi-in {
  position: relative !important;
}

.navi-in .menu-x,
.navi-in .menu-youtube {
  position: absolute !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 34px !important;
  min-width: 34px !important;
  height: 34px !important;
  margin: 0 !important;
  padding: 0 !important;
}

.navi-in .menu-x {
  left: calc(50% + 155px) !important;
}

.navi-in .menu-youtube {
  left: calc(50% + 195px) !important;
}

.navi-in .menu-x > a,
.navi-in .menu-youtube > a {
  font-size: 0 !important;
  width: 34px !important;
  min-width: 34px !important;
  height: 34px !important;
  line-height: 34px !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: relative !important;
}

.navi-in .menu-x > a::before {
  content: "𝕏";
  font-size: 20px !important;
  font-weight: 700 !important;
  color: #000000 !important;
  line-height: 1 !important;
}

.navi-in .menu-youtube > a::before {
  content: "" !important;
  display: block !important;
  width: 28px !important;
  height: 20px !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 576 512'%3E%3Cpath fill='%23ff0000' d='M549.7 124.1c-6.3-23.7-24.9-42.3-48.6-48.6C458.3 64 288 64 288 64S117.7 64 74.9 75.5c-23.7 6.3-42.3 24.9-48.6 48.6C14.8 166.9 14.8 256 14.8 256s0 89.1 11.5 131.9c6.3 23.7 24.9 42.3 48.6 48.6C117.7 448 288 448 288 448s170.3 0 213.1-11.5c23.7-6.3 42.3-24.9 48.6-48.6C561.2 345.1 561.2 256 561.2 256s0-89.1-11.5-131.9z'/%3E%3Cpath fill='%23ffffff' d='M232 336V176l142 80-142 80z'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: contain !important;
}

.navi-in .menu-youtube > a::after {
  display: none !important;
  content: none !important;
}

.navi-in .menu-x > a:hover,
.navi-in .menu-youtube > a:hover {
  opacity: 0.75;
}
/* トップページ上部の説明ボックス */
.top-intro-box {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  padding: 24px 28px;
  margin: 0 auto 32px;
  max-width: 920px;
  text-align: center;
}

.top-intro-box strong {
  display: block;
  font-size: 18px;
  margin-bottom: 10px;
  letter-spacing: 0.04em;
}

.top-intro-box p {
  margin: 0;
  font-size: 15px;
  line-height: 1.9;
}
/* =========================
   スマホ表示調整
========================= */

@media screen and (max-width: 834px) {

  /* スマホではヘッダーSNSアイコンを非表示 */
  .navi-in .menu-x,
  .navi-in .menu-youtube {
    display: none !important;
  }

  /* スマホのロゴサイズ調整 */
  .logo-image {
    max-width: 220px !important;
    height: auto !important;
  }

  /* スマホのヘッダー余白調整 */
  .header-container,
  .header-container-in,
  .logo-header {
    min-height: auto !important;
  }

  /* キャッチコピーを小さめに */
  .tagline {
    font-size: 12px !important;
    line-height: 1.6 !important;
    margin-top: 4px !important;
  }

  /* トップ説明ボックスのスマホ調整 */
  .top-intro-box {
    padding: 18px 16px !important;
    margin: 0 12px 24px !important;
    text-align: left !important;
  }

  .top-intro-box strong {
    font-size: 16px !important;
    text-align: center !important;
  }

  .top-intro-box p {
    font-size: 14px !important;
    line-height: 1.8 !important;
  }

  /* PC専用改行をスマホでは無効化 */
  .pc-only {
    display: none !important;
  }
}
/* =========================
   スマホ表示調整
========================= */

@media screen and (max-width: 834px) {

  /* スマホではヘッダーSNSアイコンを非表示 */
  .navi-in .menu-x,
  .navi-in .menu-youtube {
    display: none !important;
  }

  /* スマホのロゴサイズ調整 */
  .logo-image {
    max-width: 220px !important;
    height: auto !important;
  }

  /* スマホのヘッダー余白調整 */
  .header-container,
  .header-container-in,
  .logo-header {
    min-height: auto !important;
  }

  /* キャッチコピーを小さめに */
  .tagline {
    font-size: 12px !important;
    line-height: 1.6 !important;
    margin-top: 4px !important;
  }

  /* トップ説明ボックスのスマホ調整 */
  .top-intro-box {
    padding: 18px 16px !important;
    margin: 0 12px 24px !important;
    text-align: left !important;
  }

  .top-intro-box strong {
    font-size: 16px !important;
    text-align: center !important;
  }

  .top-intro-box p {
    font-size: 14px !important;
    line-height: 1.8 !important;
  }

  /* PC専用改行をスマホでは無効化 */
  .pc-only {
    display: none !important;
  }
/* =========================
   スマホ表示 最終版
========================= */

@media screen and (max-width: 834px) {

  /* ヘッダーの余白を詰める */
  .header-container,
  .header-container-in,
  .logo-header,
  .header {
    padding-top: 10px !important;
    padding-bottom: 6px !important;
    margin-bottom: 0 !important;
    min-height: auto !important;
    text-align: center !important;
  }

  /* ロゴを中央・少し小さめに */
  .logo-header img,
  .site-logo-image,
  .logo-image,
  .header .logo img {
    width: 210px !important;
    max-width: 210px !important;
    height: auto !important;
    display: block !important;
    margin: 0 auto !important;
  }

  /* キャッチコピー */
  .tagline,
  .site-description {
    font-size: 13px !important;
    line-height: 1.6 !important;
    margin: 6px auto 10px !important;
    text-align: center !important;
    letter-spacing: 0 !important;
  }

  /* スマホではヘッダーSNSアイコン非表示 */
  .navi-in .menu-x,
  .navi-in .menu-youtube {
    display: none !important;
  }

  /* メニュー文字 */
  .navi-in a {
    font-size: 15px !important;
    padding: 8px 12px !important;
  }

  /* メイン全体の余白 */
  .content,
  .content-in,
  .main,
  .main-in {
    padding-top: 16px !important;
  }

  /* KAIGO EDITとは ボックス */
  .top-intro-box {
    width: auto !important;
    max-width: none !important;
    margin: 0 16px 28px !important;
    padding: 20px 18px !important;
    box-sizing: border-box !important;
    text-align: left !important;
  }

  .top-intro-box strong {
    display: block !important;
    font-size: 20px !important;
    line-height: 1.4 !important;
    text-align: center !important;
    margin-bottom: 14px !important;
    letter-spacing: 0.04em !important;
  }

  .top-intro-box p {
    font-size: 15px !important;
    line-height: 1.85 !important;
    margin: 0 !important;
    text-align: left !important;
  }

  .pc-only {
    display: none !important;
  }

  /* 新着記事見出し */
  .list-title,
  .list-new-entries-title,
  .widget-entry-cards-title {
    font-size: 22px !important;
    line-height: 1.4 !important;
    margin-bottom: 20px !important;
  }

  /* 記事カードのタイトルを小さく */
  .entry-card-title,
  .entry-card-title a,
  .related-entry-card-title,
  .new-entry-card-title {
    font-size: 18px !important;
    line-height: 1.45 !important;
    letter-spacing: 0.02em !important;
  }

  /* 記事カード全体 */
  .entry-card-wrap,
  .entry-card {
    padding: 12px 8px !important;
  }

  /* 記事画像 */
  .entry-card-thumb {
    width: 40% !important;
  }

  /* 記事本文側 */
  .entry-card-content {
    width: 56% !important;
    padding-left: 12px !important;
  }

  /* 日付 */
  .post-date,
  .entry-card-meta {
    font-size: 12px !important;
  }

  /* もっと見るボタン */
  .list-more-button,
  .btn-wrap a {
    font-size: 14px !important;
    padding: 8px 28px !important;
  }
}