/* ==========================================================================
   日時選定 — Electional Astrology site
   ========================================================================== */

:root{
  --void: #070811;
  --navy-deep: #0c1024;
  --navy: #12183a;
  --navy-soft: #1b2350;
  --ivory: #f2ecd9;
  --ivory-dim: rgba(242,238,226,0.86);
  --ivory-faint: rgba(242,238,226,0.66);
  --gold: #c9a24e;
  --gold-bright: #e8c878;
  --gold-line: rgba(201,162,78,0.28);

  --font-display: 'Shippori Mincho', serif;
  --font-accent: 'EB Garamond', serif;
  --font-body: 'Zen Kaku Gothic New', sans-serif;

  --max-width: 1180px;
}

*{ margin:0; padding:0; box-sizing:border-box; }

html{
  scroll-behavior:smooth;
  background: var(--void);
}

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *{ animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important; }
}

body{
  background: var(--void);
  color: var(--ivory);
  font-family: var(--font-body);
  font-weight:300;
  line-height:1.9;
  overflow-x:hidden;
  position:relative;
}

img{ max-width:100%; display:block; }
a{ color:inherit; }
ul{ list-style:none; }

:focus-visible{
  outline: 2px solid var(--gold-bright);
  outline-offset: 3px;
}

.skip-link{
  position:absolute; left:-9999px; top:0; z-index:200;
  background: var(--navy); color: var(--gold-bright);
  padding: 12px 20px; font-size:14px;
}
.skip-link:focus{ left:16px; top:16px; }

/* ---------- continuous night sky background ---------- */
/* Layer 1: base gradient (navy -> void), Layer 2: sky photo blended in via mask/opacity,
   repeating down the page so the whole site reads as one unbroken sky. */
.sky-layer{
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
  background:
    radial-gradient(ellipse 900px 500px at 12% 8%, rgba(201,162,78,0.06), transparent 60%),
    radial-gradient(ellipse 700px 500px at 88% 30%, rgba(70,90,160,0.18), transparent 65%),
    radial-gradient(ellipse 900px 600px at 15% 85%, rgba(70,90,160,0.14), transparent 65%),
    linear-gradient(180deg, var(--navy-deep) 0%, var(--void) 12%, var(--void) 88%, var(--navy-deep) 100%);
}
.sky-layer::before{
  content:'';
  position:absolute; inset:0;
  background-image: url('images/bg-sky.jpg');
  background-repeat: repeat-y;
  background-size: 100% auto;
  background-position: top center;
  opacity:0.22;
  mix-blend-mode: screen;
}
.sky-layer::after{
  /* scattered fine stars, tiled */
  content:'';
  position:absolute; inset:0;
  background-image:
    radial-gradient(1px 1px at 8% 12%, rgba(255,255,255,0.7), transparent),
    radial-gradient(1px 1px at 22% 44%, rgba(255,255,255,0.5), transparent),
    radial-gradient(1.5px 1.5px at 38% 8%, rgba(255,255,255,0.6), transparent),
    radial-gradient(1px 1px at 52% 62%, rgba(255,255,255,0.4), transparent),
    radial-gradient(1.5px 1.5px at 68% 22%, rgba(255,255,255,0.65), transparent),
    radial-gradient(1px 1px at 81% 55%, rgba(255,255,255,0.45), transparent),
    radial-gradient(1px 1px at 93% 15%, rgba(255,255,255,0.55), transparent),
    radial-gradient(1.5px 1.5px at 6% 78%, rgba(255,255,255,0.5), transparent),
    radial-gradient(1px 1px at 30% 92%, rgba(255,255,255,0.45), transparent),
    radial-gradient(1px 1px at 60% 88%, rgba(255,255,255,0.4), transparent),
    radial-gradient(1.5px 1.5px at 88% 82%, rgba(255,255,255,0.55), transparent);
  background-repeat: repeat;
  background-size: 100% 1400px;
}

main, header, footer{ position:relative; z-index:1; }

/* ---------- eyebrow / headings ---------- */
.eyebrow{
  font-family: var(--font-accent);
  font-style: italic;
  letter-spacing: 0.24em;
  font-size: 13px;
  color: var(--gold-bright);
  text-transform: uppercase;
  margin-bottom: 18px;
}
.eyebrow--center{ text-align:center; }

