* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.header-hero {
   position: relative;
   height: 400px;
   background: url('../images/main_img.jpg') center center / cover no-repeat;
   display: flex;
   align-items: center;
   justify-content: center;
   color: white;
   text-align: center;
}

.header-hero-trunkroomprice {
   position: relative;
   /*width: 100%;*/
   height: 400px;
   background: url('../images/trunkroom-main.png') center center / cover no-repeat;
   display: flex;
   align-items: center;
   justify-content: center;
   color: white;
   text-align: center;
}

@media (max-width: 768px) {
  .header-hero-trunkroomprice {
    position: relative;
    height: 260px;
    background: url('../images/trunkroom-main.png') center center / cover no-repeat;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    text-align: center;
  }
}

.header-hero-hanakoganei {
   position: relative;
   height: 400px;
   background: url('../images/hanakoganei_building.jpg') center center / cover no-repeat;
   display: flex;
   align-items: center;
   justify-content: center;
   color: white;
   text-align: center;
}

.header-hero-hitotubasigakuen {
   position: relative;
   height: 400px;
   background: url('../images/hitotubasi_building.jpg') center center / cover no-repeat;
   display: flex;
   align-items: center;
   justify-content: center;
   color: white;
   text-align: center;
}

.header-hero-higasikurume {
   position: relative;
   height: 400px;
   background: url('../images/higasikurume_building.jpg') center center / cover no-repeat;
   display: flex;
   align-items: center;
   justify-content: center;
   color: white;
   text-align: center;
}

.header-hero-yazaka {
   position: relative;
   height: 400px;
   background: url('../images/yazaka-building.jpg') center center / cover no-repeat;
   display: flex;
   align-items: center;
   justify-content: center;
   color: white;
   text-align: center;
}

.hero-text {
   background: rgba(0, 0, 0, 0.5); /* 半透明の黒背景で文字を見やすく */
   padding: 20px 30px;
   border-radius: 8px;
}

.hero-text h1 {
   font-size: 2.8em;
   margin: 0 0 10px;
}

.hero-text p {
   font-size: 1.2em;
   margin: 0;
}

#about {
  padding: 60px 20px;
  background-color: #f8f8f8;
}

#about h2 {
  text-align: center;
  font-size: 2em;
  margin-bottom: 40px;
}

/* ヘッダー画像部分 */
.header-image {
  position: relative;
  width: 100%;
  height: 500px;
  overflow: hidden;
}

.header-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}


.section {
  max-width: 1080px; 
  margin: 60px auto; 
  padding: 0 20px;
}


.sunlight-effect {
  display: inline-block;
}

.sunlight-effect::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle at top left, rgba(255,255,255,0.6), transparent 70%);
  mix-blend-mode: screen; /* 光が差しているような合成モード */
  pointer-events: none;
}

/* 下から上にアイテムスムーズに移動処理 */
.fade-up {
  opacity: 0;
  transform: translateY(60px);
  transition: all 0.3s ease-out;
}

/* スクロールで表示されたらクラス追加 */
.fade-up.in-view {
  opacity: 1;
  transform: translateY(0);
}

/* 下から上にアイテムスムーズに移動処理 */

.top-concept__lead,
.top-concept__text {
  max-width: 800px;         /* 読みやすい幅に制限 */
  margin: 0 auto 1.5em;     /* 中央寄せ + 下余白 */
  line-height: 1.8;         /* 行間広めで可読性UP */
  font-size: 1rem;          /* 基本の文字サイズ */
  padding: 0 1rem;          /* スマホで端にくっつかないように */
  text-align: justify;      /* 両端揃えで整った印象に */
}


@media screen and (max-width: 767px) {
  .section {
    max-width: 1080px; 
    margin: 0px auto; 
    padding: 0 0px;
  }

  .top-concept__lead,
  .top-concept__text {
    font-size: 1.125rem;    /* PCでは少し大きめ */
  }
}