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

/* ○共通：page内の文字色は全て白 */
.page{
  color: var(--white);
  line-height: 1.4;
}
.page a{ color: inherit; }

/* container */
.container{
  width: min(1000px, calc(100% - 60px));
  margin: 0 auto;
}

/* =========================
   hero(画像)
========================= */
.hero--photo {
  padding-top: initial;
  padding-bottom: 56px;
}
.hero--photo .hero-media {
  margin: 0;
}
.hero--photo .hero-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
/* =========================
   page-section
========================= */

/* base: padding-top 120 / bottom無し */
.page-section{
  padding-top: 120px;
  padding-bottom: 0;
}
.page-section--first{
    padding-top: 80px;
}
/* lead: PC 64 / SP 48 */
.page-section--lead{
  padding-top: 64px;
}
.page--under .page-section--lead {
  padding-top: initial;
}

/* lead内containerだけ min-width 920（SPでは解除） */
.page-section--lead .container{
  max-width: 920px;
}

.section-title{
  font-size: 26px;
  font-weight: 600;
  margin: 0;
}

/* page-text: padding-top 32 + font指定 */
.page-text{
  padding-top: 32px;
  font-size: 17px;
  line-height: 2;
}
.page-text p{
  margin: 0;
}
.page-text p + p{
  margin-top: 18px;
}

/* CTA（トップ「再現プログラムを作る」と同デザイン扱い） */
.page-cta{
  padding-top: 20px;
  text-align: right;
}

/* 写真クレジット指定 */
.photo-credit{
  font-size: 16px;
  padding-top: 56px;
}

/* =========================
   section-media
========================= */

/* section内の関連画像（縦積み用） */
.section-media{
  margin: 0;
  padding-bottom: 80px;
}

.section-media img{
  width: 100%;
  height: auto;
  display: block;
}
figcaption{
  margin-top: 16px;
}

/* =========================
  collage
========================= */
.collage{
  margin-top: 28px;
  padding-bottom: 80px;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
}

/* 左側：画像2枚を縦配置、2枚目はmarginでずらす（absolute無し） */
.collage-media{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding-right: min(220px, 20.75vw);
}

/* collage-img：PC最大幅550、縮小に応じて可変 */
.collage-img{
  max-width: 550px;
  width: min(550px, 100%);
  margin: 0;
}
.collage-img img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display:block;
}

/* A: PC 550x319 */
.collage-img--a{
  height: 319px;
}

/* B: PC 550x367 + margin指定（absolute無し） */
.collage-img--b{
  height: 367px;
  margin: 56px 0 0 min(200px, 18.86vw);
}

/* 右側ラベル（縦文字画像） */
.collage-label{
  width: 116px;
  margin-right: min(78px, 7.36vw);
}
.collage-label img{
  width: 116px;
  height: auto;
  display:block;
}

/* =========================
   page-menu
========================= */

.page-menu{
  padding-top: 98px;   /* PC */
  padding-bottom: 96px;
  text-align: center;
}

.menu-title__main{
  font-size: 48px;
  font-weight: 700;
  margin: 0;
}

.menu-title__sub{
  font-size: 16px;
  margin-top: 0;
}

.menu-buttons{
  margin-top: 64px; /* PC */
  display:flex;
  justify-content:center;
  gap: min(60px, 5.66vw);
}

.page-menu-btn{
  border: 1px solid #fff;
  width: 280px;
  min-height: 120px;
  padding: 10px;
  display:flex;
  align-items:center;
  justify-content:center;
  min-width: 0;
  white-space: normal;
  overflow-wrap: break-word;
  word-break: break-word;
  font-size: 32px;
  font-weight: 800;
  transition: background-color .5s ease, color .5s ease;
}
.page-menu-btn:hover{
  background:#fff;
  color:#000;
}

.menu-links{
  margin-top: 124px; /* PC */
  display:flex;
  justify-content:center;
  gap: min(84px, 7.92vw);
}

