@charset "UTF-8";
/* =========================================================
   /salon/ つだあゆこオンラインサロン入会案内 専用スタイル
   ========================================================= */

/* ---------- 会員特典 ---------- */
.benefit-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.4rem; }
@media (max-width: 860px) { .benefit-grid { grid-template-columns: 1fr; } }
.benefit-card {
  position: relative;
  background: var(--paper);
  padding: 2rem 1.8rem 1.8rem;
  box-shadow: 0 2px 10px rgba(0,0,0,.04);
  border-top: 3px solid var(--magenta);
  display: flex; flex-direction: column; align-items: center;
}
.benefit-num { margin: 0; font-family: var(--serif); font-size: .8rem; font-weight: 700; color: var(--magenta); letter-spacing: .2em; }
.benefit-card h3 { margin: .2rem 0 .8rem; font-family: var(--serif); font-size: 1.15rem; line-height: 1.6; color: var(--black); }
.benefit-card p { margin: 0 0 1rem; font-size: .88rem; }
.benefit-value {
  margin-top: auto !important; align-self: stretch;
  display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: .3rem .6rem;
  padding: .7rem 1rem; background: var(--off);
  font-size: .82rem !important;
}
.benefit-value s { color: var(--ink-soft); }
.benefit-value strong { color: var(--berry); font-size: 1rem; }
.benefit-card--pending { border-top-color: var(--gray); background: #fbfbfa; }

/* ---------- 過去のお話会（アーカイブ一覧） ---------- */
.archive-value {
  display: inline-block; line-height: 1.9;
  margin: 0 auto 1rem; padding: .9rem 1.8rem;
  border: 1px solid var(--line); background: var(--paper);
  font-family: var(--serif); font-weight: 700; font-size: 1.05rem; color: var(--black);
}
.archive-value .price { font-size: 1.5rem; color: var(--black); }
.archive-value .price small { font-size: .7rem; margin-left: .1em; }
.archive-value strong { color: var(--berry); font-size: 1.3rem; }
.archive-lead { margin: 0 auto 2.4rem; font-size: .88rem; }

/* ---------- 料金（2コース・通常価格表示） ---------- */
.course-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.6rem; max-width: 960px; margin: 0 auto; }
@media (max-width: 860px) { .course-grid { grid-template-columns: 1fr; } }
.course-card {
  background: var(--paper); border: 1px solid var(--line); border-top: 4px solid var(--black);
  padding: 2.2rem 1.8rem 2rem; display: flex; flex-direction: column;
  box-shadow: 0 14px 34px rgba(0,0,0,.06);
}
.course-card--premium { border-top-color: var(--magenta); }
.course-label { margin: 0; font-size: .7rem; font-weight: 700; letter-spacing: .2em; color: var(--orchid); }
.course-name { margin: .2rem 0 .6rem; font-family: var(--serif); font-size: 1.45rem; color: var(--black); }
.course-for { margin: 0 0 1.4rem; font-size: .82rem; color: var(--ink-soft); }
.course-items { margin: 0 0 1.6rem; padding: 1.1rem 1rem; background: var(--off); display: grid; gap: .5rem; font-size: .88rem; }
.course-items strong { color: var(--berry); }
.course-note { display: block; margin-top: .3rem; font-size: .75rem; color: var(--ink-soft); line-height: 1.7; }
.course-price { margin: auto 0 1.4rem; }
.course-price div { display: flex; justify-content: center; align-items: baseline; gap: .8rem; }
.course-price dt { font-size: .8rem; color: var(--charcoal); }
.course-price dd { margin: 0; }
.price-num { font-family: var(--serif); font-weight: 700; font-size: 2rem; color: var(--black); line-height: 1.4; }
.price-num small { font-family: var(--sans); font-size: .7rem; font-weight: 500; margin-left: .3em; color: var(--ink-soft); }
.price-sub { font-weight: 700; font-size: .95rem; }
.course-card .btn { display: block; }
@media (max-width: 760px) { .course-card { padding: 1.8rem 1.2rem 1.6rem; } }

.price-info { max-width: 960px; margin: 1.8rem auto 0; padding: 1.4rem 1.8rem; background: var(--paper); border: 1px solid var(--line); font-size: .82rem; }
.price-info dl { margin: 0; }
.price-info dt { font-weight: 700; color: var(--black); }
.price-info dd { margin: 0 0 1rem; }
.price-info dd:last-child { margin: 0; }
.price-info .link-arrow { margin-top: .4rem; }

