/* Minimal custom CSS for interactions that are cumbersome in pure utilities
   (kept intentionally small; layout is done with Tailwind utility classes) */

/* Header scrolled state */
.site-header.is-scrolled{
  background: rgba(255,255,255,.82);
  backdrop-filter: blur(12px);
  box-shadow: 0 10px 30px rgba(15,23,42,.10);
  border-bottom: 1px solid rgba(15,23,42,.08);
}

/* Reveal (scroll-in) */
.reveal, .reveal-left, .reveal-right{
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .7s ease, transform .7s ease;
  will-change: opacity, transform;
}
.reveal-left{ transform: translateX(-18px); }
.reveal-right{ transform: translateX(18px); }
.is-visible{
  opacity: 1 !important;
  transform: translate(0,0) !important;
}

/* Hero text slideshow (left) */
.hero-slide{ opacity: 0; transform: translateY(10px); transition: opacity .7s ease, transform .7s ease; }
.hero-slide.is-active{ opacity: 1; transform: translateY(0); }

/* Hero media slideshow (right) */
.hero-media-slide{
  position:absolute; inset:0;
  opacity:0;
  transform: translateX(16px) scale(.995);
  transition: opacity .8s ease, transform .8s ease;
  will-change: opacity, transform;
}
.hero-media-slide.is-active{
  opacity:1;
  transform: translateX(0) scale(1);
}

/* Mini slides */
.hero-mini-slide{ opacity:.45; transform: scale(.98); transition: opacity .35s ease, transform .35s ease; }
.hero-mini-slide.is-active{ opacity:1; transform: scale(1); }

/* Dots */
.hero-dots .dot{
  width: 10px; height: 10px; border-radius: 999px;
  background: rgba(148,163,184,.9);
  transition: transform .25s ease, background .25s ease;
}
.hero-dots .dot.is-active{
  transform: scale(1.35);
  background: rgba(37,99,235,1);
}

/* Photo slider */
.photo-slide{
  position:absolute; inset:0;
  opacity:0;
  transform: translateX(18px);
  transition: opacity .8s ease, transform .8s ease;
}
.photo-slide.is-active{ opacity:1; transform: translateX(0); }

/* Archive filter chip active */
.archive-filters .is-active{
  background: rgba(37,99,235,1) !important;
  color: white !important;
  border-color: rgba(37,99,235,1) !important;
}

/*  ページネーション    */
/* 共通部分 */
:root {
  --base-color:#f7f7f7;
/*  --main-color:#0071BC; */
  --main-color:#007acc;
  --sub-color:#16A7E1;
  --accent-color:#ED7200;
  --accent-sub-color:#F8C030;
  --text-color:#333;
  --sub-text-color:#fff;
  --header-height:90px;
  --max-width:2100px;
}

html {
  scroll-behavior: smooth;
}

.wp-pagenavi {
  width: 100%;
  margin: 40px auto;
  font-size: 12px;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent-color);
}
.wp-pagenavi a {
  color: var(--accent-color);
}
.wp-pagenavi span.current, .wp-pagenavi a.page {
  margin: 0 10px 0 0;
  border: solid 1px var(--base-color);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  line-height: 40px;
  text-align: center;
  box-sizing: border-box;
  justify-content: center;
  display: flex;
  align-items: center;
  transition: 0.3s;
}
.wp-pagenavi span.current {
  border: none;
  background: var(--accent-color);
  color: var(--base-color);
}
.wp-pagenavi a.page {
  background: none;
}
.wp-pagenavi a.page:hover {
  background: var(--accent-color);
  color: var(--base-color);
  border: none;
}
.wp-pagenavi .first, .wp-pagenavi .extend {
  margin-right: 10px;
}
.wp-pagenavi .previouspostslink, .wp-pagenavi .nextpostslink {
  display: none;
}
.wp-pagenavi span.pages, .wp-pagenavi span.extend {
  margin: 0 30px;
  border: none;
}
.wp-pagenavi a.first, .wp-pagenavi a.last {
  margin: 0 30px;
  border: none;
}

/* WP-PageNavi: mobile fix */
@media (max-width: 520px){
  .wp-pagenavi{
    flex-wrap: wrap;
    gap: 8px;              /* marginの代わりにgapで詰める */
    padding: 0 10px;
  }

  /* 数字ボタン：幅・高さを少し小さく、marginはゼロに */
  .wp-pagenavi span.current,
  .wp-pagenavi a.page{
    margin: 0;
    width: 34px;
    height: 34px;
    line-height: 34px;
  }

  /* first/last/pages/extend の“左右30px”が効きすぎるので縮める/整理 */
  .wp-pagenavi a.first,
  .wp-pagenavi a.last,
  .wp-pagenavi span.pages,
  .wp-pagenavi span.extend{
    margin: 0;             /* ここがはみ出しの主因になりやすい */
  }

  /* “ページ数表示”がある場合は1行上に逃がす（任意） */
  .wp-pagenavi span.pages{
    flex-basis: 100%;
    text-align: center;
  }
}