.menu-link{
  font-size: 24px;
  font-weight: 700;
  transition: opacity .5s ease;
}
.menu-link:hover{
  opacity: .8;
}

/* =========================
   PC横並び
========================= */
@media screen and (min-width: 481px){
  .section-split{
    display: grid;
    grid-template-columns: min(500px, 50%) 1fr;
    gap: 36px;
    align-items: center;
  }


  /* 左画像（PC固定サイズ） */
  .section-media--fixed{
    width: min(500px, 100%);
    height: 310px;
    padding-bottom: initial;
  }

  .section-media--fixed img{
    height: 100%;
    object-fit: cover;
  }

  /* 右側本文の横はみ出し防止 */
  .section-body{
    min-width: 0;
  }

}

/* =========================
   下層ページ共通
========================= */
/* ---- タイトル（左右線＋中央） ---- */
.under-title{
  padding-top: 80px;
}

.under-title__text{
  margin: 0;
  text-align: center;
  font-size: 48px;
  font-weight: 700;
  position: relative;
  padding: 0 40px;
}

.under-title__text::before,
.under-title__text::after{
  content: "";
  position: absolute;
  top: 50%;
  width: calc(50% - var(--under-title01));
  height: 1px;
  background: var(--white);
}

.under-title__text::before{ left: -30px; transform: translateY(-50%); }
.under-title__text::after{ right: -30px; transform: translateY(-50%); }
@media screen and  (min-width: 1059px){
  .under-title__text::before,
  .under-title__text::after{
      width: calc(((100vw - 1000px) / 2) + var(--under-title02));
  }
  .under-title__text::before{ left: calc(-1 * ((100vw - 1000px) / 2)); transform: translateY(-50%); }
  .under-title__text::after{ right: calc(-1 * ((100vw - 1000px) / 2)); transform: translateY(-50%); }
}

/* =========================
   SP (<=480)
========================= */

@media screen and (max-width: 480px){
  .hero--photo {
    padding-bottom: initial;
  }
  .container{
    width: calc(100% - 40px);
  }

  .page-section--lead{
    padding-top: 48px; /* SP指定 */
  }

  .page-section--lead .container{
    min-width: auto;  /* SPは解除（横スクロール防止） */
  }
  
  /* collage：SPでも2カラム維持、サイズを指定値へ */
  .collage{
    margin-top: 16px;
    grid-template-columns: auto auto;
    justify-content: center;
  }

  .collage-media{
    padding-right: initial;
  }

  /* A: SP 213x107 */
  .collage-img--a{
    width: min(213px, 100%);
    height: 107px;
  }

  /* B: SP 213x130 + margin指定 */
  .collage-img--b{
    width: min(213px, 100%);
    height: 130px;
    margin: 90px 0 0 0; /* SP指定 */
  }

  .collage-label{
    width: 84px;
    margin: 0px 16px 0px 24px;
  }

  /* page-menu SP */
  .page-menu{
    padding-top: 144px;
    padding-bottom: 96px;
  }

  .menu-title__main{
    font-size: 36px;
  }

  .menu-buttons{
    margin-top: 40px;
    flex-direction: column;
    align-items: center;
    gap: 28px;
  }

  .page-menu-btn{
    width: 280px;
    height: auto;
    padding: 8px 76px 8px;
    font-size: 20px;
  }

  .menu-links{
    margin-top: 40px;
    flex-direction: column;
    align-items: center; /* SP指定：縦並び中央揃え */
    gap: 28px;
  }

  .menu-link{
    font-size: 16px;
  }

  .under-title__text{
    font-size: 40px;
    padding: 0 20px;
  }
  .under-title__text::before{ left: -20px; }
  .under-title__text::after{ right: -20px; }

  /* タイトル左右線を短く */
  .under-title__text::before,
  .under-title__text::after{
    width: 16%;
  }
}