@charset "UTF-8";
/* =========================================================
   EPIC Hope - Custom Styles
   Lightning Child theme
   ========================================================= */

:root {
  /* メインブランドカラー (指定: #5D180E) */
  --color-primary:    #5D180E;   /* ディープ・バーガンディ */
  --color-primary-d:  #3F0F08;   /* hover/active 用に一段濃く */
  --color-primary-l:  #8a2a1a;   /* 補助 (グラデや帯) */
  --color-logo:       #E14A1F;   /* ロゴ自体のオレンジ (アクセントとして温存) */
  --color-accent:     #2C3E50;   /* 補助の落ち着き色 */
  --color-text:       #1f1311;
  --color-muted:      #6b5e58;
  --color-bg:         #ffffff;
  --color-bg-alt:     #f8f3f1;   /* メインカラー寄りのオフホワイト */
  --color-bg-dark:    #1a0b08;   /* フッター用 */
  --color-border:     #ebe3df;

  --font-sans-en: "Inter", "Helvetica Neue", Arial, sans-serif;
  --font-sans-jp: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, sans-serif;
  --font-sans: var(--font-sans-jp);
  --font-serif: "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", serif;

  --container: 1100px;
  --radius: 8px;
  --space: clamp(48px, 6vw, 96px);
}

body.eh-lang-en {
  --font-sans: var(--font-sans-en), var(--font-sans-jp);
}

body {
  font-family: var(--font-sans);
  color: var(--color-text);
  background: var(--color-bg);
  line-height: 1.85;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--color-primary); }
a:hover { color: var(--color-primary-d); }

/* ---- 共通ユーティリティ ---- */
.section { padding-block: var(--space); }
.section--alt { background: var(--color-bg-alt); }
.section--dark { background: var(--color-bg-dark); color: #fff; }
.section--dark a { color: #fff; }
.container { width: min(100% - 40px, var(--container)); margin-inline: auto; }
.eh-narrow { max-width: 820px; margin-inline: auto; }

.section-title {
  font-size: clamp(24px, 3.2vw, 32px);
  text-align: center;
  margin-bottom: 8px;
  letter-spacing: 0.05em;
  font-weight: 700;
}
.section-title__en {
  display: block;
  font-size: 11px;
  color: var(--color-primary);
  letter-spacing: 0.3em;
  margin-bottom: 8px;
  font-weight: 600;
}
.section-lead {
  text-align: center;
  color: var(--color-muted);
  margin-bottom: 48px;
}

/* ---- ボタン ---- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 28px;
  border-radius: 999px;
  background: var(--color-primary);
  color: #fff !important;
  text-decoration: none;
  font-weight: 600;
  transition: transform .15s ease, background .15s ease;
  border: none;
}
.btn:hover { transform: translateY(-1px); background: var(--color-primary-d); }
.btn--ghost {
  background: transparent;
  color: var(--color-primary) !important;
  border: 1.5px solid var(--color-primary);
}
.btn--ghost:hover { background: var(--color-primary); color: #fff !important; }
.btn--on-dark { background: #fff; color: var(--color-primary) !important; }
.btn--on-dark:hover { background: var(--color-primary); color: #fff !important; }

/* ---- ヘッダー (Lightning override) ---- */
body { padding-top: 0; }
.eh-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255,255,255,.96);
  backdrop-filter: saturate(180%) blur(6px);
  border-bottom: 1px solid var(--color-border);
}
.eh-header__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px;
  width: min(100% - 40px, var(--container));
  margin-inline: auto;
  padding: 14px 0;
}
.eh-logo { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; color: var(--color-text); }
.eh-logo img { height: 44px; width: auto; display: block; }
.eh-logo__text { font-weight: 700; font-size: 18px; letter-spacing: .05em; }
.eh-logo__tag  { display:block; font-size: 11px; color: var(--color-muted); font-weight: 400; }

