/**
 * YHT Blog Search Ver.2 Overlay CSS TEST
 *
 * 対象:
 * [yht_blog_search_v2_test]
 *
 * WPCodeの「CSSスニペット」へ貼り付けてください。
 * <style> タグは不要です。
 */

/* =========================================================
   全画面検索を開いている間
========================================================= */

html.yht-blog-search-v2-is-open,
body.yht-blog-search-v2-is-open {
  overscroll-behavior: none !important;
}

body.yht-blog-search-v2-is-open {
  overflow: hidden !important;
  touch-action: none !important;
}

/* =========================================================
   全画面オーバーレイ
========================================================= */

.yht-blog-search-v2-overlay[hidden] {
  display: none !important;
}

.yht-blog-search-v2-overlay {
  position: fixed !important;
  inset: 0 !important;
  z-index: 2147483000 !important;

  display: flex !important;
  flex-direction: column !important;

  width: 100% !important;
  max-width: none !important;
  height: 100vh !important;
  height: 100dvh !important;
  margin: 0 !important;
  padding: env(safe-area-inset-top) env(safe-area-inset-right)
    env(safe-area-inset-bottom) env(safe-area-inset-left) !important;

  color: #2f3a31 !important;
  background: #f5f7f4 !important;
  border: 0 !important;
  box-shadow: none !important;

  font-family: "Noto Serif JP", "Yu Mincho", "游明朝", serif !important;
  box-sizing: border-box !important;

  opacity: 1 !important;
  visibility: visible !important;
}

.yht-blog-search-v2-overlay,
.yht-blog-search-v2-overlay *,
.yht-blog-search-v2-overlay *::before,
.yht-blog-search-v2-overlay *::after {
  box-sizing: border-box !important;
}

/* =========================================================
   上部検索エリア
========================================================= */

.yht-blog-search-v2-header {
  flex: 0 0 auto !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 14px 14px 13px !important;

  background: rgba(245, 247, 244, 0.98) !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(75, 125, 85, 0.16) !important;
  box-shadow: 0 3px 14px rgba(28, 50, 32, 0.05) !important;
}

