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

/* ============================================================
   鳴風堂 海外サイト 共通スタイル  2026-09-20
   ============================================================ */

:root{
  --mf-gap-s : clamp(12px, 2.5vw, 24px);
  --mf-gap-m : clamp(24px, 5vw,  48px);
  --mf-gap-l : clamp(40px, 8vw,  96px);
  --mf-side  : 5%;
  --mf-read  : 680px;
}

/* ------------------------------------------------------------
   幅（調整はここの数値だけで行う）
   ------------------------------------------------------------ */
.entry-content .mf-hero{
  width        : 85%;
  margin-left  : auto;
  margin-right : auto;
}
.entry-content .mf-photo{
  width        : 70%;
  margin-left  : auto;
  margin-right : auto;
}
@media (max-width: 834px){
  .entry-content .mf-hero { width : 100%; }
  .entry-content .mf-photo{ width :  90%; }
}

/* ------------------------------------------------------------
   スライダー本体
   ------------------------------------------------------------ */
.entry-content .mf-hero{
  position     : relative;
  aspect-ratio : 2000 / 700;
  overflow     : hidden;
  background   : #000;
}
@media (max-width: 834px){
  .entry-content .mf-hero{ aspect-ratio : 1200 / 1400; }
}

.entry-content .mf-hero .mf-hero__slide{
  position   : absolute;
  inset      : 0;
  visibility : hidden;
}
.entry-content .mf-hero .mf-hero__slide.is-active{ visibility : visible; }

.entry-content .mf-hero .mf-hero__slide picture,
.entry-content .mf-hero .mf-hero__slide img{
  display   : block;
  width     : 100%;
  height    : 100%;
  max-width : none;
  margin    : 0;
}
.entry-content .mf-hero .mf-hero__slide img{ object-fit : cover; }

.entry-content .mf-hero .mf-hero__shade{
  position    : absolute;
  inset       : 0;
  background  : #000;
  opacity     : 1;
  will-change : opacity;
}

/* ------------------------------------------------------------
   画像
   ------------------------------------------------------------ */
.entry-content img{
  max-width : 100%;
  height    : auto;
  display   : block;
}
.entry-content img.mf-inline{
  display        : inline;
  vertical-align : middle;
}

/* ------------------------------------------------------------
   写真ブロック
   ------------------------------------------------------------ */
.entry-content .mf-photo picture{ display : block; }
.entry-content .mf-photo img{
  width        : 100%;
  max-width    : 100%;
  height       : auto;
  display      : block;
  aspect-ratio : 2000 / 900;
  object-fit   : cover;
}
@media (max-width: 834px){
  .entry-content .mf-photo img{ aspect-ratio : 1200 / 1400; }
}

/* ------------------------------------------------------------
   画像ブロック（WordPress標準）
   ------------------------------------------------------------ */
.entry-content figure,
.entry-content .wp-block-image{
  margin : 0 auto var(--mf-gap-m);
}
.entry-content figure:last-child,
.entry-content .wp-block-image:last-child{
  margin-bottom : 0;
}
.entry-content figcaption{
  margin-top  : var(--mf-gap-s);
  font-size   : 0.86em;
  line-height : 1.7;
  text-align  : center;
}

/* ------------------------------------------------------------
   セクション
   ------------------------------------------------------------ */
.mf-section{
  margin-bottom : var(--mf-gap-l);
  padding-left  : var(--mf-side);
  padding-right : var(--mf-side);
}
.mf-section:last-child{ margin-bottom : 0; }
.mf-section.mf-full{
  padding-left  : 0;
  padding-right : 0;
}
.mf-read{
  max-width    : var(--mf-read);
  margin-left  : auto;
  margin-right : auto;
}

/* ------------------------------------------------------------
   段落
   ------------------------------------------------------------ */
.mf-section p{
  margin      : 0 0 var(--mf-gap-s);
  line-height : 1.9;
}
.mf-section p:last-child{ margin-bottom : 0; }
.mf-section p:empty,
.entry-content p:empty{ display : none; }
.mf-section p > br:only-child{ display : none; }

/* ------------------------------------------------------------
   見出し
   ------------------------------------------------------------ */
.mf-section h2,
.mf-section h3{
  margin      : 0 0 var(--mf-gap-s);
  line-height : 1.5;
}
.mf-section :is(h2, h3) + p{ margin-top : 0; }

/* ------------------------------------------------------------
   間隔の微調整
   ------------------------------------------------------------ */
.mf-mb0 { margin-bottom : 0 !important; }
.mf-mb-s{ margin-bottom : var(--mf-gap-s) !important; }
.mf-mb-m{ margin-bottom : var(--mf-gap-m) !important; }
.mf-mb-l{ margin-bottom : var(--mf-gap-l) !important; }