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

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

/* ===== 瑞喜菓 カスタムCSS（安定版）===== */

/* =========================
   全ページ共通
   ========================= */

/* 背景を完全白化 */
body,
.wrapper,
#content,
.main {
    background-color: #ffffff;
}

/* 行間（世界観優先の余白設計） */
.page .entry-content {
    line-height: 2.4;
}

/* 見出しデザイン統一（グレー背景対策済み） */
.article h2 {
    background: none;
    border: none;
    padding: 0;
    margin: 2.8em 0 1.2em;
    font-weight: 400;
    letter-spacing: 0.08em;
    position: relative;
    border-top: none !important;
}

/* 溶け込む細線 */
.article h2::after {
    content: "";
    display: block;
    height: 1px;
    background: rgba(0,0,0,0.12);
    margin-top: 0.6em;
}

/* 区切り線を柔らかく */
.wp-block-separator {
    border: none;
    height: 1px;
    background: rgba(0,0,0,0.08);
    margin: 2.2em auto;
}

/* ヘッダー・フッター余白調整 */
.header-container {
    margin-bottom: 0;
}

#content {
    margin-top: 0;
}

.footer,
.footer-bottom {
    margin-top: 0;
    padding-top: 0;
}

/* ボタンhover（ブランド色維持） */
.wp-block-button__link:hover {
    color: #5383c3;
}


/* =========================
   瑞喜菓について（page-id-781）
   ========================= */

/* タイトル非表示 */
.page-id-781 .article-header {
    display: none;
}

/* 三つ巴レイアウト安定 */
.page-id-781 .mitudomoe-wrap {
    display: flex;
    align-items: center;
    column-gap: 40px;
}

/* 三つ巴画像サイズ固定 */
.page-id-781 .mitudomoe-img {
    width: 130px;
    height: auto;
    flex-shrink: 0;
}

/* 文字＋画像横並び */
.page-id-781 .entry-content .text-and-image {
    display: flex;
    align-items: center;
    justify-content: space-between;
}


/* =========================
   トップページ（page-id-561）
   ========================= */

/* PC */
@media (min-width: 481px) {

  .page-id-561 .wp-block-cover__inner-container {
      padding-top: 6vh;
      padding-bottom: 4vh;
  }

  .page-id-561 .wp-block-cover__inner-container .has-medium-font-size {
      margin-bottom: 0.5em;
  }

  .page-id-561 .wp-block-image {
      display: block;
      margin-left: 0;
      margin-right: 0;
      max-width: 300px;
  }
}

/* スマホ */
@media (max-width: 480px) {

  /* キャッチコピー */
  .page-id-561 .has-medium-font-size {
      font-size: 16.5px;
  }

  /* 詩の余韻 */
  .page-id-561 .entry-content > p[style*="font-size"] {
      font-size: 14px;
      line-height: 2.1;
      letter-spacing: 0.04em;
  }

  .page-id-561 .wp-block-cover .fz-24px {
      font-size: 18px;
  }

  .page-id-561 .wp-block-cover .fz-18px {
      font-size: 14px;
  }
}


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

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

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

/* =========================
   コンテンツ中央寄せ安定
   ========================= */

.content-in{
  max-width:1200px;
  margin-left:auto;
  margin-right:auto;
}

body.no-sidebar .main{
  float:none;
  width:100%;
  margin-left:auto;
  margin-right:auto;
}

/* =========================
   はじまりの記憶（page-id-1330）
   画像レイアウト 完全版
   ========================= */

/* 全体の読み心地 */
.page-id-1330 .entry-content{
  line-height: 2.35;
}

/* カラム全体 */
.page-id-1330 .entry-content .wp-block-columns{
  align-items: flex-start;
  column-gap: 18px;
  gap: 18px;
  margin-top: 2em;
  margin-bottom: 2em;
}

/* 各カラム */
.page-id-1330 .entry-content .wp-block-columns > .wp-block-column{
  padding: 0;
}

/* 画像ブロック */
.page-id-1330 .entry-content .wp-block-columns figure{
  margin: 0;
}

/* 画像そのもの */
.page-id-1330 .entry-content .wp-block-columns img{
  display: block;
  width: 100%;
  height: auto;
}

/* 縦長画像 */
.page-id-1330 .entry-content .wp-block-image{
  margin-top: 0;
  margin-bottom: 0;
}

/* 画像横の文章 */
.page-id-1330 .entry-content .wp-block-columns p{
  margin-top: 0;
}

/* 段落の余韻 */
.page-id-1330 .entry-content p{
  margin-bottom: 1.15em;
}

/* PC表示 */
@media (min-width: 782px){

  /* 画像カラム */
  .page-id-1330 .entry-content .wp-block-columns > .wp-block-column:first-child{
    flex-basis: 34% !important;
  }

  /* 文章カラム */
  .page-id-1330 .entry-content .wp-block-columns > .wp-block-column:last-child{
    flex-basis: 66% !important;
  }

  /* 画像位置を微調整 */
  .page-id-1330 .entry-content .wp-block-columns figure{
    margin-top: 0.2em;
  }

}

