/* 愛着スタイル診断 着地ページ（/attachment/）
   PC／SPともモックのトレース。影は使わず、カードは薄い枠線で区切る。 */

/*
  幅と左右余白はサイト共通の .container と同じトークンを使う。
  独自の 66rem を持つと、本サイトより 270px 広く・余白が半分になって浮く。
*/
.lp-inner {
  width: 100%;
  max-width: var(--content-max, 920px);
  margin: 0 auto;
  padding: 0 var(--content-pad, 2rem);
}

/* 診断の細い列。中身を 26.5rem に保ったまま、左右余白は共通値を守る */
.lp-inner--narrow {
  max-width: calc(26.5rem + var(--content-pad, 2rem) * 2);
}

/* ── 型ごとの色 ── */

[data-type="secure"] {
  --t-ink: var(--pink, #ff6b8a);
  --t-tint: #fff1f4;
  --t-line: #ffd9e2;
  --t-fill: #ffe3ea;
}

[data-type="anxious"] {
  --t-ink: var(--pink-deep, #e8456a);
  --t-tint: #fff3ec;
  --t-line: #ffdcc9;
  --t-fill: #ffe7d8;
}

[data-type="dismissive"] {
  --t-ink: var(--blue-deep, #2a9fd4);
  --t-tint: #eef8fd;
  --t-line: #cfe9f7;
  --t-fill: #d9eefa;
}

[data-type="fearful"] {
  --t-ink: var(--purple, #6b4fc4);
  --t-tint: #f5f1fa;
  --t-line: #ded2f0;
  --t-fill: #e9e0f6;
}

/* ── ヒーロー ── */

.lp-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 1.5rem 0 1.7rem;
  background: #fff url("/attachment/illus/lp-hero-deco-sp.png?v=2") center center / 100% 100% no-repeat;
}

.lp-hero-copy {
  text-align: center;
}

.lp-hero-kicker {
  margin: 0 0 0.7rem;
  font-size: 0.78rem;
  font-weight: 500;
  line-height: 1.85;
  color: var(--text-muted, #636e72);
}

.lp-hero-copy h1 {
  margin: 0;
  font-size: clamp(1.7rem, 7.4vw, 2.7rem);
  font-weight: 800;
  line-height: 1.45;
  letter-spacing: -0.04em;
  font-feature-settings: "palt" 1;
}

.lp-hero-copy h1 em {
  font-style: normal;
  color: var(--pink, #ff6b8a);
}

.lp-hero-copy h1 .lp-q {
  margin-left: -0.2em;
}

.lp-hero-art {
  margin: 0.45rem auto 0.55rem;
  width: min(11rem, 46%);
}

.lp-hero-art img {
  display: block;
  width: 100%;
  height: auto;
}

.lp-hero-lead {
  margin: 0 auto 1.05rem;
  max-width: 30rem;
  font-size: 0.94rem;
  font-weight: 600;
  line-height: 1.85;
}

.lp-cta {
  width: min(20rem, 100%);
  gap: 0.4rem;
}

.lp-hero-meta {
  margin: 0.7rem 0 0.3rem;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--text, #2d3436);
}

.lp-hero-note {
  margin: 0 auto;
  max-width: 28rem;
  font-size: 0.7rem;
  line-height: 1.7;
  color: var(--text-muted, #636e72);
}

.lp-br-pc,
.lp-only-pc {
  display: none;
}

/* ── 診断（20問はここに出る） ── */

#diag,
#about-style {
  scroll-margin-top: calc(var(--header-h, 64px) + 12px);
}

.lp-diag {
  padding: 1.25rem 0 0.25rem;
}

.lp-diag:has([data-attach-quiz][hidden]) {
  display: none;
}

.attach-wrap[hidden] {
  display: none !important;
}

.lp-diag .attach-wrap {
  padding: 0.85rem 0.35rem 1.1rem;
  background: #fff;
  border: 1px solid var(--border, #eceff1);
  border-radius: 20px;
}

/*
  結果は白いカードが縦に並ぶ。外側もカードだと、同じ色・同じ枠・同じ角丸が
  二重に見える。枠は1階層だけ持たせるので、結果表示中は外側を素の列に戻す。
*/
.lp-diag .attach-wrap.is-showing-result {
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: 0;
}

/* ── セクションの共通形 ── */

.lp-sec {
  padding: 2.4rem 0;
}

.lp-sec--tint {
  background: #fbfcfe;
}

.lp-h2 {
  margin: 0 0 0.5rem;
  text-align: center;
  font-size: clamp(1.15rem, 3.6vw, 1.42rem);
  font-weight: 800;
  line-height: 1.5;
}

.lp-h2--deco::before,
.lp-h2--deco::after {
  content: "";
  display: inline-block;
  width: 0.7rem;
  height: 0.7rem;
  margin: 0 0.7rem;
  vertical-align: 0.18em;
  border-right: 1.5px solid #cbd5da;
  border-bottom: 1.5px solid #cbd5da;
}

.lp-h2--deco::before {
  transform: rotate(35deg);
}

.lp-h2--deco::after {
  transform: rotate(55deg);
}

/*
  文字の段は 1.15 / 1.0 / 0.95 / 0.9 / 0.85 / 0.8rem の6段だけ使う。
  0.95rem が読ませる文章の基準（本サイトの副本文と同じ 16.2px）。
*/
.lp-sec-lead {
  margin: 0 auto 1.6rem;
  max-width: 42rem;
  text-align: center;
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1.95;
}

/* ── 4つの愛着スタイル ── */

.lp-type-row {
  list-style: none;
  margin: 1.2rem 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
}

.lp-type-row > li {
  margin: 0;
  padding: 0.7rem 0.7rem 1.1rem;
  text-align: center;
  background: linear-gradient(180deg, var(--t-fill) 0%, #fff 74%);
  border: 1px solid var(--t-line);
  border-radius: 18px;
}

.lp-type-art {
  display: block;
  overflow: hidden;
  width: 58%;
  margin: 0.3rem auto 0;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  background: var(--t-tint);
}

.lp-type-art img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.lp-type-row strong {
  display: block;
  margin: 0.7rem 0 0.35rem;
  font-size: 1.06rem;
  font-weight: 800;
  color: var(--t-ink);
}

.lp-type-desc {
  display: block;
  font-size: 0.85rem;
  line-height: 1.7;
  color: var(--text-muted, #636e72);
}

/* ── 「愛着障害 診断」を検索して訪れた方へ ── */

.lp-seek {
  display: grid;
  gap: 1.1rem;
  padding: 1.4rem 1.15rem 1.6rem;
  background: #f4f7fc;
  border-radius: 26px;
}

.lp-seek-art {
  display: none;
  margin: 0;
}

.lp-seek-art img {
  display: block;
  width: min(13rem, 62%);
  height: auto;
  margin: 0 auto;
}

.lp-seek h2 {
  margin: 0 0 0.9rem;
  font-size: clamp(1.05rem, 3.4vw, 1.24rem);
  font-weight: 800;
  line-height: 1.55;
}

.lp-check {
  list-style: none;
  margin: 0 0 0.85rem;
  padding: 0;
  display: grid;
  gap: 0.55rem;
}

.lp-check li,
.lp-fcheck li {
  position: relative;
  margin: 0;
  padding-left: 1.75rem;
  font-size: 0.95rem;
  line-height: 1.7;
}

.lp-check li::before,
.lp-fcheck li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.18em;
  width: 1.05rem;
  height: 1.05rem;
  border-radius: 5px;
  background: #ffe6ed;
  border: 1px solid #ffc4d3;
}

.lp-check li::after,
.lp-fcheck li::after {
  content: "";
  position: absolute;
  left: 0.28rem;
  top: 0.42em;
  width: 0.42rem;
  height: 0.24rem;
  border-left: 1.6px solid var(--pink, #ff6b8a);
  border-bottom: 1.6px solid var(--pink, #ff6b8a);
  transform: rotate(-45deg);
}

.lp-seek-q {
  margin: 0 0 1rem;
  font-size: 0.95rem;
  font-weight: 700;
}

.lp-pill-outline {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.55rem 1.5rem;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--pink-deep, #e8456a);
  background: #fff;
  border: 1.5px solid #ffb8c9;
  border-radius: 999px;
}

.lp-seek-note {
  margin: 0;
  font-size: 0.85rem;
  line-height: 1.95;
  color: var(--text, #2d3436);
}

/* ── 愛着スタイルとは？ ── */

.lp-about-axes {
  margin: -0.4rem auto 1.6rem;
  max-width: 40rem;
  text-align: center;
  font-size: 0.95rem;
  font-weight: 500;
  line-height: 1.9;
  color: var(--text, #2d3436);
}

.lp-about-grid {
  display: grid;
  gap: 1.6rem;
}

.lp-matrix {
  max-width: 24rem;
  margin: 0 auto;
}

.lp-mx-lab {
  margin: 0;
  font-size: 0.8rem;
  font-weight: 700;
  line-height: 1.5;
  color: var(--text, #2d3436);
}

.lp-mx-lab small {
  display: block;
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--text-muted, #636e72);
}

.lp-mx-lab--top {
  text-align: center;
  margin-bottom: 0.4rem;
}

.lp-mx-lab--bottom {
  text-align: center;
  margin-top: 0.4rem;
}

.lp-mx-body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-areas:
    "grid grid"
    "left right";
  align-items: center;
  gap: 0.55rem 0.4rem;
}

.lp-mx-lab--left {
  grid-area: left;
  text-align: left;
}

.lp-mx-lab--right {
  grid-area: right;
  text-align: right;
}

.lp-mx-grid {
  grid-area: grid;
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  aspect-ratio: 1.05;
  border-radius: 10px;
  overflow: hidden;
}

/*
  地図は2軸の位置を示す。象限を型色にすると、地4＋字4＋絵の髪色が同時に立ち、
  上の4型カードと同じパレットがもう一度並ぶ。型の色分けは特徴カードに残す。
*/
.lp-mx-grid > div {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.2rem;
  padding: 0.45rem 0.3rem 0.4rem;
  text-align: center;
  font-size: 0.8rem;
  font-weight: 800;
  line-height: 1.35;
  background: #f3f5f7;
  color: var(--text, #2d3436);
}

.lp-mx-grid img {
  display: block;
  width: 52%;
  min-width: 3.6rem;
  max-width: 5.2rem;
  aspect-ratio: 1;
  object-fit: cover;
  object-position: 50% 18%;
  border-radius: 50%;
  background: #fff;
}

.lp-mx-axis {
  position: absolute;
  background: #9aabb4;
}

.lp-mx-axis--y {
  left: 50%;
  top: 0.5rem;
  bottom: 0.5rem;
  width: 1.5px;
  transform: translateX(-0.75px);
}

.lp-mx-axis--x {
  top: 50%;
  left: 0.5rem;
  right: 0.5rem;
  height: 1.5px;
  transform: translateY(-0.75px);
}

.lp-mx-axis--y::before,
.lp-mx-axis--x::before {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  border: 4px solid transparent;
}

.lp-mx-axis--y::before {
  top: -7px;
  left: -3.25px;
  border-bottom-color: #9aabb4;
}

.lp-mx-axis--x::before {
  right: -7px;
  top: -3.25px;
  border-left-color: #9aabb4;
}

/* 愛着障害と愛着スタイルの違い */

.lp-vs {
  padding: 1.15rem 1.2rem 1.2rem;
  background: #fff;
  border: 1px solid var(--border, #eceff1);
  border-radius: 18px;
}

.lp-vs h3 {
  margin: 0 0 1rem;
  font-size: 1rem;
  font-weight: 800;
  color: var(--text-muted, #636e72);
}

.lp-vs-row {
  display: grid;
  grid-template-columns: 3.6rem minmax(0, 1fr);
  gap: 0.85rem;
  margin-bottom: 1rem;
  align-items: start;
}

.lp-vs-ico {
  display: grid;
  place-items: center;
  width: 3.6rem;
  height: 3.6rem;
  border-radius: 50%;
  background: #f3f5f7;
  overflow: hidden;
}

.lp-vs-ico img {
  display: block;
  width: 78%;
  height: 78%;
  object-fit: contain;
}

.lp-vs-row strong {
  display: block;
  margin-bottom: 0.25rem;
  font-size: 0.9rem;
}

.lp-vs-row p {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.8;
  color: var(--text-muted, #636e72);
}

.lp-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.lp-vs-note {
  margin: 0;
  padding-top: 0.85rem;
  border-top: 1px dashed var(--border, #eceff1);
  font-size: 0.8rem;
  line-height: 1.75;
  color: var(--text-muted, #636e72);
}

.lp-about-src {
  margin: 1.35rem 0 0;
  font-size: 0.8rem;
  line-height: 1.75;
  color: var(--text-muted, #636e72);
}

.lp-about-src + .lp-about-src {
  margin-top: 0.65rem;
}

.lp-about-src a {
  color: var(--pink-deep, #e8456a);
  text-underline-offset: 0.16em;
}

/* ── 4つの愛着スタイルの特徴 ── */

.lp-feat-grid {
  list-style: none;
  margin: 1.2rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.8rem;
}

.lp-feat-grid > li {
  margin: 0;
  padding: 0.85rem 0.95rem 1rem;
  background: var(--t-tint);
  border: 1px solid var(--t-line);
  border-radius: 18px;
}

.lp-feat-head {
  display: grid;
  grid-template-columns: 4.4rem minmax(0, 1fr);
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.9rem;
}

.lp-feat-art {
  display: block;
  overflow: hidden;
  width: 4.4rem;
  height: 4.4rem;
  border-radius: 50%;
  background: #fff;
}

/* 小さい丸なので、顔が丸を埋めるまで寄せる */
.lp-feat-art img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.32);
  transform-origin: 50% 24%;
}

.lp-feat-head strong {
  justify-self: end;
  padding: 0.2rem 0.75rem;
  font-size: 0.9rem;
  font-weight: 800;
  color: var(--t-ink);
  background: #fff;
  border-radius: 999px;
}

.lp-fcheck {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.45rem;
}

.lp-fcheck li {
  font-size: 0.95rem;
  line-height: 1.7;
}

.lp-fcheck li::before {
  background: #fff;
  border-color: var(--t-line);
}

.lp-fcheck li::after {
  border-left-color: var(--t-ink);
  border-bottom-color: var(--t-ink);
}

.lp-feat-more {
  display: block;
  margin-top: 0.9rem;
  padding: 0;
  text-align: center;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--t-ink);
  background: none;
  border: 0;
}

/* ── 二次CTA ── */

.lp-cta-band {
  padding: 1.7rem 1.2rem 1.5rem;
  text-align: center;
  background: linear-gradient(120deg, #ffe9f0 0%, #fff8fb 48%, #ffe6ee 100%);
  border-radius: 24px;
}

.lp-cta-lead {
  margin: 0 0 0.95rem;
  font-size: 0.84rem;
  font-weight: 700;
  color: var(--pink-deep, #e8456a);
}

.lp-cta-lead::before {
  content: "＼";
  margin-right: 0.35rem;
  opacity: 0.65;
}

.lp-cta-lead::after {
  content: "／";
  margin-left: 0.35rem;
  opacity: 0.65;
}

.lp-cta-note {
  margin: 0.8rem 0 0;
  font-size: 0.8rem;
  line-height: 1.75;
  color: var(--text-muted, #636e72);
}

/* ── よくある質問 ── */

.lp-faq-title {
  margin: 0 0 0.6rem;
  font-size: clamp(1.05rem, 3.4vw, 1.2rem);
  font-weight: 800;
}

.lp-faq {
  display: grid;
}

.lp-faq details {
  border-bottom: 1px solid var(--border, #eceff1);
}

.lp-faq summary {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.8rem 0.1rem;
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 1.6;
  cursor: pointer;
  list-style: none;
}

.lp-faq summary::-webkit-details-marker {
  display: none;
}

.lp-faq summary::before {
  content: "";
  flex: none;
  width: 0;
  height: 0;
  border: 4px solid transparent;
  border-left-color: var(--pink, #ff6b8a);
}

.lp-faq summary::after {
  content: "+";
  margin-left: auto;
  padding-left: 0.6rem;
  font-size: 1.15rem;
  font-weight: 400;
  color: var(--pink, #ff6b8a);
}

.lp-faq details[open] summary::after {
  content: "−";
}

.lp-faq details p {
  margin: 0 0 1rem;
  padding-left: 1.25rem;
  font-size: 0.95rem;
  line-height: 1.9;
}

/* ── 関連記事 ── */

.lp-arts-row {
  display: grid;
  gap: 0.85rem;
  align-items: center;
}

.lp-arts-title {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 800;
}

.lp-arts {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0.6rem;
}

.lp-arts > li {
  margin: 0;
}

.lp-arts-sec {
  background: #f7f8fa;
}

.lp-arts a {
  display: grid;
  grid-template-columns: 5.4rem minmax(0, 1fr) 0.9rem;
  align-items: center;
  gap: 0.85rem;
  padding: 0.6rem 0.75rem;
  background: #fff;
  border-radius: 12px;
}

/* 記事の顔なので、絵が何か分かる大きさを保つ */
.lp-arts img {
  width: 5.4rem;
  height: 3.6rem;
  object-fit: cover;
  border-radius: 8px;
  background: var(--pink-pale, #fff8fa);
}

.lp-arts span {
  font-size: 0.9rem;
  font-weight: 700;
  line-height: 1.6;
}

.lp-arts-chev {
  justify-self: end;
  width: 0;
  height: 0;
  border: 4px solid transparent;
  border-left-color: #b9c6cd;
}

/* ── PC ── */

@media (min-width: 860px) {
  .lp-br-pc {
    display: inline;
  }

  .lp-br-sp,
  .lp-only-sp {
    display: none;
  }

  .lp-only-pc {
    display: inline;
  }

  /* 装飾はCSSで作らず、1枚の絵を敷く */
  .lp-hero {
    padding: 3rem 0 3.4rem;
    background: #fff url("/attachment/illus/lp-hero-deco.png?v=4") center center / 100% 100% no-repeat;
  }

  .lp-hero-copy {
    max-width: 32rem;
    margin: 0 auto;
  }

  .lp-hero-kicker {
    font-size: 0.85rem;
  }

  .lp-hero-copy .lp-cta {
    width: min(25rem, 100%);
  }

  /* 人物は接地させず、絵の裾を装飾の波に沈める */
  .lp-hero-art {
    position: absolute;
    right: max(1.5rem, calc((100% - 66rem) / 2 + 3rem));
    bottom: 12%;
    z-index: 1;
    width: clamp(11rem, 15.5vw, 14.5rem);
    margin: 0;
  }

  .lp-sec {
    padding: 3.2rem 0;
  }

  .lp-type-row {
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
  }

  .lp-type-row > li {
    padding: 0.85rem 0.85rem 1.3rem;
  }

  /*
    3列（絵／中身／注記）は 1122px 前提の配分で、920px では中央が 161px しか
    残らず見出しが5文字で折り返す。絵と中身の2列にして、注記は中身の下に置く。
  */
  .lp-seek {
    grid-template-columns: 13rem minmax(0, 1fr);
    column-gap: 2.6rem;
    row-gap: 1.2rem;
    padding: 2.2rem 2.3rem;
    align-items: start;
  }

  .lp-seek-art {
    display: block;
    grid-row: span 2;
    align-self: center;
  }

  .lp-seek-art img {
    width: 100%;
  }

  .lp-seek-note {
    grid-column: 2;
    margin: 0;
  }

  .lp-about-grid {
    grid-template-columns: minmax(0, 1fr) 21rem;
    gap: 2.2rem;
    align-items: start;
  }

  .lp-matrix {
    max-width: 30rem;
    margin: 0;
  }

  .lp-mx-body {
    grid-template-columns: 5.6rem minmax(0, 1fr) 5.6rem;
    grid-template-areas: "left grid right";
    gap: 0.8rem;
  }

  .lp-mx-lab--left {
    text-align: right;
  }

  /*
    4列だと1枚200pxで、箇条書きが1文字だけ次行に落ちてカード高さも揃わない。
    2列×2段にして、1枚418pxで本文をサイト共通のサイズで読めるようにする。
  */
  .lp-feat-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
  }

  .lp-faq {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: repeat(3, auto);
    grid-auto-flow: column;
    column-gap: 2.6rem;
    align-items: start;
  }

  /* 見出しを横に置くとサムネが押し潰れるので、見出しは上に出す */
  .lp-arts-row {
    grid-template-columns: minmax(0, 1fr);
    gap: 1.1rem;
  }

  .lp-arts {
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
  }

  /* アイキャッチは記事の絵。横並びの3.4remでは何が描いてあるか読めない */
  .lp-arts a {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    gap: 0.6rem;
    padding: 0.75rem 0.75rem 0.85rem;
  }

  .lp-arts img {
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 10;
    border-radius: 10px;
  }

  .lp-arts-chev {
    display: none;
  }
}