/* ナビ */
.eh-nav { display: flex; align-items: center; gap: 4px; }
.eh-nav__list { display: flex; gap: 4px; list-style: none; padding: 0; margin: 0; }
.eh-nav__item { position: relative; }
.eh-nav__link {
  display: inline-block;
  padding: 10px 14px;
  color: var(--color-text);
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
  border-radius: 6px;
}
.eh-nav__link:hover, .eh-nav__link.is-active { color: var(--color-primary); background: var(--color-bg-alt); }
.eh-nav__sub {
  position: absolute; top: calc(100% + 4px); left: 0;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  padding: 8px;
  min-width: 220px;
  list-style: none;
  margin: 0;
  box-shadow: 0 10px 30px rgba(0,0,0,.08);
  opacity: 0; visibility: hidden; transform: translateY(4px);
  transition: opacity .15s, visibility .15s, transform .15s;
}
.eh-nav__item:hover .eh-nav__sub,
.eh-nav__item:focus-within .eh-nav__sub { opacity: 1; visibility: visible; transform: translateY(0); }
.eh-nav__sub a {
  display: block; padding: 10px 12px;
  color: var(--color-text); text-decoration: none; font-size: 14px; border-radius: 4px;
}
.eh-nav__sub a:hover { color: var(--color-primary); background: var(--color-bg-alt); }

/* 言語スイッチャー */
.eh-lang-switch {
  display: inline-flex; align-items: center; gap: 8px;
  margin-left: 8px;
  font-size: 12px;
  letter-spacing: .1em;
}
.eh-lang-switch a {
  color: var(--color-muted);
  text-decoration: none;
  padding: 4px 8px;
  border-radius: 4px;
  font-weight: 600;
}
.eh-lang-switch a.is-active { color: var(--color-primary); background: var(--color-bg-alt); }
.eh-lang-switch__sep { color: var(--color-border); }

/* モバイル */
.eh-mobile-toggle {
  display: none;
  background: transparent; border: 0; cursor: pointer;
  width: 40px; height: 40px;
  padding: 0;
}
.eh-mobile-toggle span { display:block; height:2px; background: var(--color-text); margin: 4px auto; width: 22px; transition: transform .2s, opacity .2s; }
.eh-mobile-toggle.is-open span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.eh-mobile-toggle.is-open span:nth-child(2) { opacity: 0; }
.eh-mobile-toggle.is-open span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 900px) {
  .eh-mobile-toggle { display: block; }
  .eh-nav {
    position: absolute; top: 100%; left: 0; right: 0;
    background: #fff;
    border-bottom: 1px solid var(--color-border);
    flex-direction: column; align-items: stretch;
    padding: 8px 16px 16px;
    display: none;
  }
  .eh-nav.is-open { display: flex; }
  .eh-nav__list { flex-direction: column; gap: 0; width: 100%; }
  .eh-nav__item { width: 100%; }
  .eh-nav__link { width: 100%; padding: 14px 12px; }
  .eh-nav__sub {
    position: static;
    opacity: 1; visibility: visible; transform: none;
    box-shadow: none; border: 0; padding: 0 0 8px 16px;
    min-width: 0;
  }
  .eh-lang-switch { margin: 8px 0 0; padding: 8px 12px; border-top: 1px solid var(--color-border); }
}

