/*
 Theme Name: Hello Elementor Child
 Template: hello-elementor
*/
/* =========================================
   1. Global base styles
   -----------------------------------------
   サイト全体の基本設定
========================================= */

/* Base font settings */
html {
  font-size: 16px;
  scroll-behavior: smooth;
}

/* Body text (Meaning, Usage, examples, paragraphs) */
body {
  font-family: "Inter", "Noto Sans JP", sans-serif;
  color: #222;
  background: #fff;
  line-height: 1.7;
  margin: 0;
  padding: 0;
}

/* ============================
   UI elements use Saira
   ============================ */

/* ヘッダー・ナビ・タイトル周り */
#site-header,
#site-header a,
.site-title,
.site-description,
.site-navigation a {
  font-family: "Saira", sans-serif !important;
}

/* 見出し（h1〜h6） */
h1, h2, h3, h4, h5, h6 {
  font-family: "Saira", sans-serif !important;
}

/* トップページの最新語リスト */
.dictionary-latest-list .word-title {
  font-family: "Saira", sans-serif !important;
}

/* ページタイトル（single dictionary の h1 など） */
.entry-title,
.page-title {
  font-family: "Saira", sans-serif !important;
}

/* UI の細かい部分 */
button,
input,
label,
.menu a,
.pagination,
.breadcrumb,
.widget {
  font-family: "Saira", sans-serif !important;
}


/* リンクの基本スタイル */
a {
  color: #1E73BE !important;
  text-decoration: none;
  transition: 0.2s ease;
}

a:hover {
  color: #00C8FF !important;
}

/* 画像のリセット */
img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* 見出しの統一 */
h1, h2, h3, h4, h5, h6 {
  font-weight: 700;
  line-height: 1.4;
  margin: 1.6em 0 0.8em;
  color: #111;
}

/* 段落 */
p {
  margin: 1em 0;
}

/* リストのリセット */
ul, ol {
  margin: 1em 0 1em 1.4em;
  padding: 0;
}

/* コンテナ（全ページ共通） */
.container {
  width: min(100%, 900px);
  margin: 0 auto;
  padding: 0 16px;
}

/* =========================================
   Global list marker — black square
========================================= */

/* Reset all UL markers globally */
ul {
  list-style: none !important;
  padding-left: 0 !important;
  margin-left: 1.4em;
}

/* Apply square marker to all LI */
ul li {
  position: relative;
  padding-left: 1.4em !important;
  margin-bottom: 0.6em;
  overflow: visible;
}

/* Square marker */
ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.45em; 
  width: 0.55em; 
  height: 0.55em;
  background: #000000;
  display: block;
}

/* 関連語グレーアウト */
.not-exist {
    color: #aaa;
    pointer-events: none;
    opacity: 0.6;
}


/* =========================================
   2. Layout adjustments
   -----------------------------------------
   余白・レスポンシブ・コンテナ調整
========================================= */

/* セクション間の余白（統一ルール） */
.section {
  padding: 48px 0;
}

@media (max-width: 768px) {
  .section {
    padding: 32px 0;
  }
}

/* グローバルコンテナ（中央揃え） */
.container {
  width: min(100%, 900px);
  margin: 0 auto;
  padding: 0 16px;
}

/* グリッドの基本（カード一覧などで使用） */
.grid {
  display: grid;
  gap: 24px;
}

@media (min-width: 768px) {
  .grid-2 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: repeat(3, 1fr); }
}

/* PC / スマホのブレークポイント */
@media (max-width: 768px) {
  .pc-only { display: none !important; }
}

@media (min-width: 769px) {
  .sp-only { display: none !important; }
}


/* =========================================
   3. Header / Navigation
   -----------------------------------------
   ヘッダー全体のレイアウトとナビゲーション調整
========================================= */

/* ヘッダー全体 */
.site-header {
  width: 100%;
  background: #ffffff;
  border-bottom: 1px solid #e5e7eb;
  position: sticky;
  top: 0;
  z-index: 1000;
}

