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

/************************************
** 子テーマ用のスタイルを書く
************************************/

/* ========================================
   grayish 見出しデザインリセット
   ======================================== */
.article h1,
.article h2,
.article h3,
.article h4,
.article h5,
.article h6 {
  background-color: transparent;
  border: none;
  padding: 0;
  font-weight: normal;
}

.article h2::before,
.article h3::before {
  border: none;
}

.article h4::before {
  content: none;
}

/* ========================================
   サイト全体 H2 Apple風デザイン
   固定ページ・投稿ページ共通
   ※ページ専用CSSがあるものは除外
   ======================================== */

/* 通常本文エリアのH2 */
.article .entry-content h2:not(.cstm-head):not([class*="ps-"]):not([class*="lp-"]):not([class*="custom-"]) {
  position: relative;
  margin: 3.2em 0 1.4em;
  padding: 0 0 0.75em;
  background: transparent;
  border: none;
  color: #1f2f2a;
  font-size: 24px;
  font-weight: 600;
  line-height: 1.55;
  letter-spacing: 0.04em;
  text-align: left;
}

/* Cocoon / grayish 側の装飾リセット */
.article .entry-content h2:not(.cstm-head):not([class*="ps-"]):not([class*="lp-"]):not([class*="custom-"])::before {
  content: none;
  border: none;
}

/* Apple風の細いアクセントライン */
.article .entry-content h2:not(.cstm-head):not([class*="ps-"]):not([class*="lp-"]):not([class*="custom-"])::after {
  content: "";
  display: block;
  width: 64px;
  height: 1px;
  margin-top: 0.75em;
  background: linear-gradient(
    90deg,
    rgba(111, 184, 155, 0.95),
    rgba(111, 184, 155, 0.18),
    rgba(111, 184, 155, 0)
  );
}

/* H2直後の本文との距離を整える */
.article .entry-content h2:not(.cstm-head):not([class*="ps-"]):not([class*="lp-"]):not([class*="custom-"]) + p {
  margin-top: 0;
}

/* H2直後が画像・カラム・表の場合の余白調整 */
.article .entry-content h2:not(.cstm-head):not([class*="ps-"]):not([class*="lp-"]):not([class*="custom-"]) + figure,
.article .entry-content h2:not(.cstm-head):not([class*="ps-"]):not([class*="lp-"]):not([class*="custom-"]) + .wp-block-image,
.article .entry-content h2:not(.cstm-head):not([class*="ps-"]):not([class*="lp-"]):not([class*="custom-"]) + .wp-block-columns,
.article .entry-content h2:not(.cstm-head):not([class*="ps-"]):not([class*="lp-"]):not([class*="custom-"]) + table {
  margin-top: 1.2em;
}

/* スマホでは少しだけ小さく */
@media screen and (max-width: 834px) {
  .article .entry-content h2:not(.cstm-head):not([class*="ps-"]):not([class*="lp-"]):not([class*="custom-"]) {
    margin: 2.6em 0 1.2em;
    padding-bottom: 0.7em;
    font-size: 22px;
    line-height: 1.55;
    letter-spacing: 0.03em;
  }

  .article .entry-content h2:not(.cstm-head):not([class*="ps-"]):not([class*="lp-"]):not([class*="custom-"])::after {
    width: 52px;
  }
}

/* ========================================
   サイト全体 H2 Apple風デザイン｜中央寄せ版
   固定ページ・投稿ページ共通
   ※ページ専用CSSがあるものは除外
   ======================================== */

.article .entry-content h2:not(.cstm-head):not([class*="ps-"]):not([class*="lp-"]):not([class*="custom-"]) {
  position: relative;
  margin: 3.2em auto 1.4em;
  padding: 0 0 0.75em;
  background: transparent;
  border: none;
  color: #1f2f2a;
  font-size: 24px;
  font-weight: 600;
  line-height: 1.55;
  letter-spacing: 0.04em;
  text-align: center;
}