/* single.php content base */
.content :where(p, ul, ol, blockquote, pre, table){ margin-top: 1rem; }
.content :where(h2){ margin-top: 2rem; font-size: 1.5rem; font-weight: 800; color: #0b1220; }
.content :where(h3){ margin-top: 1.5rem; font-size: 1.25rem; font-weight: 800; color: #0b1220; }
.content :where(a){ color: #1d4ed8; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.content :where(ul){ padding-left: 1.25rem; list-style: disc; }
.content :where(ol){ padding-left: 1.25rem; list-style: decimal; }
.content :where(blockquote){ padding-left: 1rem; border-left: 4px solid rgba(15,23,42,.12); color: rgba(11,18,32,.75); }
.content :where(img){ border-radius: 1rem; border: 1px solid rgba(15,23,42,.10); }

/* Loader shimmer */
@keyframes shimmer{
  0%   { transform: translateX(-120%); }
  100% { transform: translateX(220%); }
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce){
  #pageLoader .animate-spin{ animation: none !important; }
  #pageLoader [class*="shimmer"]{ animation: none !important; }
}


.gallery {
  display: grid !important;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin-top: 5vh;
}

.gallery-item {
  width: 100% !important;
}


/* =========================
   Single content modernize
========================= */

/* 見出し（h3）をモダンに */
.content h3{
  margin-top: 26px;
  margin-bottom: 12px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: rgb(15 23 42);
  padding-left: 12px;
  border-left: 6px solid rgba(37,99,235,.35);
}

/* テーブルをカード風に */
.content table{
  width: 100% !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  margin: 14px 0 22px;
  border: 1px solid rgba(15,23,42,.10);
  border-radius: 18px;
  overflow: hidden;
  background: rgba(255,255,255,.9);
  box-shadow: 0 10px 30px rgba(15,23,42,.06);
}

.content table td,
.content table th{
  padding: 12px 12px;
  border-bottom: 1px solid rgba(15,23,42,.08);
  vertical-align: top;
}

.content table tr:last-child td,
.content table tr:last-child th{
  border-bottom: none;
}

/* 行のホバー */
.content table tr:hover td{
  background: rgba(37,99,235,.04);
}

/* リンクの見た目 */
.content a{
  color: rgb(29 78 216);
  text-decoration: none;
}
.content a:hover{
  text-decoration: underline;
}

/* =========================
   WP classic gallery → Grid 2 columns
   （ここが重要：dl.gallery-item の float を潰す）
========================= */

.content .gallery{
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 14px !important;
  margin: 16px 0 8px !important;
}

/* dl.gallery-item をグリッド要素化 */
.content .gallery dl.gallery-item{
  float: none !important;
  width: auto !important;
  margin: 0 !important;
}

/* ギャラリー内の clear 用 br を無効化 */
.content .gallery br{
  display: none !important;
}

.content .gallery .gallery-icon{
  margin: 0 !important;
}

.content .gallery img{
  width: 100% !important;
  height: auto !important;
  display: block !important;
  border-radius: 16px;
  border: 1px solid rgba(15,23,42,.10);
  box-shadow: 0 12px 28px rgba(15,23,42,.10);
}

/* スマホは1列 */
@media (max-width: 768px){
  .content .gallery{
    grid-template-columns: 1fr !important;
  }
}

.section{ padding: 88px 0; }
@media (max-width: 900px){
  .section{ padding: 64px 0; }
}

/* =========================
   Triple features
========================= */
.triple{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 34px;
  padding-top: 10px;
}
@media (max-width: 900px){
  .triple{ grid-template-columns: 1fr; gap: 22px; }
}
.feature{ padding: 14px 8px; }
.feature-icon{
  width: 44px; height: 44px;
  border-radius: 14px;
  display:grid;
  place-items:center;
  background: rgba(37,99,235,.10);
  color: var(--primary);
  margin-bottom: 14px;
}
.feature-icon svg{ width: 22px; height: 22px; }
.feature h3{
  margin: 0 0 8px;
  font-size: 20px;
  letter-spacing: -0.01em;
}
.feature p{
  margin: 0;
  color: rgba(11,18,32,.68);
  font-size: 14.5px;
}
.feature-icon.i-purple{ background: rgba(124,58,237,.10); color:#7c3aed; }
.feature-icon.i-mint{ background: rgba(16,185,129,.12); color:#10b981; }