/* ---- ヒーロー ---- */
.hero {
  position: relative;
  min-height: clamp(460px, 72vh, 720px);
  display: grid;
  place-items: center;
  text-align: center;
  background:
    radial-gradient(ellipse at 30% 20%, rgba(255,255,255,.10) 0%, rgba(255,255,255,0) 60%),
    linear-gradient(135deg, #5D180E 0%, #3F0F08 60%, #1F0704 100%);
  color: #fff;
  overflow: hidden;
}
/* .hero::after は削除 (透過オーバーレイがボタンに被るため) */
.hero__inner {
  padding: 56px 20px 96px; /* 下に余白を多めに取ってボタンを安全領域に */
  max-width: 880px;
}
.hero__logo { margin-bottom: 24px; }
.hero__logo img { height: 96px; width: auto; filter: drop-shadow(0 4px 12px rgba(0,0,0,.15)); }
.hero__eyebrow { letter-spacing: .35em; font-size: 12px; opacity: .9; margin-bottom: 12px; }
.hero__title {
  font-size: clamp(28px, 4.6vw, 44px);
  font-weight: 700;
  line-height: 1.45;
  margin-bottom: 20px;
}
.hero__lead {
  font-size: clamp(14px, 1.8vw, 16px);
  opacity: .95;
  margin-bottom: 32px;
}

/* ---- 4カラム pillar ---- */
.pillars {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
}
.pillar-card {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 28px 22px;
  text-align: center;
  transition: box-shadow .2s, transform .2s;
  text-decoration: none;
  color: var(--color-text);
  display: block;
}
.pillar-card:hover {
  box-shadow: 0 12px 30px rgba(93, 24, 14, .15);
  transform: translateY(-2px);
  color: var(--color-text);
  border-color: var(--color-primary);
}
.pillar-card__icon {
  width: 52px; height: 52px;
  margin: 0 auto 14px;
  display: grid; place-items: center;
  background: var(--color-bg-alt);
  border-radius: 50%;
  color: var(--color-primary);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0;
}
.pillar-card__title { font-size: 17px; font-weight: 700; margin-bottom: 8px; }
.pillar-card__body  { font-size: 13.5px; color: var(--color-muted); line-height: 1.7; }

/* ---- About / 一般のテキスト ブロック ---- */
.eh-prose p + p { margin-top: 1.4em; }
.eh-prose h2 {
  font-size: clamp(20px, 2.2vw, 24px);
  margin: 2.4em 0 .8em;
  padding-left: 14px;
  border-left: 4px solid var(--color-primary);
  font-weight: 700;
}
.eh-prose h2:first-of-type { margin-top: 0; }

/* ---- FAQ ---- */
.faq-list { max-width: 820px; margin: 0 auto; }
.faq-item {
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 20px 22px;
  margin-bottom: 16px;
  background: #fff;
}
.faq-q {
  display: flex; gap: 12px; align-items: flex-start;
  font-weight: 700;
  cursor: pointer;
  list-style: none;
}
.faq-q::-webkit-details-marker { display: none; }
.faq-q::before {
  content: "Q";
  flex: 0 0 28px;
  height: 28px;
  background: var(--color-primary);
  color: #fff;
  border-radius: 50%;
  text-align: center;
  font-size: 13px;
  line-height: 28px;
}
.faq-a { display: flex; gap: 12px; margin-top: 14px; color: var(--color-text); }
.faq-a::before {
  content: "A";
  flex: 0 0 28px;
  height: 28px;
  background: var(--color-accent);
  color: #fff;
  border-radius: 50%;
  text-align: center;
  font-size: 13px;
  line-height: 28px;
}

/* ---- リンクカード ---- */
.link-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.link-card {
  display: flex; align-items: center; gap: 12px;
  padding: 18px 20px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: #fff;
  color: var(--color-text);
  text-decoration: none;
  transition: border-color .15s, transform .15s;
}
.link-card:hover { border-color: var(--color-primary); transform: translateY(-1px); color: var(--color-text); }
.link-card__arrow { margin-left: auto; color: var(--color-primary); font-weight: 700; }

/* Lightning / VK Blocks が外部リンクに付与するアイコンの色をテーマ色に統一 */
.link-card::after,
.link-card .vk-icon,
.link-card .fa,
.link-card .fas,
.link-card .far,
.link-card .fab,
.link-card i { color: var(--color-primary) !important; }

/* a[target=_blank] に Lightning 親が ::after で挿入する外部リンク icon を上書き */
.site-main a[target="_blank"]::after,
.eh-footer a[target="_blank"]::after,
.link-card a::after {
  color: var(--color-primary) !important;
  filter: none !important;
}
.eh-footer .link-card::after,
.eh-footer a[target="_blank"]::after { color: #f5a07a !important; } /* フッターは見やすい暖色に */

/* ---- ページヘッダー (固定ページ共通) ---- */
.eh-pagehead {
  text-align: center;
  padding-block: clamp(64px, 8vw, 110px);
  background: var(--color-bg-alt);
  border-bottom: 1px solid var(--color-border);
}
.eh-pagehead__en { color: var(--color-primary); letter-spacing: .3em; font-size: 12px; font-weight: 600; }
.eh-pagehead__title {
  font-size: clamp(26px, 3.4vw, 36px);
  margin-top: 6px;
  font-weight: 700;
  color: var(--color-primary);
  letter-spacing: .05em;
}

/* Lightning 標準のページヘッダーを完全に隠す (保険) */
.page-header-area,
.lightning-page-header,
.lightning-subSection-header,
.subSection-header,
.subSection.subSection-header,
body.page > #main > .entry-header,
body.page .entry-header > .entry-title,
body.page .entry-header > h1.entry-title,
header.page-header,
.page-header { display: none !important; }

/* =========================================================
   Lightning が h1〜h4 に当てる規定装飾(上下ボーダー/色帯)を打ち消す
   ========================================================= */
.site-main h1,
.site-main h2,
.site-main h3,
.site-main h4,
.site-main h5,
.site-main h6,
.hero h1,
.hero h2 {
  border: 0 !important;
  background: transparent !important;
  padding-top: 0;
  padding-bottom: 0;
  text-shadow: none;
}
.site-main h1::before,
.site-main h1::after,
.site-main h2::before,
.site-main h2::after,
.site-main h3::before,
.site-main h3::after,
.site-main h4::before,
.site-main h4::after {
  display: none !important;
  content: none !important;
  border: 0 !important;
  background: none !important;
}

/* 自前で使っている左ボーダー装飾(.eh-prose h2)は維持 */
.eh-prose h2 {
  border-left: 4px solid var(--color-primary) !important;
  padding-left: 14px !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  background: transparent !important;
}

/* Lightning が .entry-title などに当てる装飾も無効化 */
.site-main .entry-title,
.site-main .vk_post_title,
.site-main .vk_post-title,
.cb-section_ttl,
.section-title.vk_sectionTitle,
.vk_sectionTitle {
  border: 0 !important;
  background: transparent !important;
  padding: 0 !important;
}
.vk_sectionTitle::before,
.vk_sectionTitle::after,
.cb-section_ttl::before,
.cb-section_ttl::after {
  display: none !important;
  content: none !important;
  border: 0 !important;
}

/* ---- フッター ---- */
.eh-footer {
  background: var(--color-bg-dark);
  color: #f1eae5;
  padding: 48px 0 32px;
}
.eh-footer a { color: #f1eae5; text-decoration: none; }
.eh-footer a:hover { color: #fff; text-decoration: underline; }
.eh-footer__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 32px; }
@media (max-width: 700px) {
  .eh-footer__grid { grid-template-columns: 1fr; }
}
.eh-footer__brand img { height: 60px; width: auto; margin-bottom: 12px; }
.eh-footer__brand p { font-size: 13px; color: #d4c8c0; max-width: 320px; }
.eh-footer__list { list-style: none; padding: 0; margin: 0; }
.eh-footer__list li { margin-bottom: 8px; font-size: 14px; }
.eh-footer__title { font-size: 12px; letter-spacing: .25em; color: #f5a07a; margin-bottom: 14px; font-weight: 600; }
.eh-footer__copy { text-align: center; font-size: 12px; color: #aa9489; margin-top: 32px; padding-top: 20px; border-top: 1px solid #3a2620; }

/* 古いLightningヘッダー/サイドを隠す */
.site-header.lightning-cassette,
header.site-header { display: none; }

/* お知らせ等の旧スタイルは残す(将来使う可能性) */
.news-list { display: flex; flex-direction: column; gap: 8px; max-width: 800px; margin-inline: auto; }
.news-item {
  display: grid;
  grid-template-columns: 110px 100px 1fr;
  gap: 16px; align-items: center;
  padding: 14px 8px;
  border-bottom: 1px solid var(--color-border);
}
.news-item__date { color: var(--color-muted); font-size: 14px; }
.news-item__cat {
  display: inline-block;
  font-size: 11px; padding: 2px 10px; border-radius: 999px;
  background: var(--color-primary); color: #fff; text-align: center;
}
.news-item a { color: var(--color-text); text-decoration: none; }
.news-item a:hover { color: var(--color-primary); }
@media (max-width: 600px) {
  .news-item { grid-template-columns: 1fr; gap: 4px; }
}