h1, h2, h3{
  font-family: var(--font-display);
  font-weight:600;
  letter-spacing:0.04em;
  color: var(--ivory);
}

h2{
  font-size: clamp(26px, 3.4vw, 36px);
  text-align:center;
  margin-bottom: 28px;
}

/* ---------- header ---------- */
.site-header{
  position: sticky; top:0; z-index:100;
  display:flex; align-items:center; justify-content:space-between;
  padding: 20px clamp(20px, 4vw, 56px);
  background: rgba(7,8,17,0.72);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--gold-line);
}
.brand{ text-decoration:none; }
.brand-jp{
  font-family: var(--font-display);
  font-size: 18px;
  letter-spacing: 0.28em;
  color: var(--gold-bright);
}
.site-nav{ display:flex; gap: 26px; }
.site-nav a{
  text-decoration:none;
  font-size: 13px;
  letter-spacing: 0.08em;
  color: var(--ivory-dim);
  transition: color .25s;
  white-space:nowrap;
}
.site-nav a:hover{ color: var(--gold-bright); }

.btn-reserve{
  display:inline-flex; align-items:center; justify-content:center;
  text-decoration:none;
  font-family: var(--font-accent);
  letter-spacing: 0.14em;
  font-size: 14px;
  color: var(--navy-deep);
  background: linear-gradient(180deg, var(--gold-bright), var(--gold));
  padding: 12px 30px;
  border-radius: 999px;
  transition: transform .25s, box-shadow .25s;
  white-space:nowrap;
}
.btn-reserve:hover{
  transform: translateY(-1px);
  box-shadow: 0 10px 30px -8px rgba(201,162,78,0.55);
}
.btn-reserve--header{ display:inline-flex; }

.nav-toggle{
  display:none;
  flex-direction:column; justify-content:center; gap:5px;
  width:40px; height:40px;
  background:none; border:none; cursor:pointer;
}
.nav-toggle span{
  display:block; width:22px; height:1px; background: var(--gold-bright);
  transition: transform .25s, opacity .25s;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1){ transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3){ transform: translateY(-6px) rotate(-45deg); }

.mobile-nav{
  display:none;
  flex-direction:column;
  position: fixed; top:0; right:0; bottom:0;
  width: min(78vw, 320px);
  background: var(--navy-deep);
  border-left: 1px solid var(--gold-line);
  padding: 90px 32px 32px;
  transform: translateX(100%);
  transition: transform .35s ease;
  z-index: 90;
  gap: 26px;
}
.mobile-nav.is-open{ transform: translateX(0); }
.mobile-nav a{
  text-decoration:none; color: var(--ivory-dim);
  font-size:15px; letter-spacing:0.08em;
}
.mobile-nav__cta{ color: var(--gold-bright) !important; }

/* ---------- hero ---------- */
.hero{
  display:grid;
  grid-template-columns: 1fr 1fr;
  align-items:center;
  gap: 40px;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 72px clamp(20px, 4vw, 56px) 56px;
}
.hero-copy{ max-width: 480px; }
.hero-copy h1{
  font-size: clamp(32px, 4.4vw, 50px);
  line-height:1.5;
  margin: 6px 0 26px;
}
.hero-lead{
  color: var(--ivory);
  font-size: 15px;
  line-height:2.1;
  margin-bottom: 18px;
}
.hero-sub{
  color: var(--ivory-dim);
  font-size: 14px;
  line-height:2.1;
  margin-bottom: 38px;
}
.hero-sub--last{
  margin-bottom: 0;
}
.hero-visual{
  position:relative;
  border-radius: 16px;
  overflow:hidden;
}
.hero-visual img{
  width:100%;
  border-radius: 16px;
  -webkit-mask-image: radial-gradient(ellipse 90% 90% at 55% 45%, black 55%, transparent 92%);
  mask-image: radial-gradient(ellipse 90% 90% at 55% 45%, black 55%, transparent 92%);
}

/* ---------- section dividers (CSS only: thin gold line + small star) ---------- */
.divider{
  height: 64px;
  max-width: 480px;
  margin: 0 auto;
  position: relative;
  display:flex;
  align-items:center;
  justify-content:center;
}
.divider::before{
  content:'';
  position:absolute;
  left:0; right:0; top:50%;
  height:1px;
  background: linear-gradient(90deg, transparent, var(--gold-line) 20%, var(--gold-line) 80%, transparent);
}
.divider::after{
  content:'✦';
  position:relative;
  color: var(--gold);
  font-size: 12px;
  background: var(--void);
  padding: 0 16px;
}