/* Cocoon / grayish 側の装飾リセット */
.article .entry-content h2:not(.cstm-head):not([class*="ps-"]):not([class*="lp-"]):not([class*="custom-"])::before {
  content: none;
  border: none;
}

/* Apple風の細いアクセントライン：中央配置 */
.article .entry-content h2:not(.cstm-head):not([class*="ps-"]):not([class*="lp-"]):not([class*="custom-"])::after {
  content: "";
  display: block;
  width: 64px;
  height: 1px;
  margin: 0.75em auto 0;
  background: linear-gradient(
    90deg,
    rgba(111, 184, 155, 0),
    rgba(111, 184, 155, 0.95),
    rgba(111, 184, 155, 0)
  );
}

/* H2直後の本文との距離を整える */
.article .entry-content h2:not(.cstm-head):not([class*="ps-"]):not([class*="lp-"]):not([class*="custom-"]) + p {
  margin-top: 0;
}

/* H2直後が画像・カラム・表の場合の余白調整 */
.article .entry-content h2:not(.cstm-head):not([class*="ps-"]):not([class*="lp-"]):not([class*="custom-"]) + figure,
.article .entry-content h2:not(.cstm-head):not([class*="ps-"]):not([class*="lp-"]):not([class*="custom-"]) + .wp-block-image,
.article .entry-content h2:not(.cstm-head):not([class*="ps-"]):not([class*="lp-"]):not([class*="custom-"]) + .wp-block-columns,
.article .entry-content h2:not(.cstm-head):not([class*="ps-"]):not([class*="lp-"]):not([class*="custom-"]) + table {
  margin-top: 1.2em;
}

/* スマホでも中央寄せ */
@media screen and (max-width: 834px) {
  .article .entry-content h2:not(.cstm-head):not([class*="ps-"]):not([class*="lp-"]):not([class*="custom-"]) {
    margin: 2.6em auto 1.2em;
    padding-bottom: 0.7em;
    font-size: 22px;
    line-height: 1.55;
    letter-spacing: 0.03em;
    text-align: center;
  }

  .article .entry-content h2:not(.cstm-head):not([class*="ps-"]):not([class*="lp-"]):not([class*="custom-"])::after {
    width: 52px;
    margin-left: auto;
    margin-right: auto;
  }
}

/* ========================================
   サイト全体 H3 Apple風デザイン
   固定ページ・投稿ページ共通
   ※ページ専用CSSがあるものは除外
   ======================================== */

.article .entry-content h3:not(.cstm-head):not([class*="ps-"]):not([class*="lp-"]):not([class*="custom-"]) {
  position: relative;
  margin: 2.6em 0 1.1em;
  padding: 0.15em 0 0.15em 1em;
  background: transparent;
  border: none;
  color: #263b35;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.6;
  letter-spacing: 0.035em;
}

/* Cocoon / grayish 側の装飾リセット */
.article .entry-content h3:not(.cstm-head):not([class*="ps-"]):not([class*="lp-"]):not([class*="custom-"])::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.45em;
  width: 3px;
  height: 1.2em;
  border: none;
  border-radius: 999px;
  background: linear-gradient(
    180deg,
    #6fb89b,
    rgba(111, 184, 155, 0.28)
  );
}

/* H3直後の本文との距離を整える */
.article .entry-content h3:not(.cstm-head):not([class*="ps-"]):not([class*="lp-"]):not([class*="custom-"]) + p {
  margin-top: 0;
}

/* スマホ調整 */
@media screen and (max-width: 834px) {
  .article .entry-content h3:not(.cstm-head):not([class*="ps-"]):not([class*="lp-"]):not([class*="custom-"]) {
    margin: 2.2em 0 1em;
    padding-left: 0.85em;
    font-size: 18px;
    line-height: 1.6;
    letter-spacing: 0.03em;
  }

  .article .entry-content h3:not(.cstm-head):not([class*="ps-"]):not([class*="lp-"]):not([class*="custom-"])::before {
    width: 3px;
    height: 1.15em;
  }
}

/* ========================================
   フォント設定
   ======================================== */

