/*
Theme Name: Hachinoya
Description: 八ノ屋株式会社 ブログ用カスタムテーマ
Author: Hachinoya Inc.
Version: 1.0
*/

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
  --green: #1A5C3A;
  --dark: #191b1f;
  --black: #000000;
  --white: #ffffff;
  --muted: #8f95a1;
  --border: rgba(0,0,0,.08);
  --cream: #ffffff;
}
body { background: var(--cream); font-family: 'Noto Sans JP', sans-serif; color: var(--dark); -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }

/* ── ヘッダー ── */
header {
  position: fixed; top: 0; left: 1rem; right: 1rem;
  z-index: 200; display: flex; align-items: center; justify-content: space-between;
  pointer-events: none;
  transform: translateY(1.5rem);
  transition: transform .45s cubic-bezier(.4,0,.2,1);
}
@media (min-width: 48em) { header { left: 1.5rem; right: 1.5rem; transform: translateY(2rem); } }
@media (min-width: 62em) { header { left: 2.5rem; right: 2.5rem; transform: translateY(3rem); } }
@media (min-width: 80em) { header { left: 6.5rem; right: 6.5rem; } }
header.header-hidden { transform: translateY(-100%) !important; }

.header-logo { pointer-events: auto; display: inline-block; line-height: 0; position: relative; }
.header-logo::before { content: ''; position: absolute; inset: -28px -48px; background: radial-gradient(ellipse at center, rgba(255,255,255,.82) 0%, rgba(255,255,255,.35) 45%, transparent 72%); z-index: -1; pointer-events: none; }
.header-logo svg { height: 52px; width: auto; display: block; overflow: visible; }
@media (min-width: 62em) { .header-logo svg { height: 72px; } }
.header-logo svg path, .header-logo svg text { transition: fill 0.25s ease; }
header.header-on-dark .header-logo svg path,
header.header-on-dark .header-logo svg text { fill: rgba(244,243,240,.85); }
header.header-on-dark .nav-link { color: rgba(244,243,240,.85); }

/* ── NAV ── */
nav { pointer-events: auto; }
nav > ul { display: flex; align-items: center; gap: 2.5rem; list-style: none; }
.nav-link {
  font-family: 'Inter', sans-serif; font-size: 1rem; font-weight: 600; color: var(--black);
  display: block; padding: .5rem 0; transition: opacity .3s cubic-bezier(.4,.1,.3,1);
}
.nav-link:hover { opacity: .45; }

/* ── モバイル用ハンバーガーメニュー ── */
.nav-toggle {
  display: none; pointer-events: auto; position: relative;
  width: 44px; height: 44px; padding: 0; background: none; border: none; cursor: pointer;
}
.nav-toggle span {
  display: block; position: absolute; left: 9px; right: 9px; height: 2px; border-radius: 2px;
  background: var(--black); transition: transform .3s ease, opacity .3s ease;
}
.nav-toggle span:nth-child(1) { top: 15px; }
.nav-toggle span:nth-child(2) { top: 22px; }
.nav-toggle span:nth-child(3) { top: 29px; }
header.header-on-dark .nav-toggle span { background: rgba(244,243,240,.9); }
.nav-toggle.active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle.active span:nth-child(2) { opacity: 0; }
.nav-toggle.active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.mobile-nav {
  position: fixed; inset: 0; z-index: 190; background: var(--white);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .35s ease;
}
.mobile-nav.open { opacity: 1; visibility: visible; pointer-events: auto; }
.mobile-nav ul { list-style: none; display: flex; flex-direction: column; align-items: center; gap: 2.25rem; }
.mobile-nav a { font-family: 'Inter', sans-serif; font-size: 1.5rem; font-weight: 600; color: var(--black); }

@media (max-width: 58em) {
  header nav { display: none; }
  .nav-toggle { display: block; }
}
@media (min-width: 58.01em) {
  .nav-toggle { display: none !important; }
  .mobile-nav { display: none !important; }
}

