@charset "UTF-8";
/* ============================================================
   レッスン Q&A  /  lesson.css
   ------------------------------------------------------------
   ■ 画像パスについて
     url() は「このCSSファイルの位置」が基準です。
       ・CSSと画像が同じ階層       → url("../images/mark02.png?v=2")
       ・CSSが css/ 、画像が1つ上  → url("../mark02.png?v=2")
     .lesson__violin の2行を実際の配置に合わせて直してください。

   ■ ?v=2 はキャッシュ対策。画像を差し替えたら v=3, v=4 … と上げる。

   ■ 設計メモ（重要）
     セレクタの先頭が #lesson なのは意図的です。
     style.css 側に #contents_con p { margin-top:30px; margin-bottom:50px }
     という ID 指定があり、クラスでは詳細度で勝てないためです。
     → HTML 側の <section class="lesson"> に id="lesson" が必須です。

     リセットは :where() で書いています（詳細度ゼロ）。
     既存サイトの指定は打ち消しつつ、下の指定は邪魔しない仕組みです。
   ============================================================ */

/* ===== ここだけ触ればテーマ色が変わります ===== */
#lesson{
  --vf-ink:      #3a3236;  /* 見出しの濃色 */
  --vf-sub:      #000;  /* 本文・補足 */
  --vf-key:      #ef7ac7;  /* キーカラー：アイコン（mark02.png と同色） */
  --vf-key-deep: #c0246f;  /* キーカラーの濃色（小さい文字用） */
  --vf-string:   #f0cfe1;  /* 弦（縦のライン） */
  --vf-hair:     #efdde8;  /* 罫線 */
  --vf-paper:    #ffffff;  /* 背景 */
}
/* ============================================ */

/* ---- 既存サイトの指定を #lesson の中だけ打ち消す（詳細度ゼロ） ---- */
#lesson :where(h1, h2, h3, p, div, span, button, i){
  margin:0;
  padding:0;
  border:0;
  background:none;
  text-indent:0;
  font-weight:400;
  font-style:normal;
  line-height:inherit;
  color:inherit;
  box-sizing:border-box;
}
#lesson :where(h1, h2, h3, p)::before,
#lesson :where(h1, h2, h3, p)::after{content:none}

/* ---- 全体 ---- */
#lesson{
  color:var(--vf-ink);
  background:var(--vf-paper);
  max-width:1200px;
  margin:0 auto;
  padding:0px 24px 0px;
  line-height:1.8;
  box-sizing:border-box;
  -webkit-font-smoothing:antialiased;
}
#lesson .lesson__eyebrow{
  font-size:12px;
  letter-spacing:.34em;
  color:var(--vf-key-deep);
  margin:0 0 10px;
}
#lesson .lesson__title{
  font-size:clamp(24px,4.4vw,32px);
  font-weight:500;
  letter-spacing:.06em;
  line-height:1.4;
  margin:0 0 8px;
}
#lesson .lesson__note{
  font-size:1.0em;
  line-height:1.9;
  color:var(--vf-sub);
  margin:0 0 44px;
}

/* ---- 弦＝リスト全体を貫く1本の縦線 ---- */
#lesson .lesson__list{
  position:relative;
  padding-left:44px;
}
#lesson .lesson__list::before{
  content:"";
  position:absolute;
  left:13px; top:8px; bottom:8px;
  width:1px;
  background:var(--vf-string);
}

#lesson .lesson__item{border-bottom:1px solid var(--vf-hair)}
#lesson .lesson__item:first-child{border-top:1px solid var(--vf-hair)}

/* ---- 質問（開閉ボタン） ---- */
#lesson .lesson__h{font-size:inherit; font-weight:400; margin:0}
#lesson .lesson__btn{
  position:relative;
  display:flex;
  align-items:flex-start;
  gap:16px;
  width:100%;
  padding:20px 0;
  background:none;
  border:0;
  border-radius:0;
  text-align:left;
  cursor:pointer;
  font-family:inherit;
  font-size:inherit;
  line-height:inherit;
  color:inherit;
  -webkit-appearance:none;
  appearance:none;
}
#lesson .lesson__btn:focus-visible{
  outline:2px solid var(--vf-key-deep);
  outline-offset:4px;
}
#lesson .lesson__q{
  flex:1;
  font-size:17px;
  font-weight:500;
  line-height:1.7;
  letter-spacing:.03em;
  color:var(--vf-ink);
}

/* ---- 弦の上に乗るヴァイオリンのポジションマーク ---- */
#lesson .lesson__mark{
  position:absolute;
  left:-44px; top:19px;
  width:27px; height:27px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--vf-paper);
  color:var(--vf-string);
  transition:color .3s ease, transform .3s ease;
}
#lesson .lesson__violin{
  display:block;
  width:24px; height:24px;
  background-color:currentColor;
  -webkit-mask:url("../images/mark02.png?v=2") no-repeat center / contain;
  mask:url("../images/mark02.png?v=2") no-repeat center / contain;
}
#lesson .lesson__btn:hover .lesson__mark{color:var(--vf-sub)}
#lesson .lesson__item.is-open .lesson__mark{
  color:var(--vf-key);
  transform:rotate(-7deg);
}

/* ---- ＋／− ---- */
#lesson .lesson__toggle{
  flex:none;
  position:relative;
  width:13px; height:13px;
  margin-top:8px;
}
#lesson .lesson__toggle::before,
#lesson .lesson__toggle::after{
  content:"";
  position:absolute; left:0; top:6px;
  width:13px; height:1px;
  background:var(--vf-sub);
  transition:transform .3s ease;
}
#lesson .lesson__toggle::after{transform:rotate(90deg)}
#lesson .lesson__item.is-open .lesson__toggle::after{transform:rotate(0)}

/* ---- 回答 ---- */
#lesson .lesson__panel{
  overflow:hidden;
  height:0;
  transition:height .32s cubic-bezier(.4,0,.2,1);
}
#lesson .lesson__inner{padding:0 0 26px}
#lesson .lesson__badge{
  display:inline-block;
  font-size:11px;
  letter-spacing:.12em;
  line-height:1;
  color:var(--vf-key-deep);
  border:1px solid currentColor;
  border-radius:999px;
  padding:5px 11px 5px 13px;
  margin:0 0 14px;
}
#lesson .lesson__a{
  font-size:15px;
  line-height:2.1;
  color:var(--vf-sub);
  letter-spacing:.02em;
  margin:0;
}

/* ---- スマホ ---- */
@media (max-width:600px){
  #lesson{padding:0px 20px 0px}
  #lesson .lesson__list{padding-left:36px}
  #lesson .lesson__list::before{left:10px}
  #lesson .lesson__mark{left:-36px; width:21px; height:21px; top:21px}
  #lesson .lesson__violin{width:19px; height:19px}
  #lesson .lesson__q{font-size:14px}
  #lesson .lesson__a{font-size:14px; line-height:2}
	#lesson .lesson__note{font-size:14px;}
}

@media (prefers-reduced-motion:reduce){
  #lesson *{transition:none !important}
}