/* テーマカスタマイザーで設定した英字Font + 日本語はCocoon設定のサイトフォント */
.cstm-skin-font-set {
  font-family: var(--skin-grayish-style-font);
  font-weight: 400;
  letter-spacing: .1rem;
}

/* Montserrat + 日本語はCocoon設定のサイトフォント */
.cstm-font-montserrat {
  font-family: "Montserrat", var(--skin-get-site-font);
  font-weight: 400;
  letter-spacing: .1rem;
}

/* Lato + 日本語はCocoon設定のサイトフォント */
.cstm-font-lato {
  font-family: "Lato", var(--skin-get-site-font);
  font-weight: 400;
  letter-spacing: .1rem;
}

/* Inknut Antiqua + 日本語はCocoon設定のサイトフォント */
.cstm-font-inknut-antiqua {
  font-family: "Inknut Antiqua", var(--skin-get-site-font);
  font-weight: 400;
  letter-spacing: .1rem;
}

/* Spectral + 日本語はCocoon設定のサイトフォント */
.cstm-font-spectral {
  font-family: "Spectral", var(--skin-get-site-font);
  font-weight: 400;
  letter-spacing: .1rem;
}

/* Lora + 日本語はCocoon設定のサイトフォント */
.cstm-font-lora {
  font-family: "Lora", var(--skin-get-site-font);
  font-weight: 400;
  letter-spacing: .1rem;
}

/* Jost + 日本語はCocoon設定のサイトフォント */
.cstm-font-jost {
  font-family: "Jost", var(--skin-get-site-font);
  font-weight: 400;
  letter-spacing: .1rem;
}

/* Roboto Slab + 日本語はCocoon設定のサイトフォント */
.cstm-font-roboto-slab {
  font-family: "Roboto Slab", var(--skin-get-site-font);
  font-weight: 400;
  letter-spacing: .1rem;
}

/* ========================================
   More ボタン
   ======================================== */
p.cstm-more-btn {
  display: flex;
  justify-content: flex-end;
  font-size: 20px;
  line-height: 1.2;
  width: 100%;
  padding-right: 6em;
}

p.cstm-more-btn a {
  display: inline-block;
  width: fit-content;
  transition: color 0.3s ease-in-out;
  text-decoration: none;
  position: relative;
}

p.cstm-more-btn a::before {
  display: block;
  content: "";
  background-color: var(--LtGray_S50);
  width: 4em;
  height: 1px;
  position: absolute;
  top: 0;
  bottom: 0;
  right: 120%;
  margin: auto;
  transition: transform 0.3s ease-in-out;
}

p.cstm-more-btn a:hover::before {
  transform: translate(1em);
}

/* ========================================
   カバーブロック・全幅ブロック
   ======================================== */

/* カバーブロック用：インナーブロックの中央寄せ */
.cstm-blk-fullwide-inner {
  width: 100vw;
  margin: 0 calc(50% - 50vw);
  padding: 0 calc(50vw - 50%);
}

/* 画像ブロックを画面幅いっぱいにする */
.cstm-blk-fullwide {
  width: 100vw;
  margin: 0 calc(50% - 50vw);
}

/* 画像ブロックの高さ調整 */
.cstm-blk-fullwide.cstm-blk-img-height img {
  height: 50vmin;
}

/* ========================================
   cstm-pat-1（作例1）ブロック
   ======================================== */

/* インナーブロックの上下余白 */
.cstm-pat-1 .wp-block-cover__inner-container {
  padding-top: 6rem;
  padding-bottom: 6rem;
}

/* H2見出し右余白 */
.cstm-pat-1 .wp-block-cover__inner-container h2.cstm-head {
  padding-right: 32px;
}

/* 新着情報ブロック 左ボーダー */
.cstm-pat-1 .wp-block-column .info-list-box.block-box {
  border-left: solid 1px var(--LtGray_T0);
  padding-left: 32px;
}

/* 新着情報ブロック 区切り線 */
.cstm-pat-1 .is-style-divider-line .info-list-item {
  border-bottom: none;
  padding: 20px 0;
}