/* ---------- generic sections ---------- */
.section{
  padding: 20px clamp(20px, 4vw, 56px) 76px;
}
.section-inner{
  max-width: var(--max-width);
  margin: 0 auto;
  text-align:center;
}
.section-inner--narrow{ max-width: 720px; }
.section-lead{
  font-size: 16px;
  color: var(--ivory);
  line-height:2;
  margin-bottom: 16px;
}
.section-body{
  font-size: 14px;
  color: var(--ivory-dim);
  line-height:2.1;
  margin-bottom: 8px;
}

/* three elements (星の配置 / 月の動き / アスペクト) */
.elements{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
  margin-top: 56px;
}
.element{ text-align:center; }
.element-glyph{
  width: 44px; height:44px;
  color: var(--gold);
  margin: 0 auto 18px;
}
.element h3{
  font-size: 17px;
  letter-spacing: 0.08em;
  margin-bottom: 10px;
}
.element p{
  font-size: 13px;
  color: var(--ivory-faint);
  line-height:1.9;
}

/* こんな時に */
.scene-list{
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px 40px;
  margin-top: 40px;
  text-align:left;
}
.scene-list li{
  font-family: var(--font-display);
  font-size: 15px;
  letter-spacing: 0.04em;
  color: var(--ivory-dim);
  padding-left: 20px;
  position:relative;
}
.scene-list li::before{
  content:'✦';
  position:absolute; left:0; top:1px;
  color: var(--gold);
  font-size: 11px;
}

/* split sections (approach / about) */
.section-inner--split{
  display:grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 56px;
  align-items:center;
  text-align:left;
  max-width: var(--max-width);
}
.section-inner--split .eyebrow,
.section-inner--split h2{ text-align:left; }
.section-inner--split h2{ margin-bottom:20px; }
.section-inner--split p{
  font-size: 14px;
  color: var(--ivory-dim);
  line-height:2.1;
  margin-bottom: 16px;
}
.approach-visual img,
.about-visual img{
  border-radius: 14px;
  border: 1px solid var(--gold-line);
}
.section-inner--split-reverse{
  grid-template-columns: 1.15fr 0.85fr;
}
.section-inner--split-reverse .about-copy{ order:1; }
.section-inner--split-reverse .about-visual{ order:2; }

.about-placeholder{
  font-style: italic;
  color: var(--ivory-faint) !important;
  border-left: 2px solid var(--gold-line);
  padding-left: 16px;
}

