/* =========================
   pages.css (lower pages common)
   - kanei-chakai specs included
========================= */
@import url('variables.css'); 

.page--program{
    background-color: var(--white);
    color: #333;
}
.page--program h1,
.page--program h2,
.page--program h3{
  color: var(--black);
}
@media screen and (min-width: 481px){
  .page--program .page-section .container{
    max-width: 920px;
  }
}

.page--program .page-section--lead{
    padding-top: 84px;
}

/* 下層見出し */
.under-title__text::before, 
.under-title__text::after {
  background: var(--black);
}

/* 見出し（左の横線） */
.program-heading{
  position: relative;
}
.program-heading + *{
  margin-left: 36px;
}
.program-heading + .page-text{
    max-width: 750px;
}

/*
  横線は「コンテンツ幅(920)の左外側」に出す
  - 画面が広いほど左ガターが増えるので線も伸びる
  - 920px以下では線を0にして消す
*/
.program-heading::before{
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);

  /* コンテンツ左端より外側（画面左ガター分 - 少し余白） */
  width: clamp(0px, calc((100vw - 920px) / 2), 999px);
  height: 1px;
  background: #222;

  /* コンテンツの左外側に出す */
  transform: translate(calc(-1 * clamp(0px, calc((100vw - 920px) / 2 ), 999px)), -50%);
}

.program-title{
    margin: 0;
    font-size: 32px;
    font-weight: 700;
    margin-left: 36px;
    position: relative;
}
/* =========================
   hero(画像)
========================= */
.hero--photo {
    padding: initial;
}
.hero--photo .hero-media {
  height: 504px;
}
@media screen and (max-width: 480px){
  .hero--photo .hero-media {
    height: 228px;
  }
}
/* =========================
   profile-block
========================= */
.profile-block{
  display: grid;
  grid-template-columns: minmax(0, 530px) auto;
  gap: 64px;
  align-items: start;
  justify-content: center;
}

.profile-block__text{
  width: 100%;
  max-width: 530px;
}

.profile-block__title{
  font-size: 32px;
  font-weight: 700;
}

.profile-block__meta{
  margin-top: 24px;
  text-align: right;
}

.profile-block__role,
.profile-block__name{
  font-weight: 500;
}

.profile-block__text .page-text{
  padding-top: 24px;
}

.profile-block__figure{
  margin: 0 auto;
  width: 225px;
  height: 293px;
  overflow: hidden;
  flex-shrink: 0;
}

.profile-block__img{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  transform: scale(1.2); 
}

/* スマホは縦並び */
@media screen and (max-width: 480px){
  .profile-block{
    grid-template-columns: 1fr;
  }
  .profile-block__figure{
    order: -1; /* 画像を上にしたい場合。下にしたいなら消す */
  }
}

/* =========================
   作り手・担い手の視点
========================= */
.makers{
  padding-top: 36px;
}

/* 人物：PCは2カラム */
.makers__grid{
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 10px;
  row-gap: 36px;
}

.person{
  width: 100%;
}
.person__name{
  display: inline-block;
  font-size: 24px;
  font-weight: 500;
  text-decoration: underline;
  transition: opacity .3s ease;
}
.person__name:hover{
  opacity: 0.7;
}

.person__desc{
  margin: 4px 0 0;
  font-size: 18px; 
  font-weight: 500;
}
/* =========================
   書籍バナー
========================= */
.book-banner{
  width: 800px;
  max-width: 100%;
  margin: 0 auto;

  padding: 16px 56px;
  border: 1px solid var(--black);
  color: inherit;

  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  background: var(--white);

  transition: transform .5s ease;
  transform: scale(1);
  will-change: transform;
}
.book-banner:hover{
  transform: scale(1.02);
}
.book-banner__img{
  width: 154px;
  height: 200px;
  object-fit: cover;
  display: block;
}

.book-banner__text{
  font-size: 32px;
  font-weight: 700;
}

/* =========================
   menu
========================= */
.page-menu--program .page-menu-btn  {
  border-color: var(--black);
  transition: background .5s ease, color .5s ease;
}
.page-menu-btn:hover{
  background:var(--black);
  color:var(--white);
}

/* ========== SP：全部縦並び ========== */
@media screen and (max-width: 480px){
  .program-title{
    margin-left: initial;
  }
  .program-heading + *{
    margin-left: initial;
    }

  /* SPは横線なし（＝幅0で消えるので追加指定は任意だが、確実にしたい場合） */
  .program-title::before{
    width: 0;
    transform: translate(0, -50%);
  }

  .makers__grid{
    grid-template-columns: 1fr;
    column-gap: 0;
    row-gap: 24px;
  }

  .person__desc{
    font-size: 16px;
  }

  .book-banner{
    width: 100%;
    padding: 16px;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

}