@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){
  /*必要ならばここにコードを書く*/
}


/************************************
** でぶん記事：導入文
************************************/
.debun-intro {
  font-family: 'Klee One', 'Zen Maru Gothic', '游ゴシック', sans-serif;
  font-size: 1.08em;
  font-weight: 600;
  line-height: 2.1;
  letter-spacing: .06em;
  color: #5a4a52;
  background: linear-gradient(135deg, #fff8fb 0%, #fff4f8 100%);
  border-left: 4px solid #e8b7c8;
  padding: 1.3em 1.5em 1.3em 1.4em;
  margin: 0 0 1.8em;
  border-radius: 0 12px 12px 0;
  box-shadow: 0 2px 12px rgba(232,183,200,.15);
}

/************************************
** でぶん記事：ボックス共通（道しるべ・あとがき）
************************************/
.debun-box {
  border-radius: 4px;
  overflow: visible;
}
.debun-box-list {
  list-style: none !important;
  margin: .4em 0 0 !important;
  padding: 0 !important;
}
.debun-box-list li {
  position: relative;
  padding: .55em 0 .55em 1.6em;
  font-family: 'Zen Maru Gothic', sans-serif;
  font-size: .97em;
  line-height: 1.8;
  color: #4a3a40;
  border-bottom: 1px dashed rgba(0,0,0,.06);
}
.debun-box-list li:last-child {
  border-bottom: none;
}
.debun-box-list li::before {
  content: '✦';
  position: absolute;
  left: 0;
  top: .55em;
  font-size: .7em;
  opacity: .45;
}

/************************************
** でぶん記事：そっとすすめたいお話
************************************/
.debun-osusume-wrap {
  border-radius: 16px;
  padding: 1.4em 1.4em 1em;
  margin: 2em 0 2.4em;
  box-shadow: 0 3px 18px rgba(0,0,0,.06);
}
.debun-osusume-heading {
  font-family: 'Klee One', 'Zen Maru Gothic', sans-serif;
  font-size: 1em;
  font-weight: 600;
  color: #7a5a68;
  letter-spacing: .08em;
  margin: 0 0 .9em !important;
  padding: 0 !important;
}
.debun-osusume-cards {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.debun-osusume-card {
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(255,255,255,.82);
  border-radius: 12px;
  padding: 10px 14px 10px 10px;
  text-decoration: none !important;
  color: #4a3a40 !important;
  font-family: 'Zen Maru Gothic', sans-serif;
  font-size: .88em;
  line-height: 1.6;
  flex: 0 0 calc(50% - 6px);
  box-shadow: 0 2px 8px rgba(0,0,0,.05);
  transition: transform .28s ease, box-shadow .28s ease;
  backdrop-filter: blur(4px);
}
.debun-osusume-card:hover {
  transform: translateY(-3px) scale(1.01);
  box-shadow: 0 6px 20px rgba(0,0,0,.10);
  text-decoration: none !important;
}
.debun-osusume-thumb {
  flex-shrink: 0;
  width: 72px;
  height: 72px;
  border-radius: 10px;
  overflow: hidden;
  background: rgba(255,255,255,.6);
}
.debun-osusume-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.debun-osusume-nothumb {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.8em;
}
.debun-osusume-title {
  flex: 1;
  font-weight: 500;
}

/************************************
** でぶん記事：本文内画像 ホバー＆ライトボックス演出
************************************/
/* 記事本文内のimg全般にエフェクト適用
   クラシックエディターで貼り付けた <img> を対象 */
.entry-content img:not(.no-lightbox) {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 1.6em auto;
  border-radius: 10px;
  box-shadow: 0 4px 18px rgba(0,0,0,.10);
  cursor: zoom-in;
  transition:
    transform .38s cubic-bezier(.22,.68,0,1.2),
    box-shadow .38s ease,
    filter .38s ease;
  will-change: transform;
}
.entry-content img:not(.debun-osusume-thumb img):not(.no-lightbox):hover {
  transform: translateY(-6px) scale(1.025);
  box-shadow: 0 16px 40px rgba(0,0,0,.16);
  filter: brightness(1.04);
}

/* ライトボックス オーバーレイ */
#debun-lightbox {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: rgba(30,18,24,.82);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  cursor: zoom-out;
  opacity: 0;
  transition: opacity .32s ease;
}
#debun-lightbox.is-open {
  display: flex;
  align-items: center;
  justify-content: center;
}
#debun-lightbox.is-visible {
  opacity: 1;
}
#debun-lightbox img {
  max-width: 88vw;
  max-height: 88vh;
  border-radius: 14px;
  box-shadow: 0 24px 80px rgba(0,0,0,.55);
  transform: scale(.88);
  transition: transform .36s cubic-bezier(.22,.68,0,1.1);
  cursor: default;
  object-fit: contain;
}
#debun-lightbox.is-visible img {
  transform: scale(1);
}
#debun-lightbox-close {
  position: absolute;
  top: 18px;
  right: 22px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255,255,255,.18);
  border: none;
  color: #fff;
  font-size: 20px;
  line-height: 40px;
  text-align: center;
  cursor: pointer;
  transition: background .2s;
}
#debun-lightbox-close:hover {
  background: rgba(255,255,255,.32);
}

