/* ============================================
 *     
 *    
 *    
 *    CSS
 *    (Chrome / Edge ) 
 *    
 * ============================================ */
@supports (animation-timeline: view()) {
	@media (prefers-reduced-motion: no-preference) {
		.entry-content > *:not(.wp-block-separator) {
			      animation: ken-scroll-fade-in-up linear both;
			      animation-timeline: view();
			      animation-range: entry 0% entry 60%;
			      will-change: opacity, transform;
		}
	}
}

@keyframes ken-scroll-fade-in-up {
	from {
		    opacity: 0;
		    transform: translateY(32px);
	}
	to {
		    opacity: 1;
		    transform: translateY(0);
	}
}

.ken-hero-visual {
    flex: 1 1 48%;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    background: transparent;
}

.ken-hero-visual::before {
    display: none;
}

.ken-hero-main-image {
    display: block;
    width: 100%;
    max-width: 780px;
    height: auto;
    margin: 0;
    overflow: hidden;
    border-radius: 20px;
    box-shadow: 0 16px 40px rgba(16, 43, 68, 0.10);
}

.ken-hero-main-image img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: contain;
    border-radius: 20px;
}

@media screen and (max-width: 780px) {
    .ken-hero-visual {
        width: 100%;
        margin-top: 36px;
        padding-left: 16px;
        padding-right: 16px;
        box-sizing: border-box;
    }

    .ken-hero-main-image {
        width: 100%;
        max-width: none;
        height: auto;
        border-radius: 16px;
    }

    .ken-hero-main-image img {
        width: 100%;
        height: auto;
        object-fit: contain;
        border-radius: 16px;
    }
}
/* ============================================================
 * スクロール表示アニメーション（追記: Claude, 2026-09-09）
 * 目的: 下へスクロールした際、本文・見出し・画像・カード・FAQ・
 *       CTA・投稿一覧などが下から移動しつつぼかしが解け、
 *       不透明度0→1でふわっと表示されるようにする。
 * 実装: CSSのみ（JS・新規プラグイン不使用）。
 *       animation-timeline: view() によるスクロール連動表示。
 *       対応ブラウザ（Chrome/Edge等）のみで有効、非対応環境や
 *       reduced motion環境では常に通常表示（後述の仕組みで担保）。
 * 対象: <main> の内側のみ（ヘッダー・ナビ・フッター・フォームは
 *       <main> の外、またはセレクターで除外）。
 * 既存コード: 上の ken-scroll-fade-in-up ブロックは削除・変更せず
 *       残しています。下記は個別要素へより詳細なセレクターを
 *       指定しているため、対象要素では下記が優先されます。
 * 注記: ご指定の秒数（0.8秒 / 0.08〜0.3秒間隔）は、JS不要の
 *       スクロール連動方式では厳密には指定できないため、
 *       animation-range（スクロール量）で近い体感速度に調整。
 * ============================================================ */

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {

    main :is(
      h1, h2, h3, h4, h5, h6,
      .wp-block-paragraph,
      .wp-block-list,
      .wp-block-image,
      .wp-block-quote,
      .wp-block-embed,
      .wp-block-media-text,
      .wp-block-cover,
      .wp-block-buttons,
      .wp-block-query-title
    ):not(.wp-block-column *):not(.wp-block-post *):not(.wp-block-details *):not(.ken-hero *):not(.ken-consult-cta-section *):not(nav *):not(form *):not(.wp-block-jetpack-contact-form *) {
      animation: ken-reveal-up-blur linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 55%;
      will-change: opacity, transform, filter;
    }

    main .wp-block-columns.wp-block-columns {
      animation: none;
      opacity: 1;
      transform: none;
      filter: none;
    }

    main .wp-block-columns > .wp-block-column {
      animation: ken-reveal-up-blur linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 55%;
      will-change: opacity, transform, filter;
    }

    main .wp-block-columns > .wp-block-column:nth-child(2) { animation-range: entry 6% entry 61%; }
    main .wp-block-columns > .wp-block-column:nth-child(3) { animation-range: entry 12% entry 67%; }
    main .wp-block-columns > .wp-block-column:nth-child(4) { animation-range: entry 18% entry 73%; }
    main .wp-block-columns > .wp-block-column:nth-child(n+5) { animation-range: entry 20% entry 75%; }

    main .wp-block-post-template.wp-block-post-template {
      animation: none;
      opacity: 1;
      transform: none;
      filter: none;
    }

    main .wp-block-post-template > .wp-block-post {
      animation: ken-reveal-up-blur linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 55%;
      will-change: opacity, transform, filter;
    }

    main .wp-block-post-template > .wp-block-post:nth-child(2) { animation-range: entry 6% entry 61%; }
    main .wp-block-post-template > .wp-block-post:nth-child(3) { animation-range: entry 12% entry 67%; }
    main .wp-block-post-template > .wp-block-post:nth-child(4) { animation-range: entry 18% entry 73%; }
    main .wp-block-post-template > .wp-block-post:nth-child(n+5) { animation-range: entry 20% entry 75%; }

    main .wp-block-details.wp-block-details {
      animation: ken-reveal-up-blur linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 55%;
      will-change: opacity, transform, filter;
    }

    main .wp-block-details:nth-of-type(2) { animation-range: entry 4% entry 59%; }
    main .wp-block-details:nth-of-type(3) { animation-range: entry 8% entry 63%; }
    main .wp-block-details:nth-of-type(4) { animation-range: entry 12% entry 67%; }
    main .wp-block-details:nth-of-type(n+5) { animation-range: entry 14% entry 69%; }

    main .ken-consult-cta-section.ken-consult-cta-section {
      animation: ken-reveal-up-blur linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 55%;
      will-change: opacity, transform, filter;
    }

  }
}

@keyframes ken-reveal-up-blur {
  from {
    opacity: 0;
    transform: translateY(30px);
    filter: blur(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
}

@media screen and (max-width: 780px) {
  @keyframes ken-reveal-up-blur {
    from {
      opacity: 0;
      transform: translateY(22px);
      filter: blur(5px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
      filter: blur(0);
    }
  }
}
/* Note: prefers-reduced-motion: reduce is handled by the
   'no-preference' media guard above - no extra rule needed. */