/*
Theme Name: Blocksy Child
Template: blocksy
Version: 2.0
*/

:root {
  --kk-beige:      #F4EBDD;
  --kk-beige-soft: #FAF5EC;
  --kk-brown:      #3E2A1E;
  --kk-brown-soft: #7A6552;
  --kk-orange:     #C67C3E;
  --kk-orange-soft:#E8B98A;
  --kk-white:      #FFFFFF;
  --kk-line:       rgba(62,42,30,.12);

  --kk-font-serif: "Kaisei Decol", "Noto Serif JP", serif;
  --kk-font-sans:  "Noto Sans JP", "Hiragino Kaku Gothic ProN", sans-serif;
}

body,
body p, body li, body span, body a, body div {
  font-family: var(--kk-font-sans) !important;
}

body {
  background: var(--kk-beige-soft) !important;
  color: var(--kk-brown);
}

h1, h2, h3, h4,
.kk-serif {
  font-family: var(--kk-font-serif) !important;
}

/* ── スティッキーヘッダー ── */
#header.ct-header {
  position: sticky;
  top: 0;
  z-index: 999;
  background: rgba(250, 245, 236, .92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* ── スクロールリビール ──
   .kk-js が html に付いている(=JSが動いている)時だけ初期状態を隠す。
   JS未実行・エラー時は常に表示されるフェイルセーフ。 */
.kk-js .kk-reveal {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity .9s cubic-bezier(.16,1,.3,1), transform .9s cubic-bezier(.16,1,.3,1);
  transition-delay: var(--kk-delay, 0s);
  will-change: opacity, transform;
}
.kk-js .kk-reveal.kk-visible {
  opacity: 1;
  transform: none;
}
.kk-js .kk-reveal-img {
  opacity: 0;
  transform: scale(1.06);
  transition: opacity 1.1s cubic-bezier(.16,1,.3,1), transform 1.4s cubic-bezier(.16,1,.3,1);
  transition-delay: var(--kk-delay, 0s);
}
.kk-js .kk-reveal-img.kk-visible {
  opacity: 1;
  transform: scale(1);
}
@media (prefers-reduced-motion: reduce) {
  .kk-js .kk-reveal, .kk-js .kk-reveal-img {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* ── ホバーインタラクション (PC専用) ── */
@media (hover: hover) {
  .kk-bento-tile,
  .kk-value-card,
  #brand-story .kk-story-grid > div {
    transition: transform .35s cubic-bezier(.16,1,.3,1), box-shadow .35s cubic-bezier(.16,1,.3,1);
  }
  .kk-bento-tile:hover,
  .kk-value-card:hover,
  #brand-story .kk-story-grid > div:hover {
    transform: translateY(-5px) !important;
    box-shadow: 0 18px 36px rgba(62,42,30,.14) !important;
  }
  a.kk-cta:hover {
    transform: translateY(-2px);
    filter: brightness(1.05);
  }
  #products article a[href]:hover {
    filter: brightness(1.06);
  }
}

/* ── FAQ開閉アイコンの回転 ── */
.kk-faq-item summary svg {
  transition: transform .3s ease;
}
.kk-faq-item[open] summary svg {
  transform: rotate(180deg);
}