@charset "UTF-8";
/* CSS Document */

/* ========= 教材・稽古ページ：読みやすさ＋品位（最小） ========= */
.breadcrumb{ font-size:14px; margin:10px 0 20px; }
.page-hero .lead{ max-width: 70ch; line-height:1.9; }
.section{ margin: 36px 0; }
.card-grid{ display:grid; gap:18px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.card{ padding:18px; border:1px solid #ddd; border-radius:16px; background:#fff; }
.entry-grid{ display:grid; gap:10px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); padding:0; list-style:none; }
.entry-grid a{ display:block; padding:12px 14px; border:1px solid #ddd; border-radius:14px; text-decoration:none; }
.list{ list-style:none; padding:0; }
.list li{ padding:10px 0; border-bottom:1px solid #eee; }
.list .desc{ display:block; margin-top:6px; opacity:.9; line-height:1.7; }
.list .price{ display:block; margin-top:6px; }
.faq-item{ padding:10px 43; border-bottom:1px solid #eee; }
.request-box{ padding:12px 14px; border:2px double #333; border-radius:16px; margin-top:10px; }
.caution .ng{ margin:0; padding-left:18px; }
.visually-hidden{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(1px,1px,1px,1px); white-space:nowrap; }


#wrapper{
  max-width: 1040px;
  margin: 0 auto;
  padding: 18px 16px 60px;
}

#wrapper .breadcrumb{
  font-size: 13px;
  opacity: .85;
  margin: 8px 0 18px;
}

#wrapper h1{
  font-size: 25px;
  letter-spacing: .02em;
  margin: 8px 0 10px;
}

#wrapper h2{
  font-size: 20px;
  letter-spacing: .02em;
  margin: 4px 0 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(0,0,0,.12);
}

#wrapper h3{
  font-size: 16px;
  margin: 4px 0 10px;
}

#wrapper p{
  line-height: 1.9;
  max-width: 120ch;
}

#wrapper .lead{
  font-size: 15px;
  opacity: .92;
  margin: 8px 0 14px;
}

#wrapper .hero-figure img{
  width: 100%;
  max-width: 860px;
  height: auto;
  border-radius: 16px;
  display: block;
  margin: 10px 0 18px;
}

/* 入口（3つの入口） */
#wrapper .entry-grid{
  list-style: none;
  padding: 0;
  margin: 12px 0 0;
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

#wrapper .entry-grid a{
  display: block;
  padding: 12px 14px;
  border: 1px solid rgba(0,0,0,.12);
  border-radius: 14px;
  text-decoration: none;
}

#wrapper .entry-grid a:hover{
  border-color: rgba(0,0,0,.28);
}

/* カード（教材/稽古の箱） */
#wrapper .card-grid{
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

#wrapper .card{
  padding: 18px 18px 16px;
  border: 1px solid rgba(0,0,0,.12);
  border-radius: 18px;
  background: #fff;
}

#wrapper .card .item{
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid rgba(0,0,0,.08);
}

#wrapper .card img{
  height: auto;
  border-radius: 10px;
  margin-top: 8px;
}

/* リスト（無料/有料の一覧） */
#wrapper .list{
  list-style: none;
  padding: 0;
  margin: 0;
}

#wrapper .list li{
  padding: 12px 0;
  border-bottom: 1px solid rgba(0,0,0,.08);
}

#wrapper .list .desc{
  display: block;
  margin-top: 6px;
  line-height: 1.8;
  opacity: .92;
}

#wrapper .list .price{
  display: block;
  margin-top: 6px;
  opacity: .9;
}

/* FAQ */
#wrapper details.faq-item{
  padding: 10px 0;
  border-bottom: 1px solid rgba(0,0,0,.08);
  padding: 10px 18px; 

}

#wrapper details.faq-item summary{
  cursor: pointer;
  font-weight: 600;
}

#wrapper .request-box{
  margin-top: 10px;
  padding: 12px 14px;
  border: 2px double rgba(0,0,0,.65);
  border-radius: 16px;
}

/* スマホ */
@media (max-width: 767px){
  #wrapper{ padding: 14px 14px 48px; }
  #wrapper h1{ font-size: 24px; }
  #wrapper h2{ font-size: 18px; }
}

.store-page .page-lead{
  max-width: 42em;   /* 約42文字ぶんの横幅。日本語に最適 */
}

.store-page #wrapper{
  max-width: 1040px;
}