/* styles.css */
@charset "UTF-8";

    :root{
      --main:#1D2B64; /* deep indigo */
      --accent:#D4AF37; /* gold */
      --sub:#F5F5F5;
      --line:#06C755; /* kept (not used for Fiverr button) */
      --text:#222; --muted:#555; --maxw: 1000px;
    }
    html,body{margin:0;padding:0;background:#fff;color:var(--text);font-family:'Noto Sans JP',system-ui,-apple-system,Segoe UI,Roboto,"Hiragino Kaku Gothic ProN","Noto Sans JP",Meiryo,sans-serif;}
    img{max-width:100%;height:auto;}
    a{color:var(--main);text-underline-offset:2px}
    .wrap{max-width:var(--maxw);margin:0 auto;padding:0 20px}
    .section{padding:56px 0}

    .hero{position:relative;color:#fff;background: radial-gradient(120% 120% at 70% 0%, #2e3b85 0%, #141a3a 60%, #0b0f24 100%);} 
    .hero::before{content:"";position:absolute;inset:0;opacity:.25;background-image:url('../images/hero-bg-stars.webp');background-size:cover;background-position:50% 40%;}
    .hero-inner{position:relative;z-index:1;padding:140px 0 96px}
    .logo-name{font-family:'Noto Serif JP',serif;font-size:18px;letter-spacing:.08em}
    .title{font-family:'Noto Serif JP',serif;font-size:32px;line-height:1.4;margin:16px 0}
    .lead{font-size:16px;line-height:1.9;color:#eee;}
    .accent-line{width:36px;height:2px;background:var(--accent);margin:16px 0}

.lang-switch {
  position: absolute;
  top: 16px;
  right: 24px;
  font-size: 14px;
  font-family: 'Noto Sans JP', sans-serif;
}

.lang-switch a {
  color: #fff; /* Hero背景に合わせて白 */
  text-decoration: none;
  margin: 0 4px;
  transition: opacity 0.2s;
}

.lang-switch a:hover {
  opacity: 0.7;
}

.lang-switch .active {
  font-weight: bold;
  text-decoration: underline;
}

.cta {
  margin-top:20px;
  display:flex;
  gap:12px;
  align-items:center;
  flex-wrap:wrap;
  justify-content:flex-start;
}

.btn-fiverr {
  display:inline-flex;
  align-items:center;
  gap:10px;
  background:#E74C3C; /* Fiverrボタンらしい赤 */
  color:#fff;
  border:none;
  padding:14px 24px;
  border-radius:12px;
  font-weight:800;
  font-size:16px;
  text-decoration:none;
  box-shadow:0 4px 12px rgba(0,0,0,0.15);
  transition: all 0.25s ease;
}

.btn-fiverr:hover {
  background:#c0392b;        /* 濃い赤に */
  transform: translateY(-2px); /* 浮くようなアニメーション */
  box-shadow:0 6px 18px rgba(0,0,0,0.25);
}

.btn-fiverr:active {
  transform: translateY(0); /* クリック時に戻す */
  box-shadow:0 3px 8px rgba(0,0,0,0.2);
}

.cta-section .btn-fiverr {
  background: transparent;
  border: 2px solid var(--accent);
  color: var(--accent);
}
.cta-section .btn-fiverr:hover {
  background: var(--accent);
  color: #fff;
}

/* sr-only: visually hidden but available for SEO and screen readers */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

#what-is-greek-divination ul li {
  padding-right: 2rem;
  box-sizing: border-box;
}

/* スマホ用調整 */
@media (max-width: 600px) {
  .logo-name {
    font-size: 16px;
  }
}

@media (max-width: 600px) {
  .logo-name .break-mobile { display: block; }
}

    .qr{width:112px;border:6px solid #fff;border-radius:8px;box-shadow:0 6px 20px rgba(0,0,0,.25);display:none} /* hidden for EN */

    .h2{font-family:'Noto Serif JP',serif;font-size:24px;margin:0 0 14px;color:var(--main);text-align:center}
    .h2 .small{display:block;font-family:'Cinzel Decorative',serif;font-size:14px;letter-spacing:.2em;color:var(--accent);margin-bottom:6px}
    .h2 + .h2line{width:30px;height:2px;background:var(--accent);margin:0 auto 22px}
    .copy{font-size:16px;line-height:1.95;color:var(--muted);text-align:center}

    .two-col{display:grid;grid-template-columns:1fr;gap:24px;align-items:center}
    @media(min-width:900px){.two-col{grid-template-columns:1.2fr .8fr}}

    .card{background:#fff;border:1px solid #eee;border-radius:16px;box-shadow:0 6px 20px rgba(0,0,0,.06);padding:22px}

    .steps{display:grid;grid-template-columns:1fr;gap:16px}
    @media(min-width:700px){.steps{grid-template-columns:repeat(3,1fr)}}
    .step{background:var(--sub);border-radius:14px;padding:18px 16px}
    .step .num{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:50%;background:var(--main);color:#fff;font-weight:700;margin-bottom:8px}
    .step h3{margin:6px 0 8px;font-size:16px}
    .step p{margin:0;color:#555;line-height:1.8}

    .faq{max-width:820px;margin:0 auto}
    details{background:#fff;border:1px solid #eee;border-radius:12px;padding:14px 16px;margin:10px 0}
    summary{font-weight:700;cursor:pointer}
    details p{margin:10px 0 0;color:#555;line-height:1.9}

    .cta-section{background: linear-gradient(180deg, #0b0f24 0%, #1D2B64 100%);color:#fff;text-align:center}
    .cta-section .h2{color:#fff}
    .cta-section .copy{color:#e8e8e8}

    footer{background:#0b0f24;color:#b8c0ff;padding:26px 0;font-size:12px}
    footer a{color:#b8c0ff}

    .prof{display:grid;grid-template-columns:1fr;gap:18px;align-items:center}
    @media(min-width:860px){.prof{grid-template-columns:280px 1fr}}
    .prof img{border-radius:12px}
    .prof .name{font-family:'Noto Serif JP',serif;font-weight:700;font-size:18px}

    .muted{color:#777}
    .center{text-align:center}

    /* layout fixes kept from JP */
    @media (min-width: 900px) {.two-col .copy { grid-column: 1 / 2; }}
    .copy p:not(.highlight-quote) { margin: 0 0 1rem; line-height: 1.95; color: var(--muted); }
    .copy .highlight-quote { border-left: 4px solid var(--accent); padding: 10px 16px; font-style: italic; background: #faf9f5; color: var(--main); margin: 18px 0; }
    .gold-underline { background: linear-gradient(transparent 60%, rgba(212,175,55,0.28) 60%); }

    .footer-links a { text-decoration: none; color: inherit; }
    .footer-links a:hover { text-decoration: underline; }

    .two-col { align-items: start; }
    @media (min-width: 900px) {
      .two-col .h2 { text-align: left; }
      .two-col .h2 + .h2line { margin-left: 0; margin-right: auto; }
      .two-col > div:first-child { display: contents; }
      .two-col .h2, .two-col .h2 + .h2line { grid-column: 1 / -1; text-align: center; margin-left: auto; margin-right: auto; }
      .two-col p.copy { grid-column: 1 / 2; text-align: left; }
      .two-col > div:nth-of-type(2) { grid-column: 2 / 3; }
      .two-col { align-items: start; }
    }

    @media (max-width: 480px) { .hero-inner { padding: 110px 20px 80px; } }
    @media (max-width: 480px) { .hero::before { background-position: right center; } }

#card-rotator { transition: opacity .25s ease; }
#card-rotator.is-fading { opacity: 0; }

/* mediumセクション */
.medium-section {
  background: #fafafa;
  border-top: 1px solid #eee;
  padding: 40px 0;
  margin-top: 60px;
}

.medium-heading {
  font-size: 1.4rem;
  font-weight: 600;
  text-align: center;
  margin-bottom: 24px;
}

.footer-flex {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
@media(min-width: 860px) {
  .footer-flex { flex-direction: row; justify-content: space-between; align-items: flex-start; }
}

.footer-left {
  font-size: 12px;
  line-height: 1.6;
}

.footer-right {
  max-width: 600px;
}

.footer-heading {
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 10px;
  color: #fff;
}

.footer-medium-feed a {
  color: #b8c0ff;
  text-decoration: none;
}

.footer-medium-feed {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 12px;
  line-height: 1.5;
}

.footer-medium-feed li { margin-bottom: 6px; }
.footer-note-feed a {
  color: #b8c0ff;
  text-decoration: none;
}
.footer-medium-feed a:hover { text-decoration: underline; }
.footer-medium-feed .medium-date {
  margin-left: 6px;
  color: #888ecf;
  font-size: 11px;
}