/* スマホ */
@media (max-width: 781px){

  .page-id-1330 .entry-content .wp-block-columns{
    column-gap: 0;
    gap: 0;
    margin-top: 1.6em;
    margin-bottom: 1.6em;
  }

  .page-id-1330 .entry-content .wp-block-columns > .wp-block-column{
    margin-bottom: 1em;
  }

  .page-id-1330 .entry-content .wp-block-columns > .wp-block-column:last-child{
    margin-bottom: 0;
  }

  .page-id-1330 .entry-content .wp-block-columns figure{
    margin-bottom: 0.6em;
  }

}

/* =========================
   瑞喜菓の源（page-id-1152）
   円相 完全最終版
   ========================= */

/* タイトル全体 */
.page-id-1152 .entry-content h2{
  margin: 2.2em 0 0.05em;
  padding: 0;
}

/* タイトル下の線 */
.page-id-1152 .entry-content h2::after{
  content: "";
  display: block;
  height: 1px;
  background: rgba(0,0,0,0.12);
  margin-top: 0.10em;
}

/* タイトルリンク */
.page-id-1152 .entry-content h2 a{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
  color: inherit;
  padding: 7px 24px 7px 14px;
  border-radius: 6px;
  transition:
    color .4s ease,
    background-color .4s ease,
    transform .4s ease;
}

/* 円相 共通 */
.page-id-1152 .entry-content h2 a::after{
  content: "";
  width: 24px;
  height: 24px;
  flex-shrink: 0;

  background-image: url("https://www.miki-rawsweets.com/wp-content/uploads/2026/02/ensou-e1772002843171.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;

  filter:
    hue-rotate(215deg)
    saturate(70%)
    brightness(1.4)
    contrast(0.85);

  opacity: .5;
  transform: rotate(0deg);

  transition:
    transform .6s ease,
    opacity .4s ease,
    filter .4s ease;
}

/* 説明文 */
.page-id-1152 .entry-content h2 + p{
  margin-top: 0.34em;
  margin-bottom: 1.0em;
  margin-left: 14px;
  color: #6d86a3;
  font-size: 0.94em;
  line-height: 1.9;
}

/* リンク hover */
.page-id-1152 .entry-content h2 a:hover{
  background: rgba(109,134,163,0.18);
  color: #566f8d;
  transform: translateY(-0.5px);
}

/* 円相 hover 共通 */
.page-id-1152 .entry-content h2 a:hover::after{
  opacity: .85;
  filter:
    hue-rotate(215deg)
    saturate(85%)
    brightness(1.2)
    contrast(0.9);
}

/* 瑞喜菓について */
.page-id-1152 .entry-content h2 a[href*="about-mikika"]::after{
  transform: rotate(10deg);
}
.page-id-1152 .entry-content h2 a[href*="about-mikika"]:hover::after{
  transform: rotate(40deg) scale(1.05);
}

/* はじまりの記憶 */
.page-id-1152 .entry-content h2 a[href*="hajimari-no-kioku"]::after{
  transform: rotate(70deg);
}
.page-id-1152 .entry-content h2 a[href*="hajimari-no-kioku"]:hover::after{
  transform: rotate(120deg) scale(1.05);
}

/* 不動岩 */
.page-id-1152 .entry-content h2 a[href*="fudogan"]::after{
  transform: rotate(135deg);
}
.page-id-1152 .entry-content h2 a[href*="fudogan"]:hover::after{
  transform: rotate(190deg) scale(1.05);
}

/* めぐり */
.page-id-1152 .entry-content h2 a[href*="meguri"]::after{
  transform: rotate(270deg);
}
.page-id-1152 .entry-content h2 a[href*="meguri"]:hover::after{
  transform: rotate(200deg) scale(1.05);
}

/* 源ページ目次 3文字タイトルだけ文字間を広げる */
.page-id-1152 .entry-content a[href*="fudogan"],
.page-id-1152 .entry-content a[href*="meguri"]{
  letter-spacing: 0.3em;
}

/* スマホ本文の左右余白 */
@media (max-width: 768px){
  .entry-content{
    padding-left:18px;
    padding-right:18px;
  }
}

/* ただしトップページは余白なし */
@media (max-width: 768px){
  .home .entry-content{
    padding-left:0;
    padding-right:0;
  }
}

/* 不動岩ページ タイトル文字間 */
.page-id-1571 .entry-title{
  letter-spacing: 0.3em;
}

/* スマホだけ画像をフル幅にする */
@media screen and (max-width: 768px) {

  html, body {
    overflow-x: hidden;
  }

  /* 最後の画像だけ強制フル幅 */
@media screen and (max-width: 768px) {

  html, body {
    overflow-x: hidden;
  }

  body.page-id-1152 .entry-content figure.wp-block-image,
  body.page-id-698 .entry-content figure.wp-block-image {
    width: 96vw !important;
    max-width: 96vw !important;
    margin-left: calc(50% - 48vw) !important;
    margin-right: calc(50% - 48vw) !important;
  }

  body.page-id-1152 .entry-content figure.wp-block-image img,
  body.page-id-698 .entry-content figure.wp-block-image img {
    width: 100% !important;
    max-width: 100% !important;
    height: auto;
    display: block;
  }

}