/* ── フッター ── */
footer { background: #0B0D14; padding: 0 0 3rem; }
.footer-contact-wrap { padding: 3.5rem 8vw; border-bottom: 1px solid #45474a; }
.footer-contact-card {
  background: #fff; border-radius: 1rem;
  padding: 3rem; max-width: 520px; margin: 0 auto;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; gap: .5rem; text-decoration: none; transition: opacity .2s;
}
.footer-contact-card:hover { opacity: .88; }
.footer-contact-en { font-family: 'Inter', sans-serif; font-weight: 700; font-size: 1.75rem; color: #1A5C3A; letter-spacing: -.02em; line-height: 1; }
.footer-contact-jp { font-family: 'Noto Sans JP', sans-serif; font-weight: 600; font-size: .9375rem; color: #1A5C3A; letter-spacing: .04em; }
.footer-inner { padding: 4rem 8vw 2.5rem; }
.footer-main { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 3rem; padding-bottom: 3rem; margin-bottom: 2rem; border-bottom: 1px solid rgba(255,255,255,.1); }
@media (max-width: 48em) {
  .footer-main { grid-template-columns: 1fr; gap: 2rem; justify-items: center; text-align: center; }
  .footer-nav { justify-content: center; flex-wrap: wrap; }
}
.footer-brand { display: flex; flex-direction: column; gap: 1.25rem; }
.footer-corp { font-family: 'Noto Sans JP', sans-serif; font-size: .8125rem; color: rgba(255,255,255,.75); }
.footer-address { font-family: 'Noto Sans JP', sans-serif; font-size: .75rem; line-height: 1.85; color: rgba(255,255,255,.5); }
.footer-logo { display: flex; justify-content: center; }
.footer-logo svg { height: 52px; width: auto; display: block; overflow: visible; }
.footer-nav { display: flex; gap: 2.5rem; justify-content: flex-end; }
.footer-nav-label { font-family: 'Inter', sans-serif; font-size: .65rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.6); }
.footer-bottom { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem; }
.footer-privacy { font-family: 'Noto Sans JP', sans-serif; font-size: .75rem; color: rgba(255,255,255,.45); transition: color .2s; }
.footer-privacy:hover { color: rgba(255,255,255,.75); }
.footer-copy { font-family: 'Inter', sans-serif; font-size: .7rem; color: rgba(255,255,255,.4); letter-spacing: .04em; }

/* ── ページ全体 ── */
.page { max-width: 1100px; margin: 0 auto; padding: calc(80px + 6vh) 1.5rem 10vh; }

/* ── ページヘッダー ── */
.page-header { margin-bottom: 3rem; }
.page-header-en {
  font-family: 'Inter', sans-serif; font-size: clamp(1.75rem, 3vw, 2.5rem);
  font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--dark); display: block;
}

/* ── メインレイアウト（グリッド＋サイドバー） ── */
.blog-layout { display: grid; grid-template-columns: 1fr; gap: 4rem; align-items: start; }
@media (min-width: 860px) { .blog-layout { grid-template-columns: 1fr 260px; } }

/* ── 記事グリッド ── */
.article-grid { display: grid; grid-template-columns: 1fr; gap: 3.5rem; }
@media (min-width: 560px) { .article-grid { grid-template-columns: repeat(2, 1fr); } }

/* ── 記事カード ── */
.article-card { display: block; transition: opacity .2s; }
.article-card:hover { opacity: .7; }
.article-thumb { width: 100%; aspect-ratio: 16/9; overflow: hidden; margin-bottom: .5rem; border-radius: 2px; background: var(--green); }
.article-thumb img { width: 100%; height: 100%; object-fit: cover; }
.article-date { font-family: 'Inter', sans-serif; font-size: .75rem; font-weight: 300; color: var(--muted); margin-bottom: .15rem; display: block; }
.article-title { font-family: 'Noto Sans JP', sans-serif; font-weight: 400; font-size: 1.0625rem; line-height: 1.7; color: var(--dark); margin-bottom: .5rem; }
.no-posts { font-family: 'Noto Sans JP', sans-serif; color: var(--muted); }

/* ── サイドバー ── */
.sidebar { position: sticky; top: calc(60px + 3rem); }
.sidebar-block { margin-bottom: 3rem; }
.sidebar-label {
  font-family: 'Noto Sans JP', sans-serif; font-size: .7rem; font-weight: 700;
  letter-spacing: .06em; color: var(--muted); display: block;
  margin-bottom: 1.5rem; padding-bottom: .75rem; border-bottom: 1px solid var(--border);
}
.ranking-list { display: flex; flex-direction: column; }
.ranking-item {
  display: flex; gap: 1rem; align-items: flex-start;
  padding: 1rem 0; border-bottom: 1px solid var(--border); transition: opacity .2s;
}
.ranking-item:first-child { padding-top: 0; }
.ranking-item:hover { opacity: .55; }
.ranking-num {
  font-family: 'Inter', sans-serif; font-size: 1.125rem; font-weight: 700;
  color: var(--green); opacity: .35; flex-shrink: 0; line-height: 1; padding-top: .15rem; min-width: 1.5rem;
}
.ranking-title { font-family: 'Noto Sans JP', sans-serif; font-weight: 400; font-size: .9375rem; line-height: 1.65; color: var(--dark); }

/* ── 記事アイキャッチ（詳細ページ） ── */
.article-thumb-lg { width: 100%; aspect-ratio: 16/9; overflow: hidden; margin-bottom: 2rem; border-radius: 4px; background: var(--green); }
.article-thumb-lg img { width: 100%; height: 100%; object-fit: cover; }

/* ── 記事エリア全体（詳細ページ） ── */
.article { max-width: 680px; margin: 0 auto; padding: calc(80px + 6vh) 1.5rem 10vh; }

/* ── 記事ヘッダー（詳細ページ） ── */
.article-title-lg {
  font-family: 'Noto Sans JP', sans-serif; font-weight: bold;
  font-size: 28px; color: #333; line-height: 1.4; margin-bottom: 1rem;
}

/* ── 本文 ── */
.article-body p { font-size: 1.125rem; line-height: 1.9; color: #2a2a2a; margin-bottom: 2rem; }
.article-body h2 {
  font-family: 'Noto Sans JP', sans-serif; font-weight: 700; font-size: 1.5rem; color: var(--dark);
  margin: 3.5rem 0 1.25rem; line-height: 1.5; padding-bottom: .75rem; border-bottom: 1px solid var(--border);
}
.article-body h3 { font-family: 'Noto Sans JP', sans-serif; font-weight: 700; font-size: 1.2rem; color: var(--dark); margin: 2.5rem 0 1rem; }
.article-body blockquote {
  border-left: 3px solid var(--green); padding: .875rem 1.25rem; margin: 2.5rem 0;
  background: rgba(26,92,58,.04); border-radius: 0 .25rem .25rem 0;
}
.article-body blockquote p { font-family: 'Noto Sans JP', sans-serif; font-size: 1.125rem; color: var(--dark); margin: 0; line-height: 1.85; }
.article-body img { border-radius: 4px; margin: 2rem 0; }
.article-body a { color: var(--green); text-decoration: underline; }
.article-body ul, .article-body ol { margin: 0 0 2rem 1.5rem; line-height: 2; }

/* ── 記事フッター ── */
.article-footer { max-width: 680px; margin: 0 auto; padding: 3rem 1.5rem; border-top: 1px solid var(--border); display: flex; align-items: center; gap: 1.25rem; }
.author-avatar-lg {
  width: 56px; height: 56px; border-radius: 50%; background: rgba(26,92,58,.1); flex-shrink: 0; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Inter', sans-serif; font-size: .5rem; font-weight: 600; letter-spacing: .04em; color: rgba(26,92,58,.4); text-transform: uppercase;
}
.author-avatar-lg img { width: 100%; height: 100%; object-fit: cover; }
.author-footer-name { font-family: 'Klee One', cursive; font-weight: 600; font-size: 1rem; color: var(--dark); margin-bottom: .2rem; }
.author-footer-role { font-family: 'Noto Sans JP', sans-serif; font-size: .8125rem; color: var(--muted); }

/* ── 関連記事 ── */
.related { background: var(--cream); padding: 6vh 1.5rem; }
.related-inner { max-width: 680px; margin: 0 auto; }
.related-label { font-family: 'Inter', sans-serif; font-size: .6rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); display: block; margin-bottom: 2rem; }
.related-list { display: flex; flex-direction: column; gap: 0; }
.related-item { display: flex; justify-content: space-between; align-items: baseline; gap: 2rem; padding: 1.25rem 0; border-bottom: 1px solid var(--border); transition: opacity .2s; }
.related-item:first-child { border-top: 1px solid var(--border); }
.related-item:hover { opacity: .55; }
.related-title { font-family: 'Noto Sans JP', sans-serif; font-weight: 400; font-size: .9375rem; color: var(--dark); line-height: 1.6; }
.related-date { font-family: 'Inter', sans-serif; font-size: .75rem; font-weight: 300; color: var(--muted); white-space: nowrap; flex-shrink: 0; }

/* ── ページネーション ── */
.blog-pagination { display: flex; justify-content: center; gap: 1.5rem; margin-top: 4rem; grid-column: 1 / -1; }
.blog-pagination a { font-family: 'Inter', sans-serif; font-size: .8125rem; font-weight: 600; color: var(--dark); padding: .5rem 1rem; border: 1px solid var(--border); border-radius: 2rem; transition: opacity .2s; }
.blog-pagination a:hover { opacity: .6; }