@charset "UTF-8";

/* =========================================================
   02-components.css
   Component Asset：最小汎用コンポーネント

   Site:
   日本料理 あふひ

   方針：
   ・派手な演出は入れない
   ・テキストは少しだけスッと上がる
   ・写真は白い状態から静かにワイプ表示する
   ・サイズや比率はここでは決めない
   ・具体的な見た目は c-afuhi〇〇 側で作る
   ・c- = component
   ・js- = JavaScript hook
========================================================= */


/* =========================================================
   01. Reveal：軽いフェードアップ

   目的：
   ・テキストの塊や小要素を、少しだけ上に出す
   ・ガチャガチャ動かさず、静かに表示する

   使い方：
   <div class="c-reveal js-reveal">
     ...
   </div>

   遅延：
   c-reveal-delay-1
   c-reveal-delay-2
   c-reveal-delay-3

   JSで .is-visible が付くと発火
========================================================= */

.c-reveal {
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity 1s cubic-bezier(0.25, 0.46, 0.45, 0.94),
    transform 1s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  will-change: opacity, transform;
}

.c-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.c-reveal-delay-1 {
  transition-delay: 0.12s;
}

.c-reveal-delay-2 {
  transition-delay: 0.24s;
}

.c-reveal-delay-3 {
  transition-delay: 0.36s;
}


/* =========================================================
   02. Photo Wipe：静かな写真ワイプ

   目的：
   ・白い状態から、写真がスッと現れる
   ・色幕は使わない
   ・写真サイズや比率は各セクション側で決める

   使い方：
   <figure class="c-photoWipe c-photoWipe--fromRight js-reveal">
     <img src="画像URL" alt="">
   </figure>

   方向：
   c-photoWipe--fromRight
   → 右側から開いて、左へ見えていく印象

   c-photoWipe--fromLeft
   → 左側から開いて、右へ見えていく印象

   JSで .is-visible が付くと発火
========================================================= */

.c-photoWipe {
  position: relative;
  display: block;
  overflow: hidden;
  width: 100%;
  margin: 0;
  background: #fff;
}

.c-photoWipe img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 0;
}


/* 右から左へ開く */
.c-photoWipe--fromRight {
  clip-path: inset(0 0 0 100%);
}

.c-photoWipe--fromRight.is-visible {
  animation: cPhotoWipeFromRight 1s cubic-bezier(0.77, 0, 0.18, 1) forwards;
}

@keyframes cPhotoWipeFromRight {
  0% {
    clip-path: inset(0 0 0 100%);
    transform: scale(1.015);
  }

  100% {
    clip-path: inset(0 0 0 0);
    transform: scale(1);
  }
}


/* 左から右へ開く */
.c-photoWipe--fromLeft {
  clip-path: inset(0 100% 0 0);
}

.c-photoWipe--fromLeft.is-visible {
  animation: cPhotoWipeFromLeft 1s cubic-bezier(0.77, 0, 0.18, 1) forwards;
}

@keyframes cPhotoWipeFromLeft {
  0% {
    clip-path: inset(0 100% 0 0);
    transform: scale(1.015);
  }

  100% {
    clip-path: inset(0 0 0 0);
    transform: scale(1);
  }
}


/* =========================================================
   03. Motion Reduce：動きを減らす設定への対応

   目的：
   ・ユーザー側で「視差効果を減らす」を設定している場合、
     アニメーションを無効化する
========================================================= */

@media (prefers-reduced-motion: reduce) {
  .c-reveal,
  .c-photoWipe,
  .c-photoWipe--fromRight,
  .c-photoWipe--fromLeft {
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
    animation: none !important;
    transition: none !important;
  }
}



/* ======================================================
  あふひ：代表見出し
  フロント・下層共通
====================================================== */

.post_content .c-afuhiSectionTitle,
.entry-content .c-afuhiSectionTitle,
.c-afuhiSectionTitle {
  margin: 0 0 28px;
  font-family:
    "Hiragino Mincho ProN",
    "Hiragino Mincho Pro",
    "Yu Mincho",
    "YuMincho",
    serif !important;
  font-size: clamp(30px, 2.4vw, 36px) !important;
  font-weight: 500 !important;
  line-height: 1.48 !important;
  letter-spacing: 0.05em !important;
  color: #222;
}

@media (max-width: 767px) {
  .post_content .c-afuhiSectionTitle,
  .entry-content .c-afuhiSectionTitle,
  .c-afuhiSectionTitle {
    font-size: 29px !important;
    line-height: 1.5 !important;
  }
}