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

/* ==================================================
   AOYA TOPページ｜見出しデザイン
   固定ページ ID 87 のみに適用
================================================== */

/* H2の章番号をリセット */
body.page-id-87 .entry-content {
  counter-reset: aoya-heading;
}

/* Cocoon標準のH2装飾を解除 */
body.page-id-87 .entry-content h2 {
  counter-increment: aoya-heading;

  position: relative;
  margin: 4.5rem 0 2rem;
  padding: 0 0 1.15rem 4.2rem;

  color: #25231f;
  background: transparent !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(150, 116, 55, 0.38) !important;
  border-radius: 0 !important;
  box-shadow: none !important;

  font-family:
    "Yu Mincho",
    "YuMincho",
    "Hiragino Mincho ProN",
    "Hiragino Mincho Pro",
    serif;
  font-size: clamp(1.65rem, 3vw, 2.35rem);
  font-weight: 500;
  line-height: 1.45;
  letter-spacing: 0.055em;
}

/* 左側の章番号 */
body.page-id-87 .entry-content h2::before {
  content: counter(aoya-heading, decimal-leading-zero);

  position: absolute;
  left: 0;
  top: 0.28em;

  width: 2.9rem;
  padding-bottom: 0.35rem;

  color: #a57a31;
  border-bottom: 2px solid #a57a31;

  font-family: Georgia, "Times New Roman", serif;
  font-size: 0.78rem;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.12em;
}

/* Cocoonなどが追加する装飾を解除 */
body.page-id-87 .entry-content h2::after {
  content: none !important;
}

/* H3：カード内や小見出し向け */
body.page-id-87 .entry-content h3 {
  position: relative;
  margin: 2rem 0 1rem;
  padding: 0 0 0 1rem;

  color: #302d27;
  background: transparent !important;
  border: 0 !important;
  border-left: 2px solid #b28a45 !important;
  border-radius: 0 !important;
  box-shadow: none !important;

  font-family:
    "Yu Mincho",
    "YuMincho",
    "Hiragino Mincho ProN",
    "Hiragino Mincho Pro",
    serif;
  font-size: clamp(1.15rem, 2vw, 1.42rem);
  font-weight: 500;
  line-height: 1.6;
  letter-spacing: 0.045em;
}

body.page-id-87 .entry-content h3::before,
body.page-id-87 .entry-content h3::after {
  content: none !important;
}

/* スマートフォン調整 */
@media screen and (max-width: 600px) {
  body.page-id-87 .entry-content h2 {
    margin: 3.5rem 0 1.5rem;
    padding: 0 0 0.9rem 3.25rem;

    font-size: clamp(1.45rem, 7vw, 1.85rem);
    line-height: 1.5;
    letter-spacing: 0.035em;
  }

  body.page-id-87 .entry-content h2::before {
    top: 0.45em;
    width: 2.25rem;
    font-size: 0.68rem;
  }

  body.page-id-87 .entry-content h3 {
    margin-top: 1.6rem;
    padding-left: 0.8rem;
    font-size: 1.1rem;
  }
}

/* AOYA TOP｜H2の重複番号を解除 */
body.page-id-87 .entry-content {
  counter-reset: none;
}

body.page-id-87 .entry-content h2 {
  counter-increment: none;
  padding-left: 0 !important;
}

body.page-id-87 .entry-content h2::before {
  content: none !important;
  display: none !important;
}

/* ==================================================
   AOYA TOP｜スクロール・フェード表示
   固定ページ ID 87 のみに適用
================================================== */

/*
 JavaScriptが正常に起動した場合だけ非表示にする。
 JSが読み込めなくても内容が消えない安全設計。
*/
html.aoya-reveal-ready body.page-id-87 .aoya-reveal {
  opacity: 0;
  transform: translateY(12px);

  transition:
    opacity 0.72s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.72s cubic-bezier(0.22, 1, 0.36, 1);

  transition-delay: var(--aoya-reveal-delay, 0ms);
  will-change: opacity, transform;
}

/* 表示された状態 */
html.aoya-reveal-ready body.page-id-87 .aoya-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* スマートフォンは移動量を小さくする */
@media screen and (max-width: 600px) {
  html.aoya-reveal-ready body.page-id-87 .aoya-reveal {
    transform: translateY(8px);
    transition-duration: 0.6s;
  }

  html.aoya-reveal-ready body.page-id-87 .aoya-reveal.is-visible {
    transform: translateY(0);
  }
}

/* 動きを減らす設定を利用している人にはアニメーションしない */
@media (prefers-reduced-motion: reduce) {
  html.aoya-reveal-ready body.page-id-87 .aoya-reveal,
  html.aoya-reveal-ready body.page-id-87 .aoya-reveal.is-visible {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}