/* =========================================================
   電話占いシェリール｜ツインレイ記事ページ
   ========================================================= */

:root{
  --purple: #7B5EA7;
  --purple-deep: #5B3E86;
  --purple-light: #C9A8E0;
  --lavender: #F5F0F7;
  --pink-start: #C95690;
  --pink-end: #ED88B0;
  --ink: #333333;
  --ink-soft: #6b6b6b;
  --line: #E4D6EE;
  --gold: #C9A15A;
}

*{ box-sizing: border-box; }

body{
  margin: 0;
  color: var(--ink);
  font-family: "Noto Sans JP", "Hiragino Sans", "Yu Gothic", sans-serif;
  line-height: 1.9;
  font-size: 15px;
  -webkit-font-smoothing: antialiased;
}

.wrap{ max-width: 680px; margin: 0 auto; padding: 20px 20px 60px; }
a{ color: var(--purple); }

/* ---------- HERO ---------- */
.hero-img{
  width: 100%;
  display: block;
}

.highlight1{
  font-weight: 700;
}

.highlight2{
  color: #B23A63;
  font-weight: 700;
  background: linear-gradient(transparent 60%, #ffddec 60%);
}

.highlight3{
  color: #5e68a7;
  font-weight: 700;
  background: linear-gradient(transparent 60%, #ddecff 60%);
}

h1.title{
  font-size: 1.3em;
  line-height: 1.4;
  color: #2c2c2c;
  margin: 0 0 30px;
  font-weight: 600;
}

/* ---------- INTRO ---------- */
.intro{ padding:  15px 0; font-size: 15px; }
.intro p{ margin: 0 0 1.1em; }

.banner-link{
  display: block;
  margin: 24px 0 8px;
}
.banner-link img{
  width: 100%;
  display: block;
}

.cta-btn{
  display: block;
  text-align: center;
  background: linear-gradient(135deg, var(--pink-start), var(--pink-end));
  color: #fff !important;
  text-decoration: none;
  font-weight: 700;
  font-size: 15px;
  padding: 16px 20px;
  border-radius: 8px;
  box-shadow: 0 8px 18px -6px rgba(201,86,144,.5);
  margin: 22px 0 8px;
}
.cta-btn.small{ font-size: 13.5px; padding: 13px 16px; }

/* ---------- TOC ---------- */
.toc{
  background: var(--lavender);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 20px 22px 6px;
}
.toc-title{
  font-weight: 700;
  color: var(--purple-deep);
  font-size: 15px;
  margin: 0 0 10px;
}
.toc ol{ list-style: none; margin: 0; padding: 0 0 14px; }
.toc li{
  border-bottom: 1px dashed var(--line);
  padding: 5px 2px;
  font-size: 13.5px;
}
.toc li:last-child{ border-bottom: none; }
.toc a{ color: var(--ink); text-decoration: none; }

/* ---------- SECTION HEADERS ---------- */
h2.h2{
  font-size: 19px;
  color: #2c2c2c;
  font-weight: 700;
  margin: 52px 0 22px;
  padding: 10px 0;
  border-top: 3px solid var(--purple);
  border-bottom: 3px solid var(--purple);
  line-height: 1.5;
}
h3.h3{
  font-size: 16px;
  color: var(--purple-deep);
  margin: 32px 0 14px;
  font-weight: 700;
  padding-left: 12px;
  border-left: 5px solid var(--purple-light);
}
section.block p{ font-size: 14.5px; margin: 0 0 1.15em; }

.img-block{
  width: 100%;
  margin: 16px 0 22px;
}
.img-block img{
  width: 100%;
  display: block;
}

.back-toc{ text-align: right; font-size: 12.5px; margin: 10px 0 0; }
.back-toc a{ text-decoration: none; color: var(--purple); }

ul.plain-list{
  list-style: disc;
  padding-left: 1.4em;
  margin: 0 0 1.2em;
  font-size: 14.5px;
}
ul.plain-list li{ margin-bottom: 4px; }

.tag-box{
  background: var(--lavender);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 6px 18px;
  margin: 16px 0 22px;
}
.tag-row{
  padding: 12px 0;
  border-bottom: 1px dashed var(--line);
}
.tag-row:last-child{ border-bottom: none; }
.tag-row .tag-label{
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: var(--purple-deep);
}
.tag-row .tag-items{
  font-size: 13px;
  color: var(--ink-soft);
}

/* ---------- 先生写真（中央寄せ・丸型） ---------- */
.teller-photo-wrap{
  text-align: center;
}
.teller-photo{
  width: 150px;
  height: 150px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
  margin: 0 auto 12px;
  border: 4px solid #fff0bd;
  box-shadow: 0 4px 14px rgba(91,62,134,.28);
}
.teller-photo-wrap .teller-name{
  margin: 0;
}

/* ---------- 雰囲気・相談内容テーブル ---------- */
.teller-table{
  width: 100%;
  border-collapse: collapse;
  margin: 18px 0 20px;
  font-size: 13px;
}
.teller-table th,
.teller-table td{
  border: 1px solid var(--line);
  padding: 11px 14px;
  text-align: left;
  vertical-align: top;
}
.teller-table th{
  background: var(--lavender);
  color: var(--purple-deep);
  font-weight: 700;
  width: 34%;
  white-space: nowrap;
}
.teller-table td{ color: var(--ink); }

/* ---------- 口コミ ---------- */
.review-box{
  background: #fff;
  border: 1px solid var(--line);
  border-left: 4px solid var(--purple-light);
  border-radius: 8px;
  padding: 18px 18px 16px;
  margin: 16px 0;
}
.review-label{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 700;
  color: var(--purple);
  background: var(--lavender);
  padding: 4px 12px;
  border-radius: 999px;
  margin-bottom: 10px;
}
.review-text{
  font-size: 12.5px;
  color: var(--ink-soft);
  white-space: pre-line;
  line-height: 1.9;
}

/* ---------- FINAL CTA PANEL ---------- */
.final-cta{
  margin: 20px 0;
  background: var(--lavender);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 32px 22px;
  text-align: center;
}
.final-cta .badge{
  display: inline-block;
  background: #fff;
  border: 1px solid var(--purple-light);
  color: var(--purple-deep);
  font-size: 12px;
  padding: 6px 16px;
  border-radius: 999px;
  margin-bottom: 14px;
  font-weight: 700;
}
.final-cta h3{
  font-size: 19px;
  margin: 0 0 10px;
  line-height: 1.6;
  color: #2c2c2c;
  font-weight: 800;
}
.final-cta .cta-btn{ margin: 0 auto; max-width: 360px; }

footer.endnote{
  text-align: center;
  font-size: 11px;
  color: var(--ink-soft);
  padding: 30px 0 10px;
}