/* 内側のレイアウト（横並び） */
.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 20px;
  width: min(100%, 1100px);
  margin: 0 auto;
}

/* ロゴ（サイトタイトル） */
.site-title a {
  font-size: 1.3rem;
  font-weight: 700;
  color: #111;
  letter-spacing: 0.3px;
}

/* キャッチコピー */
.site-description {
  margin: 4px 0 0;
  font-size: 0.85rem;
  color: #666;
}

/* ナビゲーション */
.site-navigation .menu {
  display: flex;
  gap: 24px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.site-navigation .menu li a {
  color: #333;
  font-weight: 500;
  padding: 6px 0;
  position: relative;
  transition: 0.2s ease;
}

/* ホバー時の青ライン */
.site-navigation .menu li a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 0%;
  height: 2px;
  background: #00C8FF !important;
  transition: width 0.25s ease;
}

.site-navigation .menu li a:hover::after {
  width: 100%;
}

/* スマホ */
@media (max-width: 768px) {
  .site-header {
    flex-direction: column;
    align-items: flex-start;
    padding: 16px;
  }

  .site-navigation .menu {
    margin-top: 12px;
    gap: 16px;
  }
}


/* グローバルナビのリストマーカーを消す */
.site-navigation ul,
.site-navigation li {
  list-style: none !important;
}

.site-navigation li::before {
  content: none !important;
}


/* =========================================
   4. Search & Filter (検索UI)
   -----------------------------------------
   検索フォームのスタイル
========================================= */

/* =========================================
   4. Search & Filter (検索UI)
========================================= */

/* Search & Filter 全体 */
.searchandfilter {
  margin: 32px 0;
}

/* UL を横並び（PC） */
.searchandfilter ul {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 16px;
  padding: 0;
  margin: 0;
  list-style: none;
}

/* 各フィールド */
.searchandfilter li {
  display: flex;
  flex-direction: column;
}

/* ラベル */
.searchandfilter label {
  font-size: 0.85rem;
  color: #555;
  margin-bottom: 4px;
}

/* テキスト入力（キーワード） */
.searchandfilter input[type="text"] {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  font-size: 1rem;
  transition: 0.2s ease;
}

.searchandfilter input[type="text"]:focus {
  border-color: #1E73BE;
  box-shadow: 0 0 0 2px rgba(26,115,232,0.15);
}

/* セレクトボックス */
.searchandfilter select {
  min-width: 180px;
  padding: 10px 12px;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  background: #fff;
  font-family: "Saira", sans-serif !important;
  font-size: 1rem;
  transition: 0.2s ease;
}

.searchandfilter select:focus {
  border-color: #1E73BE;
  box-shadow: 0 0 0 2px rgba(26,115,232,0.15);
}

/* 検索ボタン */
.searchandfilter input[type="submit"] {
  background: #1E73BE;
  color: #fff;
  border: none;
  padding: 10px 18px;
  border-radius: 6px;
  font-size: 1rem;
  cursor: pointer;
  transition: 0.2s ease;
}

.searchandfilter input[type="submit"]:hover {
  background: #00C8FF;
}

/* キーワードだけフル幅にする */
@media (min-width: 769px) {
  .searchandfilter li.sf-field-search {
    flex-basis: 100% !important;
  }
}
/* Archetype は通常幅に戻す */
.searchandfilter li.sf-field-taxonomy-archetype {
  flex-basis: auto !important;
}

@media (max-width: 768px) {
  .searchandfilter ul {
    flex-direction: column;
    gap: 16px;
  }

  .searchandfilter select,
  .searchandfilter input[type="text"] {
    width: 100%;
  }
}

.searchandfilter ul,
.searchandfilter ul li {
  list-style: none !important;
}

.searchandfilter ul li::before {
  content: none !important;
}


/* A〜Z ナビ */
.alphabet-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 10px;
  margin: 32px 0;
  font-size: 1.1rem;
}