/* ========================================
   circle & wave カバーブロック装飾
   ======================================== */
:where(
  .cstm-cover-path-lower-cir,
  .cstm-cover-path-upper-cir,
  .cstm-cover-path-lower-wave,
  .cstm-cover-path-upper-wave
) {
  padding: 0 !important;
  min-height: unset !important;
}

:where(.svg-upper-cir, .svg-upper-wave) {
  transform: translateY(1px);
}

:where(.svg-lower-cir, .svg-lower-wave) {
  transform: translateY(-1px);
}

:where(.cstm-cover-path-lower-cir, .cstm-cover-path-upper-cir) svg {
  display: block;
  fill: currentColor;
  width: 100%;
  height: 6vmin;
}

:where(.cstm-cover-path-lower-wave, .cstm-cover-path-upper-wave) svg {
  display: block;
  fill: currentColor;
  width: 100%;
  height: 7vmin;
}

.cstm-cover-path-upper-cir,
.cstm-cover-path-upper-wave {
  margin-bottom: 0 !important;
}

/* wave/cir の次のカバーブロック内上余白を半分に */
.cstm-cover-path-upper-wave + .wp-block-cover > .wp-block-cover__inner-container,
.cstm-cover-path-lower-wave + .wp-block-cover > .wp-block-cover__inner-container,
.cstm-cover-path-upper-cir  + .wp-block-cover > .wp-block-cover__inner-container,
.cstm-cover-path-lower-cir  + .wp-block-cover > .wp-block-cover__inner-container {
  padding-top: 3rem;
}

/* 不透明度を変えたい場合 */
.my-change-color-opacity svg {
  opacity: 0.5;
}

/* 高さを変えたい場合 */
.my-change-height svg {
  height: 14vmin;
}

/* ========================================
   フロントページ（サイト型）余白・表示調整
   ======================================== */

/* パンくず・記事ヘッダー・PRラベル非表示 */
.body.skin-grayish.front-top-page .breadcrumb,
.body.skin-grayish.front-top-page .article-header,
.body.skin-grayish.front-top-page .pr-label-s {
  display: none;
}

/* メインコンテンツ上下余白（サイト型のみ・ブログ型では無効） */
.body.skin-grayish.front-top-page:not(.blog) .content .main {
  padding-top: 0;
  padding-bottom: 0;
}

/* コンテンツ上マージン（サイト型のみ） */
.body.skin-grayish.front-top-page:not(.blog) .content {
  margin-top: 0;
}

/* エントリーコンテンツ上下マージン（サイト型のみ） */
.body.skin-grayish.front-top-page .entry-content {
  margin-top: 0;
  margin-bottom: 0;
}

/* アーティクル下マージン（サイト型のみ） */
.body.skin-grayish.front-top-page .article {
  margin-bottom: 0;
}

/* ========================================
   画像関連
   ======================================== */

/* 画像を画面いっぱいにする（クラス指定） */
/* ※ WordPress標準の画像ブロックには .wp-block-image を使用してください */
.image-max {
  margin-right: calc(50% - 50vw);
  margin-left: calc(50% - 50vw);
}

.image img {
  display: block;
  width: 100%;
  height: auto;
}

/* ========================================
   フッター
   ======================================== */
.skin-grayish .footer {
  background-color: #CCB4CA;
  overflow-x: clip;
  margin-top: 0;
}

/* ========================================
   ナビゲーション
   ======================================== */

/* サーチアイコン非表示 */
.skin-grayish .navi-in > ul > li.search-menu-button.menu-button {
  font-size: 16px;
  display: none;
}

/* ========================================
   リンク・テキスト
   ======================================== */

/* リンク下線非表示 */
a {
  text-decoration: none;
}

/* メインコンテンツ下線（白） */
.skin-grayish .content .main .entry-content {
  border-bottom: solid 1px #ffffff;
}

/* 段落（p）左右余白 */
.entry-content p {
  padding-left: 1rem;
  padding-right: 1rem;
}

/* ========================================
   YouTube動画
   ======================================== */
