/*
 * Washi (Japanese paper) texture background.
 * v7: 全セクションに和紙テクスチャを適用。
 *     白系: bodyにmultiplyブレンドで直接適用。
 *     紺色グラデーション系: ::after 擬似要素 + mix-blend-mode: soft-light
 *       で不透明な紺色の上に和紙の繊維感を浮き出させる。
 *     background-attachment: fixed でセクション間の繋ぎ目を解消。
 */

:root {
  --washi-image:
    url('../img/washi-texture-seamless.webp'),
    url('../img/washi-texture-seamless.webp'),
    url('../img/washi-texture-seamless.webp');
  --washi-repeat:  repeat, repeat, repeat;
  --washi-size:    401px, 613px, 883px;
  --washi-pos:     0 0, 41px 67px, 211px 313px;
  --washi-attach:  fixed, fixed, fixed;
}

/* body 全体に和紙テクスチャ（白背景 multiply） */
body {
  background-color: #FFFFFF;
  background-image:        var(--washi-image);
  background-repeat:       var(--washi-repeat);
  background-blend-mode:   multiply, multiply, multiply;
  background-size:         var(--washi-size);
  background-position:     var(--washi-pos);
  background-attachment:   var(--washi-attach);
}

/* 白/ライト系セクション・カード: 明示的に和紙を適用（bodyと同じmultiply） */
.washi,
.bg-white:not(button):not(input):not(select):not(textarea),
.bg-off-white,
.bg-warm-gray,
.bg-primary-light,
.bg-gray-50,
.bg-gray-100,
.card,
.feature-card,
.problem-card,
.step-card,
.solution-card,
.case-card,
.pricing-card {
  background-image:        var(--washi-image)  !important;
  background-repeat:       var(--washi-repeat) !important;
  background-blend-mode:   multiply, multiply, multiply !important;
  background-size:         var(--washi-size)   !important;
  background-position:     var(--washi-pos)    !important;
  background-attachment:   var(--washi-attach) !important;
}

/* =================================================================
 * 紺色/ダーク系セクション: ::after 擬似要素でオーバーレイ
 * 不透明な紺色グラデーションの上に和紙の繊維感を浮き出させる。
 * soft-light は暗い下地でも白テクスチャが穏やかに明るく浮き出る。
 * ================================================================= */
section.bg-gradient-to-br:not(#hero),
section.bg-gradient-to-r:not(#hero),
section[class*="from-[#1E3A5F]"]:not(#hero),
section[class*="from-[#14294D]"]:not(#hero),
section.bg-primary:not(#hero),
section.bg-dark:not(#hero) {
  position: relative;
  overflow: hidden;
}

section.bg-gradient-to-br:not(#hero)::after,
section.bg-gradient-to-r:not(#hero)::after,
section[class*="from-[#1E3A5F]"]:not(#hero)::after,
section[class*="from-[#14294D]"]:not(#hero)::after,
section.bg-primary:not(#hero)::after,
section.bg-dark:not(#hero)::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:      var(--washi-image);
  background-repeat:     var(--washi-repeat);
  background-size:       var(--washi-size);
  background-position:   var(--washi-pos);
  background-attachment: var(--washi-attach);
  mix-blend-mode: soft-light;
  opacity: 0.30;
  pointer-events: none;
  z-index: 0;
}

/* FV: HP方式 — background-imageで直接multiplyブレンド */
#hero {
  background-color: #224068 !important;
  background-image:
    url('../img/washi-texture-seamless.webp'),
    url('../img/washi-texture-seamless.webp'),
    url('../img/washi-texture-seamless.webp') !important;
  background-repeat: repeat, repeat, repeat !important;
  background-blend-mode: multiply, multiply, multiply !important;
  background-size: 401px, 613px, 883px !important;
  background-position: 0 0, 41px 67px, 211px 313px !important;
  position: relative;
  overflow: hidden;
}
#hero > * {
  position: relative;
  z-index: 1;
}

/* 紺色セクション内のコンテンツを擬似要素の上に */
section.bg-gradient-to-br:not(#hero) > *,
section.bg-gradient-to-r:not(#hero) > *,
section[class*="from-[#1E3A5F]"]:not(#hero) > *,
section[class*="from-[#14294D]"]:not(#hero) > *,
section.bg-primary:not(#hero) > *,
section.bg-dark:not(#hero) > * {
  position: relative;
  z-index: 1;
}

/* フッターも同様に soft-light オーバーレイ */
footer.bg-primary {
  position: relative;
  overflow: hidden;
}
footer.bg-primary::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:      var(--washi-image);
  background-repeat:     var(--washi-repeat);
  background-size:       var(--washi-size);
  background-position:   var(--washi-pos);
  background-attachment: var(--washi-attach);
  mix-blend-mode: soft-light;
  opacity: 0.30;
  pointer-events: none;
  z-index: 0;
}
footer.bg-primary > * {
  position: relative;
  z-index: 1;
}

/* ---- clip-path 逆三角形: problems → solution の遷移 ---- */
#problems {
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 60px), 50% 100%, 0 calc(100% - 60px));
}
#problems + section {
  margin-top: -60px;
  padding-top: calc(60px + 4rem);
}
@media (min-width: 768px) {
  #problems {
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 100px), 50% 100%, 0 calc(100% - 100px));
  }
  #problems + section {
    margin-top: -100px;
    padding-top: calc(100px + 4rem);
  }
}

/* ヘッダー: HP方式で和紙テクスチャを直接multiplyブレンド */
header.bg-primary {
  background-color: #224068 !important;
  background-image:
    url('../img/washi-texture-seamless.webp'),
    url('../img/washi-texture-seamless.webp'),
    url('../img/washi-texture-seamless.webp') !important;
  background-repeat: repeat, repeat, repeat !important;
  background-blend-mode: multiply, multiply, multiply !important;
  background-size: 401px, 613px, 883px !important;
  background-position: 0 0, 13px 47px, 101px 197px !important;
}

/* 小さいUI要素は和紙なし */
button, input, select, textarea,
.dot, .badge {
  background-image: none !important;
  background-blend-mode: normal !important;
}

/* =========================================================
 *  Navy-header overrides
 * ========================================================= */
header.bg-primary {
  color: #ffffff;
}

header.bg-primary a,
header.bg-primary .text-gray-500,
header.bg-primary .text-gray-600,
header.bg-primary .text-gray-700,
header.bg-primary .text-gray-800,
header.bg-primary .text-gray-900,
header.bg-primary .text-primary,
header.bg-primary .text-dark {
  color: rgba(255, 255, 255, 0.92) !important;
}

header.bg-primary a:hover,
header.bg-primary .hover\:text-gray-900:hover,
header.bg-primary .hover\:text-gray-700:hover,
header.bg-primary .hover\:text-primary:hover,
header.bg-primary .hover\:text-white:hover {
  color: #ffffff !important;
}

header.bg-primary .border-gray-100,
header.bg-primary .border-gray-200,
header.bg-primary .border-gray-300 {
  border-color: rgba(255, 255, 255, 0.18) !important;
}

header.bg-primary #mobileMenu,
header.bg-primary .mobile-menu {
  background-color: #1E3A5F !important;
  border-top-color: rgba(255, 255, 255, 0.18) !important;
}
header.bg-primary #mobileMenu a,
header.bg-primary .mobile-menu a {
  color: rgba(255, 255, 255, 0.92) !important;
}
header.bg-primary #mobileMenuBtn {
  color: #ffffff !important;
}