/************************************
** レスポンシブ：そっとすすめたいお話
************************************/
@media screen and (max-width: 600px) {
  .debun-osusume-card {
    flex: 0 0 100%;
  }
  .debun-osusume-thumb {
    width: 58px;
    height: 58px;
  }
}

/************************************
** Web絵本：物語カテゴリー Cocoon機能の抑制
************************************/
/* サイドバーを非表示にして1カラム化 */
.debun-story-post #sidebar,
.debun-story-post .sidebar,
.debun-story-post #right-sidebar,
.debun-story-post #left-sidebar,
.debun-story-post .widget-area {
  display: none !important;
}

/* メインエリアを全幅に */
.debun-story-post #main,
.debun-story-post .main,
.debun-story-post #contents,
.debun-story-post .contents {
  width: 100% !important;
  max-width: 100% !important;
  float: none !important;
}

/* 広告・SNSシェアボタン・関連記事を非表示 */
.debun-story-post .ad-area,
.debun-story-post .advertisement,
.debun-story-post .sns-share-buttons,
.debun-story-post .sns-follow-buttons,
.debun-story-post .related-entry-section,
.debun-story-post .toc-area,
.debun-story-post #toc_container {
  display: none !important;
}

/************************************
** Web絵本：ピクチャーブック レイアウト
************************************/
.picture-book {
  max-width: 720px;
  margin: 3.5em auto 5em;
  padding: 0;
  font-family: 'Zen Maru Gothic', 'M PLUS Rounded 1c', 'Hiragino Maru Gothic ProN', sans-serif;
}

/* シーン単体 */
.pb-scene {
  margin: 0 0 6em;
  position: relative;
  /* スクロール前は非表示（JSでフェードイン） */
  opacity: 0;
  transform: translateY(48px);
  transition:
    opacity .85s cubic-bezier(.22, 1, .36, 1),
    transform .85s cubic-bezier(.22, 1, .36, 1);
  will-change: opacity, transform;
}

.pb-scene.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* 画像ラッパー：16:9 固定比 */
.pb-image-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 22px;
  overflow: hidden;
  box-shadow:
    0 12px 48px rgba(139, 94, 60, .14),
    0 3px 10px rgba(0, 0, 0, .06);
  background: #f5ebe0;
  will-change: transform;
}

/* 画像本体 */
.pb-image {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
  border-radius: 0 !important;
  cursor: default !important;
  margin: 0 !important;
  box-shadow: none !important;
  transition: transform .7s cubic-bezier(.22, 1, .36, 1);
  will-change: transform;
}

/* パララックス用（JSがクラスを付与） */
.pb-image-wrap.parallax-active .pb-image {
  transform: translateY(var(--pb-parallax-y, 0px)) scale(1.07);
}

/* キャプション */
.pb-caption {
  margin: 1.4em auto 0 !important;
  padding: 0 1em;
  text-align: center;
  font-family: 'Zen Maru Gothic', 'M PLUS Rounded 1c', sans-serif;
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 2.1;
  color: #5a3a28;
  letter-spacing: .12em;
  /* 柔らかい文字影 */
  text-shadow:
    0 1px 0 rgba(255, 255, 255, .9),
    0 2px 8px rgba(139, 94, 60, .10);
}

/* 1文字アニメーション用 span */
.pb-char {
  display: inline-block;
  opacity: 0;
  transform: translateY(10px) scale(.9);
  transition-property: opacity, transform;
  transition-timing-function: cubic-bezier(.22, 1, .36, 1);
  transition-duration: .55s;
  /* transition-delay は JS で --char-i × .07s をインライン設定 */
}

.pb-scene.chars-visible .pb-char {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/************************************
** Web絵本：レスポンシブ
************************************/
@media screen and (max-width: 834px) {
  .picture-book {
    max-width: 100%;
    margin: 2.5em 0 4em;
  }
  .pb-scene {
    margin-bottom: 4.5em;
  }
  .pb-image-wrap {
    border-radius: 16px;
  }
  .pb-caption {
    font-size: 1.25rem;
    padding: 0 .5em;
  }
}

@media screen and (max-width: 480px) {
  .pb-scene {
    margin-bottom: 3.5em;
  }
  .pb-image-wrap {
    border-radius: 12px;
  }
  .pb-caption {
    font-size: 1.05rem;
    letter-spacing: .06em;
  }
}