.video-container {
  margin: 0 auto;
}

/* ========================================
   ヘッダー
   ======================================== */

/* ヘッダーテキスト非表示 */
.skin-grayish .header-in .site-name-text {
  display: none;
}

/* ========================================
   その他
   ======================================== */

/* 横スクロール防止 */
body {
  overflow-x: clip;
}

/* ========================================
   レスポンシブデザイン（1023px以下）
   ======================================== */
@media screen and (max-width: 1023px) {

  /* 関連記事・カードタイトル */
  .related-entry-card-title,
  .entry-card-title {
    font-size: 16px;
    margin: 0 0 5px 0;
    line-height: 1.6;
    display: -webkit-box;
    overflow: hidden;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
  }

  /* cstm-pat-1 インナー上余白 */
  .cstm-pat-1 .wp-block-cover__inner-container {
    padding-top: 3rem;
  }

  /* cstm-pat-1 カラムを縦積みに */
  .cstm-pat-1 .wp-block-cover__inner-container .wp-block-columns {
    flex-direction: column;
  }

  /* cstm-pat-1 H2中央揃え */
  .cstm-pat-1 .wp-block-cover__inner-container h2.cstm-head {
    text-align: center;
    padding-right: 0;
  }

  /* cstm-pat-1 新着情報ボーダーリセット */
  .cstm-pat-1 .wp-block-column .info-list-box.block-box {
    border-left: none;
    padding-left: 0;
  }

  /* cstm-pat-1 新着情報区切り線を復活 */
  .cstm-pat-1 .is-style-divider-line .info-list-item {
    border-bottom: solid 1px var(--LtGray_T0);
  }

  /* More ボタン右余白縮小 */
  p.cstm-more-btn {
    padding-right: 1em;
  }

  p.cstm-more-btn a::before {
    width: 2em;
  }

  /* モバイル時ヘッダー背景画像 */
  .skin-grayish.front-top-page .container .header-container .header {
    background-image: url(https://premiere-sakura.com/wp-content/uploads/2026/01/header-002-trimmed-1900x960-1_mobile-1900x960-1.png);
    background-position: center center;
  }

}

/* ========================================
   レスポンシブデザイン（834px以下）
   ======================================== */
@media screen and (max-width: 834px) {
  /* 必要ならばここにコードを書く */
}

/* ========================================
   レスポンシブデザイン（480px以下）
   ======================================== */
@media screen and (max-width: 480px) {

  /* ベースフォントサイズ */
  body {
    font-size: 16px !important;
  }

  /* cstm-pat-1 H2フォントサイズ・余白 */
  .cstm-pat-1 .wp-block-cover__inner-container h2.cstm-head {
    font-size: 48px;
    padding: 0;
  }

  /* 新着情報リスト余白 */
  .cstm-pat-1 .is-style-divider-line.info-list {
    padding: 0 8px;
  }

  /* 新着情報 日付をブロック表示 */
  .cstm-pat-1 .is-style-divider-line.info-list .info-list-item-meta .info-list-item-date {
    display: block;
  }

  /* 新着情報 メタ・カテゴリをflex表示 */
  .cstm-pat-1 .is-style-divider-line.info-list .info-list-item-meta,
  .cstm-pat-1 .is-style-divider-line.info-list .info-list-item-meta .info-list-item-categorys,
  .cstm-pat-1 .is-style-divider-line.info-list .info-list-item-meta .info-list-item-categorys span {
    display: flex;
  }

  /* 新着情報 メタを縦並び */
  .cstm-pat-1 .is-style-divider-line.info-list .info-list-item-meta {
    flex-direction: column;
    row-gap: 0.4em;
  }

  /* 新着情報 カテゴリを折り返し */
  .cstm-pat-1 .is-style-divider-line.info-list .info-list-item-meta .info-list-item-categorys {
    flex-wrap: wrap;
    row-gap: 0.4em;
  }

  /* reCAPTCHAバッジ非表示 */
  .grecaptcha-badge {
    visibility: hidden;
  }

}