/* 有効な文字（リンク） */
.alphabet-nav a {
  padding: 6px 10px;
  border-radius: 6px;
  background: #f3f4f6;
  color: #1E73BE;
  font-weight: 600;
  transition: 0.2s ease;
}

.alphabet-nav a:hover {
  background: #e8f0fe;
  color: #0b59c7;
}

.alphabet-nav a, .alphabet-nav .disabled-letter { 
	font-family: "Saira", sans-serif !important; 
}

/* 無効な文字（グレーアウト） */
.alphabet-nav .disabled-letter {
  padding: 6px 10px;
  border-radius: 6px;
  background: #f9fafb;
  color: #c4c4c4;
  font-weight: 600;
  pointer-events: none;
}



/* =========================================
   5. Article content
   -----------------------------------------
   辞書ページの見出し・段落・装飾
========================================= */

/* ページタイトル（h1） */
.single-dictionary .site-main h1 {
  font-size: 2rem;
  font-weight: 700;
  margin-bottom: 12px;
  color: #111;
}

/* セクション見出し（h2） */
.single-dictionary .site-main h2 {
  font-size: 1.4rem;
  font-weight: 700;
  margin: 40px 0 16px;
  padding-left: 10px;
  border-left: 3px solid #1E73BE;
  color: #111;
}

/* 段落（p） */
.single-dictionary .site-main p {
  font-size: 1rem;
  line-height: 1.8;
  color: #333;
  margin-bottom: 20px;
}

/* 箇条書き（ul, li） */
.single-dictionary .site-main ul {
  margin: 16px 0 24px 20px;
  padding: 0;
}

.single-dictionary .site-main li {
  margin-bottom: 8px;
  line-height: 1.7;
  color: #333;
}

/* Archetypes のリンク */
.single-dictionary .site-main p a {
  color: #1E73BE;
  font-weight: 600;
  transition: 0.2s ease;
}

.single-dictionary .site-main p a:hover {
  color: #00C8FF;
}


/* Related Japanese expressions のリストを整える */
#related + ul {
    padding-left: 0;
    margin-left: 0;
}

/* 存在するページ（リンク） */
#related + ul li a {
    color: #1E73BE; 
    text-decoration: none;
}

#related + ul li a:hover {
    text-decoration: underline;
}

/* 存在しないページ（グレーアウト） */
#related + ul li.not-exist { 
	color: #000; 
	pointer-events: none;
	opacity: 1; 
}


/* =========================================
   6. Cards / Lists（検索結果カード）
========================================= */

/* カード全体 */
.archive article.post,
.search article.post,
.tax-experience_type article.post,
.tax-sound_type article.post,
.tax-intensity article.post,
.tax-archetype article.post {
  background: #ffffff;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  padding: 20px 24px;
  margin-bottom: 28px;
  transition: 0.25s ease;
}

/* ホバー時 */
.archive article.post:hover,
.search article.post:hover,
.tax-experience_type article.post:hover,
.tax-sound_type article.post:hover,
.tax-intensity article.post:hover,
.tax-archetype article.post:hover {
  border-color: #00C8FF;
  box-shadow: 0 0 10px rgba(26,115,232,0.25);
}

/* タイトル（単語） */
.archive article.post .entry-title,
.search article.post .entry-title,
.tax-experience_type article.post .entry-title {
  font-size: 1.3rem;
  font-weight: 700;
  margin-bottom: 10px;
}

/* タイトルリンク */
.archive article.post .entry-title a,
.search article.post .entry-title a,
.tax-experience_type article.post .entry-title a {
  color: #111;
  transition: 0.2s ease;
}

.archive article.post .entry-title a:hover,
.search article.post .entry-title a:hover,
.tax-experience_type article.post .entry-title a:hover {
  color: #00C8FF;
}

/* 抜粋（Meaning の最初の文） */
.archive article.post p,
.search article.post p,
.tax-experience_type article.post p {
  font-size: 0.95rem;
  color: #333;
  line-height: 1.7;
  margin: 0;
}