/* About me: 長文の折りたたみ表示 */
.about-longread-wrap{
  margin-top: 40px;
}
.about-longread-title,
.about-longread__goldhead{
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 16px;
  letter-spacing: 0.06em;
  color: var(--gold-bright);
  text-align: left;
}
.about-longread-title{
  margin-bottom: 18px;
}
.about-longread__goldhead{
  margin: 4px 0 45px;
}
.about-longread{
  position: relative;
  overflow: hidden;
  max-height: 260px;
  transition: max-height .6s ease;
}
.about-longread.is-collapsed{
  -webkit-mask-image: linear-gradient(180deg, #000 55%, transparent 96%);
  mask-image: linear-gradient(180deg, #000 55%, transparent 96%);
}
.about-longread p{
  font-size: 14px;
  color: var(--ivory-dim);
  line-height: 1.95;
  margin-bottom: 14px;
}

/* 本文と同じ書体・サイズだが、視認性を少し高めた明るい白 */
.about-longread p.about-longread__bright{
  color: var(--ivory);
}

/* セクション間の「間」を確保する余白 */
.about-longread__spacer{
  width: 100%;
}
.about-longread__spacer--1{
  height: 27px;
}
.about-longread__spacer--sm{
  height: 56px;
}
.about-longread__spacer--lg{
  height: 84px;
}

.longread-toggle{
  margin-top: 8px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: none;
  border: none;
  cursor: pointer;
  font-family: var(--font-accent);
  font-style: italic;
  font-size: 14px;
  letter-spacing: 0.08em;
  color: var(--gold-bright);
  padding: 4px 0;
}
.longread-toggle .toggle-icon{
  display:inline-flex;
  align-items:center; justify-content:center;
  width: 22px; height:22px;
  border: 1px solid var(--gold-line);
  border-radius: 50%;
  font-size: 13px;
  transition: transform .3s;
}
.longread-toggle:hover .toggle-icon{
  border-color: var(--gold);
}

/* 鑑定のイメージ */
.reading-quotes{
  margin-top: 30px;
  display:flex; flex-direction:column; gap: 18px;
}
.reading-quotes blockquote{
  font-family: var(--font-display);
  font-size: 15px;
  color: var(--ivory);
  line-height:1.9;
  padding: 20px 26px;
  border: 1px solid var(--gold-line);
  border-radius: 14px;
  background: linear-gradient(160deg, rgba(201,162,78,0.06), rgba(255,255,255,0.01));
}

/* 依頼時に必要な情報 */
.needed-list{
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px 30px;
  margin-top: 36px;
  text-align:left;
}
.needed-list li{
  font-size: 14px;
  color: var(--ivory-dim);
  padding: 14px 18px;
  border: 1px solid var(--gold-line);
  border-radius: 10px;
}
.needed-note{
  margin-top: 28px;
  font-size: 13px;
  color: var(--ivory-faint);
  font-style: italic;
}

/* reserve CTA */
.section--reserve{ padding-top: 10px; }
.reserve-inner h2{ margin-bottom:14px; }
.btn-reserve--large{
  margin-top: 30px;
  font-size: 16px;
  padding: 16px 46px;
}

/* FAQ */
.faq-list{
  margin-top: 36px;
  display:flex; flex-direction:column; gap: 12px;
  text-align:left;
}
.faq-item{
  border: 1px solid var(--gold-line);
  border-radius: 12px;
  padding: 18px 22px;
}
.faq-item summary{
  cursor:pointer;
  font-family: var(--font-display);
  font-size: 15px;
  letter-spacing: 0.03em;
  color: var(--ivory);
  list-style: none;
  display:flex; justify-content:space-between; align-items:center; gap:16px;
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary::after{
  content:'+';
  font-family: var(--font-accent);
  color: var(--gold-bright);
  font-size: 20px;
  flex-shrink:0;
  transition: transform .25s;
}
.faq-item[open] summary::after{ transform: rotate(45deg); }
.faq-item p{
  margin-top: 14px;
  font-size: 13px;
  color: var(--ivory-dim);
  line-height:1.9;
}

/* ご依頼にあたって（料金・納期など） */
.terms-list{
  margin-top: 36px;
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px 30px;
  text-align:left;
}
.terms-item{
  padding: 18px 20px;
  border: 1px solid var(--gold-line);
  border-radius: 10px;
  display:flex;
  flex-direction:column;
  gap: 6px;
}
.terms-item dt{
  font-family: var(--font-display);
  font-size: 13px;
  letter-spacing: 0.08em;
  color: var(--gold-bright);
}
.terms-item dd{
  font-size: 14px;
  color: var(--ivory-dim);
}

/* ご利用の流れ */
.steps{
  list-style:none;
  margin-top: 40px;
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 28px 36px;
  text-align:left;
}
.step{
  display:flex;
  gap: 16px;
  align-items:flex-start;
}
.step-num{
  flex-shrink:0;
  width: 32px; height:32px;
  border: 1px solid var(--gold);
  border-radius: 50%;
  display:flex; align-items:center; justify-content:center;
  font-family: var(--font-accent);
  font-style: italic;
  font-size: 14px;
  color: var(--gold-bright);
}
.step-body h3{
  font-size: 15px;
  letter-spacing: 0.06em;
  margin-bottom: 8px;
}
.step-body p{
  font-size: 13px;
  color: var(--ivory-dim);
  line-height:1.9;
}

/* ご依頼にあたって: 注意事項の一文 */
.terms-note{
  margin-top: 18px;
  font-size: 13px;
  color: var(--ivory-faint);
  font-style: italic;
  line-height:1.9;
}

/* お問い合わせ */
.contact-links{
  margin-top: 28px;
  display:flex;
  flex-wrap:wrap;
  gap: 16px;
  justify-content:center;
}
.contact-link{
  display:inline-flex;
  align-items:center;
  text-decoration:none;
  font-family: var(--font-accent);
  font-size: 14px;
  letter-spacing: 0.06em;
  color: var(--gold-bright);
  border: 1px solid var(--gold-line);
  border-radius: 999px;
  padding: 12px 26px;
  transition: all .25s;
}
.contact-link:hover{
  background: var(--gold);
  color: var(--navy-deep);
}

/* ---------- footer ---------- */
.site-footer{
  border-top: 1px solid var(--gold-line);
  padding: 40px clamp(20px, 4vw, 56px);
}
.footer-inner{
  max-width: var(--max-width);
  margin: 0 auto;
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap: 20px;
}
.footer-brand-block{ display:flex; flex-direction:column; gap:4px; }
.footer-brand{
  font-family: var(--font-display);
  font-size: 16px;
  letter-spacing: 0.2em;
  color: var(--ivory-dim);
}
.footer-teller{
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--ivory-faint);
}
.footer-nav{ display:flex; gap: 24px; flex-wrap:wrap; }
.footer-nav a{
  text-decoration:none;
  font-size: 12px;
  color: var(--ivory-faint);
  letter-spacing: 0.06em;
}
.footer-nav a:hover{ color: var(--gold-bright); }
.footer-legal{
  display:flex; gap: 20px; flex-wrap:wrap;
  width:100%;
  justify-content:center;
  border-top: 1px solid var(--gold-line);
  padding-top: 18px;
  margin-top: 4px;
}
.footer-legal a{
  text-decoration:none;
  font-size: 11px;
  color: var(--ivory-faint);
  letter-spacing: 0.05em;
}
.footer-legal a:hover{ color: var(--gold-bright); }
.footer-copy{
  font-size: 11px;
  color: var(--ivory-faint);
  letter-spacing: 0.05em;
  width:100%;
  text-align:center;
}

/* ---------- legal pages (privacy policy / tokushoho) ---------- */
.legal-hero{
  padding: 64px clamp(20px, 4vw, 56px) 8px;
  max-width: var(--max-width);
  margin: 0 auto;
  text-align:center;
}
.legal-hero .back-link{
  display:inline-block;
  margin-top: 18px;
  font-family: var(--font-accent);
  font-style: italic;
  font-size: 13px;
  letter-spacing: 0.08em;
  color: var(--gold-bright);
  text-decoration:none;
}
.legal-content{
  max-width: 760px;
  margin: 0 auto;
  padding: 24px clamp(20px, 4vw, 56px) 90px;
  text-align:left;
}
.legal-content p{
  font-size: 14px;
  color: var(--ivory-dim);
  line-height: 2.1;
  margin-bottom: 18px;
}
.legal-content h2{
  font-size: 18px;
  text-align:left;
  letter-spacing: 0.06em;
  color: var(--gold-bright);
  margin: 46px 0 16px;
}
.legal-content h2:first-of-type{ margin-top: 12px; }
.legal-content ul{
  margin: 0 0 18px;
  padding-left: 4px;
}
.legal-content ul li{
  font-size: 14px;
  color: var(--ivory-dim);
  line-height: 2;
  padding-left: 18px;
  position:relative;
}
.legal-content ul li::before{
  content:'・';
  position:absolute; left:0;
  color: var(--gold);
}
.legal-hero h1{
  font-size: clamp(24px, 3.2vw, 32px);
  margin: 14px 0 4px;
}
.contact-link-inline{
  color: var(--gold-bright);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 980px){
  .site-nav{ display:none; }
  .btn-reserve--header{ display:none; }
  .nav-toggle{ display:flex; }
  .mobile-nav{ display:flex; }

  .hero{
    grid-template-columns: 1fr;
    text-align:center;
    padding-top: 48px;
  }
  .hero-copy{ margin:0 auto; }
  .hero-visual{ order:-1; }

  .section-inner--split,
  .section-inner--split-reverse{
    grid-template-columns: 1fr;
    text-align:center;
  }
  .section-inner--split .eyebrow,
  .section-inner--split h2{ text-align:center; }
  .section-inner--split-reverse .about-copy{ order:2; }
  .section-inner--split-reverse .about-visual{ order:1; }
  .section-inner--split p{ text-align:left; }

  .elements{ grid-template-columns:1fr; gap:40px; }
  .scene-list{ grid-template-columns:1fr; }
  .needed-list{ grid-template-columns:1fr; }
  .terms-list{ grid-template-columns:1fr; }
  .steps{ grid-template-columns:1fr; }
}

@media (max-width: 560px){
  .hero-copy h1{ font-size: clamp(28px, 8vw, 36px); }
}