.yht-blog-search-v2-form {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 72px auto !important;
  align-items: center !important;
  gap: 8px !important;

  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

.yht-blog-search-v2-input-wrap {
  position: relative !important;
  display: block !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

.yht-blog-search-v2-input-wrap::before {
  content: "" !important;
  position: absolute !important;
  top: 50% !important;
  left: 15px !important;
  z-index: 2 !important;

  width: 14px !important;
  height: 14px !important;

  border: 2px solid rgba(75, 125, 85, 0.72) !important;
  border-radius: 50% !important;
  transform: translateY(-62%) !important;
  pointer-events: none !important;
}

.yht-blog-search-v2-input-wrap::after {
  content: "" !important;
  position: absolute !important;
  top: 50% !important;
  left: 28px !important;
  z-index: 2 !important;

  width: 8px !important;
  height: 2px !important;

  background: rgba(75, 125, 85, 0.72) !important;
  border-radius: 999px !important;
  transform: translateY(6px) rotate(45deg) !important;
  transform-origin: left center !important;
  pointer-events: none !important;
}

.yht-blog-search-v2-input {
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
  height: 48px !important;
  min-height: 48px !important;
  margin: 0 !important;
  padding: 0 12px 0 44px !important;

  color: #2f3630 !important;
  background: #fff !important;
  border: 1px solid rgba(75, 125, 85, 0.34) !important;
  border-radius: 9px !important;
  box-shadow: none !important;
  outline: none !important;

  font-family: "Noto Serif JP", "Yu Mincho", "游明朝", serif !important;
  font-size: 16px !important;
  line-height: normal !important;

  appearance: none !important;
  -webkit-appearance: none !important;
}

.yht-blog-search-v2-input::placeholder {
  color: rgba(60, 70, 60, 0.52) !important;
  opacity: 1 !important;
}

.yht-blog-search-v2-input:focus {
  border-color: rgba(75, 125, 85, 0.78) !important;
  outline: 3px solid rgba(75, 125, 85, 0.15) !important;
  outline-offset: 0 !important;
}

.yht-blog-search-v2-input::-webkit-search-decoration,
.yht-blog-search-v2-input::-webkit-search-cancel-button,
.yht-blog-search-v2-input::-webkit-search-results-button,
.yht-blog-search-v2-input::-webkit-search-results-decoration {
  display: none !important;
  -webkit-appearance: none !important;
}

.yht-blog-search-v2-submit,
.yht-blog-search-v2-cancel {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  min-height: 48px !important;
  margin: 0 !important;

  border-radius: 9px !important;
  box-shadow: none !important;

  font-family: "Noto Serif JP", "Yu Mincho", "游明朝", serif !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  cursor: pointer !important;

  appearance: none !important;
  -webkit-appearance: none !important;
}

.yht-blog-search-v2-submit {
  width: 72px !important;
  padding: 0 12px !important;

  color: #fff !important;
  background: #4b7d55 !important;
  border: 1px solid #4b7d55 !important;

  font-size: 15px !important;
}

.yht-blog-search-v2-submit:active {
  background: #3f5d27 !important;
  border-color: #3f5d27 !important;
}

.yht-blog-search-v2-cancel {
  min-width: 66px !important;
  padding: 0 4px !important;

  color: #4b7d55 !important;
  background: transparent !important;
  border: 0 !important;

  font-size: 14px !important;
}

/* =========================================================
   入力エラー
========================================================= */

.yht-blog-search-v2-message {
  min-height: 20px !important;
  margin: 7px 0 0 !important;
  padding: 0 2px !important;

  color: #8b1e1e !important;
  font-size: 13px !important;
  line-height: 1.5 !important;
}

.yht-blog-search-v2-message:empty {
  display: none !important;
}

/* =========================================================
   スクロール領域
========================================================= */

.yht-blog-search-v2-content {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 22px 18px calc(28px + env(safe-area-inset-bottom)) !important;

  overflow-x: hidden !important;
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
  -webkit-overflow-scrolling: touch !important;
  touch-action: pan-y !important;
}

.yht-blog-search-v2-section {
  width: 100% !important;
  max-width: 680px !important;
  margin: 0 auto 30px !important;
  padding: 0 !important;
}

.yht-blog-search-v2-section:last-child {
  margin-bottom: 0 !important;
}

.yht-blog-search-v2-section-header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 14px !important;

  margin: 0 0 12px !important;
  padding: 0 !important;
}

.yht-blog-search-v2-heading {
  margin: 0 !important;
  padding: 0 !important;

  color: #3f5d27 !important;
  background: transparent !important;
  border: 0 !important;

  font-family: "Noto Serif JP", "Yu Mincho", "游明朝", serif !important;
  font-size: 18px !important;
  font-weight: 600 !important;
  line-height: 1.5 !important;
  letter-spacing: 0.03em !important;
}

.yht-blog-search-v2-clear {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  min-height: 40px !important;
  margin: 0 !important;
  padding: 0 4px !important;

  color: #678f5e !important;
  background: transparent !important;
  border: 0 !important;

  font-family: "Noto Serif JP", "Yu Mincho", "游明朝", serif !important;
  font-size: 13px !important;
  cursor: pointer !important;
}

/* =========================================================
   検索履歴
========================================================= */

.yht-blog-search-v2-history-list {
  display: grid !important;
  gap: 8px !important;

  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;

  list-style: none !important;
}

.yht-blog-search-v2-history-item {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 44px !important;
  align-items: stretch !important;
  gap: 4px !important;

  width: 100% !important;
  min-height: 48px !important;
  margin: 0 !important;
  padding: 0 !important;

  background: rgba(255, 255, 255, 0.82) !important;
  border: 1px solid rgba(75, 125, 85, 0.14) !important;
  border-radius: 9px !important;
  overflow: hidden !important;
}

.yht-blog-search-v2-history-keyword,
.yht-blog-search-v2-history-delete {
  margin: 0 !important;
  border: 0 !important;
  box-shadow: none !important;
  cursor: pointer !important;
  appearance: none !important;
  -webkit-appearance: none !important;
}

.yht-blog-search-v2-history-keyword {
  display: flex !important;
  align-items: center !important;
  min-width: 0 !important;
  min-height: 48px !important;
  padding: 10px 14px !important;

  color: #344336 !important;
  background: transparent !important;

  font-family: "Noto Serif JP", "Yu Mincho", "游明朝", serif !important;
  font-size: 15px !important;
  line-height: 1.5 !important;
  text-align: left !important;
  overflow-wrap: anywhere !important;
}

.yht-blog-search-v2-history-delete {
  position: relative !important;
  width: 44px !important;
  min-width: 44px !important;
  min-height: 44px !important;
  padding: 0 !important;

  color: transparent !important;
  background: transparent !important;
}

.yht-blog-search-v2-history-delete::before,
.yht-blog-search-v2-history-delete::after {
  content: "" !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;

  width: 15px !important;
  height: 1.5px !important;

  background: rgba(75, 95, 79, 0.65) !important;
  border-radius: 999px !important;
}

.yht-blog-search-v2-history-delete::before {
  transform: translate(-50%, -50%) rotate(45deg) !important;
}

.yht-blog-search-v2-history-delete::after {
  transform: translate(-50%, -50%) rotate(-45deg) !important;
}

.yht-blog-search-v2-empty {
  margin: 0 !important;
  padding: 16px 14px !important;

  color: rgba(55, 70, 58, 0.58) !important;
  background: rgba(255, 255, 255, 0.55) !important;
  border: 1px dashed rgba(75, 125, 85, 0.20) !important;
  border-radius: 9px !important;

  font-size: 14px !important;
  line-height: 1.7 !important;
  text-align: center !important;
}

/* =========================================================
   おすすめキーワード
========================================================= */

.yht-blog-search-v2-keywords {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 9px !important;

  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

.yht-blog-search-v2-keyword {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;

  min-height: 44px !important;
  margin: 0 !important;
  padding: 9px 14px !important;

  color: #3f5d27 !important;
  background: #e9f0e9 !important;
  border: 1px solid rgba(75, 125, 85, 0.20) !important;
  border-radius: 999px !important;
  box-shadow: none !important;

  font-family: "Noto Serif JP", "Yu Mincho", "游明朝", serif !important;
  font-size: 14px !important;
  line-height: 1.4 !important;
  cursor: pointer !important;

  appearance: none !important;
  -webkit-appearance: none !important;
}

/* =========================================================
   アクセシビリティ
========================================================= */

.yht-blog-search-v2-visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  margin: -1px !important;
  padding: 0 !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.yht-blog-search-v2-submit:focus-visible,
.yht-blog-search-v2-cancel:focus-visible,
.yht-blog-search-v2-clear:focus-visible,
.yht-blog-search-v2-history-keyword:focus-visible,
.yht-blog-search-v2-history-delete:focus-visible,
.yht-blog-search-v2-keyword:focus-visible {
  outline: 3px solid rgba(75, 125, 85, 0.22) !important;
  outline-offset: 2px !important;
}

/* =========================================================
   小型端末
========================================================= */

@media (max-width: 380px) {
  .yht-blog-search-v2-header {
    padding-right: 10px !important;
    padding-left: 10px !important;
  }

  .yht-blog-search-v2-form {
    grid-template-columns: minmax(0, 1fr) 66px auto !important;
    gap: 6px !important;
  }

  .yht-blog-search-v2-submit {
    width: 66px !important;
    padding-right: 8px !important;
    padding-left: 8px !important;
    font-size: 14px !important;
  }

  .yht-blog-search-v2-cancel {
    min-width: 62px !important;
    font-size: 13px !important;
  }

  .yht-blog-search-v2-content {
    padding-right: 14px !important;
    padding-left: 14px !important;
  }
}

/* =========================================================
   PC・タブレットでは全画面UIを出さない
========================================================= */

@media (min-width: 641px) {
  .yht-blog-search-v2-overlay {
    display: none !important;
  }
}

/* =========================================================
   動きを減らす設定
========================================================= */

@media (prefers-reduced-motion: reduce) {
  .yht-blog-search-v2-overlay,
  .yht-blog-search-v2-overlay * {
    scroll-behavior: auto !important;
    transition: none !important;
    animation: none !important;
  }
}