/* =========================================================
   中ページ共通 (price / coupon / access ・about=access流用)
   header/nav/footer は style.css。各ページCSSは「中身の差分」のみ。
   白背景・ヘッダー色・3カラム枠・タイトル・レスポンシブ・黒バーはここに集約。
   ※profile は独自の詳細レイアウトを持つため self-contained(profile.css)。
   ========================================================= */

.price_page,
.coupon_page,
.access_page{
  display:flex;
  align-items:flex-start;
  width:100%;
  padding:160px calc(var(--navw,480px) + 40px) 80px 0;
}

.pp_title,
.cp_title,
.ac_title{
  flex:0 0 480px;
  padding:232px 0 0 104px;
  display:flex;
  flex-direction:column-reverse;
  align-items:flex-start;
  align-self:flex-start;
  position:sticky;
  top:160px;
}
.pp_title_en,
.cp_title_en,
.ac_title_en{
  margin:0;
  font-family:'Anton',sans-serif;
  font-weight:400;
  font-size:80px;
  letter-spacing:.1em;
  line-height:1;
  color:#000;
  text-transform:uppercase;
}
.pp_title_jp,
.cp_title_jp,
.ac_title_jp{
  margin:0 0 16px;
  font-family:'Zen Kaku Gothic New',sans-serif;
  font-weight:700;
  font-size:24px;
  letter-spacing:.1em;
  line-height:1;
  color:#000;
}

.pp_courses,
.cp_list,
.ac_content{
  flex:0 0 840px;
  margin-inline:auto;
  min-width:0;
}

.cp_bar,
.ac_bar{
  height:64px;
  background:#000;
  display:flex;
  align-items:center;
  justify-content:center;
  font-family:'Zen Kaku Gothic New',sans-serif;
  font-weight:700;
  font-size:24px;
  letter-spacing:0;
  line-height:1;
  color:#fff;
}

@media (max-width:1800px){
  .price_page,
  .coupon_page,
  .access_page{
    align-items:flex-start;
    padding:160px calc(var(--navw) + 40px) 80px 40px;
  }
  .pp_title,
  .cp_title,
  .ac_title{
    flex:0 0 auto;
    padding:0;
    margin-right:40px;
    margin-bottom:40vh;
    align-items:flex-start;
    top:calc(50vh - 60px);
  }
  .pp_courses,
  .cp_list,
  .ac_content{
    flex:1 1 0;
    min-width:0;
    width:auto;
    max-width:none;
    margin:0;
  }
}
@media (max-width:1024px){
  .price_page,
  .coupon_page,
  .access_page{
    flex-direction:column;
    align-items:center;
    padding:160px 40px 80px;
  }
  .pp_title,
  .cp_title,
  .ac_title{
    flex:0 0 auto;
    width:100%;
    margin:0;
    padding:0 0 40px;
    text-align:left;
    position:static;
    align-self:auto;
    align-items:flex-start;
  }
  .pp_courses,
  .cp_list,
  .ac_content{
    flex:0 0 auto;
    width:100%;
    max-width:none;
    margin:0;
  }
}
@media (max-width:768px){
  .price_page,
  .coupon_page,
  .access_page{
    padding:160px 16px 80px;
  }
}