/* ================================
   カードタイトル（単語）
================================ */
.archive .entry-title a,
.post-type-archive-dictionary .entry-title a {
  font-size: 1.6rem;  
  font-weight: 700;
  color: #111;
  line-height: 1.3;
  display: inline-block;
  margin-bottom: 6px;
}

/* ================================
   タグ（word_type / intensity / experience）
================================ */
.ono-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
  margin-bottom: 10px;
}

.ono-card-meta .ono-tag {
  font-size: 0.75rem; 
  padding: 3px 8px;
  border-radius: 6px;
  font-weight: 600;
  background: #f3f4f6;
  border: 1px solid #d1d5db;
  color: #1E73BE;
}

/* word_type（青） */
.ono-wordtype {
  background: #e8f0fe;
  border-color: #1E73BE;
}

/* experience（薄い青） */
.ono-experience {
  background: #eef6ff;
  border-color: #bcd7ff;
  color: #1E73BE;
}

/* ================================
   Intensity
================================ */
.ono-intensity {
  background: #0d1117;          
  border-color: #58a6ff;      
  color: #58a6ff;              
  font-weight: 700;
  letter-spacing: 1px;
  text-shadow: 0 0 6px #58a6ff; 
}

/* =========================================
   7. Footer
   -----------------------------------------
   フッターの調整
========================================= */


/* =========================================
   8. Utility classes
   -----------------------------------------
   汎用クラス（余白・非表示など）
========================================= */

.top-cat-links a {
	font-family: "Saira", sans-serif !important;
    display: inline-block;
    padding: 10px 20px;
    margin: 6px;
    border-radius: 6px;
    text-decoration: none;
    font-size: 0.95rem;
    color: #1a1a1a;

    /* 金属質の質感（枠なし） */
    background: linear-gradient(135deg,
        rgba(255,255,255,0.65) 0%,
        rgba(230,235,245,0.55) 40%,
        rgba(210,220,235,0.45) 100%
    );
    backdrop-filter: blur(4px);

    /* 反射感のための subtle inner highlight */
    box-shadow:
        inset 0 1px 2px rgba(255,255,255,0.6),
        inset 0 -1px 2px rgba(180,190,210,0.4);

    transition: 0.25s ease;
}

/* Hover：金属が光る感じ */
.top-cat-links a:hover {
    background: linear-gradient(135deg,
        rgba(255,255,255,0.9) 0%,
        rgba(230,240,255,0.75) 40%,
        rgba(200,215,240,0.65) 100%
    );
    box-shadow:
        inset 0 1px 3px rgba(255,255,255,0.8),
        inset 0 -1px 3px rgba(160,180,210,0.5),
        0 0 8px rgba(120,160,255,0.35);
    transform: translateY(-1px);
}

/* =========================================
   9. カルーセルスライダー 
  -----------------------------------------
   DeepDive
========================================= */


.deepdive-carousel .carousel-track img {
  height: 180px;
  width: auto;
  flex-shrink: 0 !important;
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.08);
  transition: transform 0.3s ease;
}

.deepdive-carousel .carousel-track img:hover {
  transform: scale(1.05);
}


/* カルーセル全体のコンテナ */
.deepdive-carousel {
  display: flex; 
  overflow: hidden;  
  padding: 20px 0;
  width: 100%;    
  flex-wrap: nowrap;  
}

/* 画像が並んでいるトラック */
.deepdive-carousel .carousel-track {
  flex-wrap: nowrap !important;
  gap: 24px;
}

.carousel-track {
  display: flex;     
  flex-shrink: 0;         
  min-width: 100%;         
  animation: scroll-loop 30s linear infinite; 
}

/* ホバー時に一時停止させる場合 */
.deepdive-carousel:hover .carousel-track {
  animation-play-state: paused;
}

/* アニメーションの定義 */
@keyframes scroll-loop {
  0% {
    transform: translateX(0);
  }
  100% {

    transform: translateX(-100%);
  }
}