/* 全回の合計（9,800円 × 回数） */
.archive-total { margin: 0 auto .6rem; font-size: .9rem; }
.archive-total strong { font-family: var(--serif); font-size: 1.25rem; color: var(--berry); }
.archive-total small { margin-left: .3em; color: var(--ink-soft); }

/* 単発参加との比較 */
.compare { max-width: 760px; margin: 3rem auto 0; }
.compare-title { margin: 0 0 1rem; font-family: var(--serif); font-size: 1.1rem; color: var(--black); }
.compare-table { width: 100%; border-collapse: collapse; background: var(--paper); font-size: .85rem; }
.compare-table th, .compare-table td { padding: .9rem 1rem; border: 1px solid var(--line); text-align: center; }
.compare-table thead th { background: var(--off); font-weight: 700; }
.compare-table thead th.is-member { background: var(--berry); color: #fff; }
.compare-table tbody th { font-weight: 500; }
.compare-table td.is-member { color: var(--berry); font-weight: 700; }
@media (max-width: 560px) { .compare-table th, .compare-table td { padding: .7rem .4rem; font-size: .78rem; } }

.promo-note {
  max-width: 760px; margin: 2.4rem auto 0;
  padding: 1.4rem 1.6rem; background: var(--pink-mist);
  border-top: 2px solid var(--magenta);
  font-size: .85rem;
}
.promo-note p { margin: 0 0 .8rem; }
.promo-note p:last-child { margin: 0; }

/* ---------- プロフィール（簡易・縦積みセンター） ---------- */
.mini-profile { max-width: 720px; margin: 0 auto; }
.mini-profile img { width: 11rem; aspect-ratio: 1; object-fit: cover; object-position: 50% 10%; border-radius: 50%; margin: 0 auto 1.2rem; display: block; }
.mini-profile h3 { margin: 0 0 .2rem; font-family: var(--serif); font-size: 1.4rem; color: var(--black); }
.mini-profile-role { margin: 0 0 1.2rem; font-size: .78rem; color: var(--orchid); font-weight: 700; line-height: 1.8; }
.mini-profile p { font-size: .88rem; }
.archive-value .nw { white-space: nowrap; }
@media (max-width: 760px) { .archive-value { padding: .9rem 1.2rem; font-size: .95rem; } }
.archive-total strong, .archive-total small { white-space: nowrap; }

/* ---------- /salon/ 下部：会員ページへの小さな入口 ---------- */
.member-entry { padding: 1.4rem 0; background: var(--off); border-top: 1px solid var(--line); }
.member-entry p { margin: 0; font-size: .78rem; color: var(--ink-soft); }
.member-entry a { color: var(--charcoal); }
.member-entry a:hover { color: var(--berry); }

/* =========================================================
   /salon/member/ 会員専用 過去のお話会アーカイブ
   ========================================================= */

/* ---------- パスワード入力 ---------- */
.member-lock { background: var(--off); }
.member-lock[hidden] { display: none; }
.member-lock-box {
  max-width: 30rem; margin: 0 auto; padding: 2.6rem 2.2rem 2.2rem;
  background: var(--paper); border-top: 3px solid var(--magenta);
  box-shadow: 0 14px 34px rgba(0,0,0,.06);
}
.member-lock-icon { width: 2.4rem; height: 2.4rem; margin: 0 auto .8rem; display: block; fill: none; stroke: var(--orchid); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.member-lock-title { margin: 0 0 .4rem; font-family: var(--serif); font-size: 1.3rem; color: var(--black); }
.member-lock-lead { margin: 0 0 1.6rem; font-size: .85rem; }
.member-lock-label { display: block; margin-bottom: .4rem; text-align: left; font-size: .8rem; font-weight: 700; color: var(--charcoal); }
.member-lock-field { display: flex; gap: .5rem; }
.member-lock-input {
  flex: 1; min-width: 0; height: 3.4rem; padding: 0 1rem;
  border: 2px solid var(--line); border-radius: 6px; background: var(--paper);
  font: inherit; font-size: 1.1rem; letter-spacing: .12em; color: var(--black);
}
.member-lock-input:focus { outline: none; border-color: var(--orchid); }
.member-lock-input.is-error { border-color: var(--magenta); animation: member-shake .35s ease; }
.member-lock-toggle {
  flex: none; width: 4.2rem; height: 3.4rem;
  border: 2px solid var(--line); border-radius: 6px; background: var(--off);
  font: inherit; font-size: .8rem; color: var(--charcoal); cursor: pointer;
}
.member-lock-toggle:hover { border-color: var(--orchid); color: var(--orchid); }
.member-lock-error { min-height: 1.6em; margin: .5rem 0 .6rem; font-size: .8rem; font-weight: 700; color: var(--berry); text-align: left; }
.member-lock-btn { display: block; width: 100%; min-height: 3.6rem; font-size: 1.05rem; border: 0; cursor: pointer; font-family: inherit; }
.member-lock-note { margin: 1.2rem 0 0; font-size: .78rem; color: var(--ink-soft); }
@keyframes member-shake { 0%,100% { transform: translateX(0); } 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }
@media (max-width: 760px) {
  .member-lock-box { padding: 2rem 1.2rem 1.8rem; }
}

/* ---------- 絞り込み（PCは画面上部に固定） ---------- */
.member-filter { padding: 1.4rem 0 .6rem; background: var(--off); border-bottom: 1px solid var(--line); }
.member-filter .genre-tabs { margin-bottom: .8rem; }
.member-count { margin: 0; font-size: .8rem; color: var(--ink-soft); }
.member-count strong { font-family: var(--serif); font-size: 1.1rem; color: var(--magenta); margin: 0 .1em; }
@media (min-width: 761px) {
  .member-filter { position: sticky; top: var(--header-h); z-index: 20; background: rgba(247,246,244,.97); }
}
@media (max-width: 760px) {
  .member-filter .genre-tab { font-size: .72rem; padding: .5em 1em; }
}

/* ---------- 年ごとの一覧 ---------- */
.member-archive { padding-top: 3rem; }
.member-intro { margin: 0 auto 2.6rem; font-size: .85rem; }
.member-year { margin-bottom: 3.4rem; }
.member-year[hidden] { display: none; }
.member-year-head { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.2rem; }
.member-year-num { margin: 0; font-family: var(--serif); font-size: 1.6rem; color: var(--black); line-height: 1; }
.member-year-line { flex: 1; height: 1px; background: linear-gradient(90deg, var(--magenta), var(--line) 30%, transparent); }
.member-year-count { font-size: .72rem; color: var(--ink-soft); white-space: nowrap; }
.member-empty { padding: 3rem 0; color: var(--ink-soft); }
.member-empty[hidden] { display: none; }

/* カード全体を押すと再生 */
.member-play {
  display: flex; flex-direction: column; width: 100%; height: 100%;
  padding: 0; border: 0; background: none; text-align: left;
  font: inherit; color: inherit; cursor: pointer;
  transition: transform .25s, box-shadow .25s;
}
.member-play:hover, .member-play:focus-visible { transform: translateY(-3px); box-shadow: 0 12px 28px rgba(0,0,0,.1); }
.member-play:focus-visible { outline: 2px solid var(--orchid); outline-offset: 2px; }
.member-play-icon {
  position: absolute; left: 50%; top: 50%; width: 3rem; height: 3rem; margin: -1.5rem 0 0 -1.5rem;
  border-radius: 50%; background: rgba(163,23,94,.88);
  transition: transform .25s, background .25s;
}
.member-play-icon::after {
  content: ""; position: absolute; left: 54%; top: 50%; transform: translate(-50%, -50%);
  border-style: solid; border-width: .5rem 0 .5rem .8rem; border-color: transparent transparent transparent #fff;
}
.member-play:hover .member-play-icon { transform: scale(1.1); background: var(--magenta); }

/* ---------- 動画の再生（モーダル） ---------- */
.member-modal {
  position: fixed; inset: 0; z-index: 100;
  display: flex; align-items: center; justify-content: center;
  padding: 1rem; background: rgba(0,0,0,.88);
}
.member-modal[hidden] { display: none; }
.member-modal-inner { width: 100%; max-width: 900px; text-align: left; }
.member-modal-video { position: relative; aspect-ratio: 16 / 9; background: #000; }
.member-modal-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.member-modal-info { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; padding: 1rem 1.2rem; background: var(--charcoal); color: #fff; }
.member-modal-date { margin: 0 0 .2rem; font-size: .7rem; font-weight: 700; color: var(--orchid); letter-spacing: .06em; }
.member-modal-title { margin: 0; font-family: var(--serif); font-size: .9rem; line-height: 1.7; }
.member-modal-yt { display: inline-block; margin-top: .5rem; font-size: .72rem; color: #cfcfcf; }
.member-modal-yt:hover { color: #fff; }
.member-modal-close {
  flex: none; width: 2.6rem; height: 2.6rem;
  border: 1px solid rgba(255,255,255,.4); background: none; color: #fff;
  font-size: 1.2rem; line-height: 1; cursor: pointer;
}
.member-modal-close:hover { background: #fff; color: var(--black); }
.member-filter .genre-tab[aria-pressed="true"]:hover { border-color: var(--black); color: #fff; }

/* ---------- /salon/ メインビジュアル（写真入りのタイトル帯） ----------
   PC：写真を右側に置き、文字は左（人物と重ならない）。写真の左端は背景色になじませる
   スマホ（760px以下）：縦長の写真（salon-hero-sp.jpg）を上に、文字は写真の下側に重ねる（顔にかからない） */
.salon-hero {
  display: flex; align-items: center;
  min-height: 27rem; padding: 0;
  background: #1d1d1d; text-align: left;
}
.salon-hero-photo { position: absolute; top: 0; right: 0; bottom: 0; width: 64%; }
.salon-hero-photo img {
  width: 100%; height: 100%; display: block;
  object-fit: cover; object-position: 45% 30%;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 22%);
          mask-image: linear-gradient(90deg, transparent 0, #000 22%);
}
.salon-hero .container { position: relative; z-index: 1; padding: 3rem 0; }
.salon-hero .page-title,
.salon-hero .page-header-en { max-width: 50%; }
.salon-hero .page-title { font-size: min(2.8rem, 4.4vw); line-height: 1.55; text-shadow: 0 2px 12px rgba(0,0,0,.5); }
.salon-hero .page-title small { margin-top: 1rem; font-size: .85rem; }
.salon-hero .page-header-en { font-size: .75rem; }
/* トップと同じ放射モチーフ（style.css の .hero-burst を流用）。このページは回転させない
   PC：文字の後ろ（位置・大きさは style.css のまま） */
.salon-hero .hero-burst { z-index: 0; animation: none; }
.salon-hero .container { z-index: 2; }
/* PCでも「つだあゆこ／オンラインサロン」で改行する（h1 の文言はそのまま。既存の <br class="sp"> を PC でも効かせる） */
.salon-hero .page-title br.sp { display: inline; }
.salon-hero .page-title small { color: #e2e2e2; }

@media (max-width: 760px) {
  .salon-hero { display: block; min-height: 0; text-align: center; }
  .salon-hero-photo { position: relative; display: block; width: 100%; }
  .salon-hero-photo img {
    height: auto; aspect-ratio: 4 / 5; object-position: 50% 20%;
    -webkit-mask-image: none; mask-image: none;
  }
  /* 写真の下側（スカート部分）に半透明の黒を重ね、その上に文字を置く */
  .salon-hero-photo::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 45%;
    background: linear-gradient(180deg, transparent, rgba(14,14,14,.75) 45%, #1d1d1d);
  }
  .salon-hero .container { margin-top: -9rem; padding: 0 0 2.4rem; }
  .salon-hero .page-title { font-size: 1.9rem; }
  .salon-hero .page-title small { font-size: .75rem; }
  /* スマホ：人物の頭の後ろに置く。写真の上に lighten で重ね、顔・肌など明るい部分では消えて「人物の裏」に見えるようにする。
     中心（頭）と下半分（上半身・腕）は透明にし、線が人物の後ろから上へ広がって見えるようにする */
  .salon-hero .hero-burst {
    left: 50%; top: 7rem; width: 24rem; height: 24rem; margin-left: 0;
    transform: translate(-50%, -50%);
    z-index: 1; opacity: .7; mix-blend-mode: lighten;
    -webkit-mask-image: radial-gradient(circle, transparent 0 22%, #000 32%), linear-gradient(180deg, #000 45%, transparent 66%);
    -webkit-mask-composite: source-in;
            mask-image: radial-gradient(circle, transparent 0 22%, #000 32%), linear-gradient(180deg, #000 45%, transparent 66%);
            mask-composite: intersect;
  }
  .salon-hero .page-title,
  .salon-hero .page-header-en { max-width: none; }
}
/* タブレット幅：小見出しが写真側へ折り返さないよう少し小さくする */
@media (min-width: 761px) and (max-width: 960px) { .salon-hero .page-title small { font-size: .72rem; } }