@charset "UTF-8";
/* ==========================================================================
   home.css — index.html 固有セクション
   Hero / About Us / Services / Contact Us / News / Company・SNS
   ========================================================================== */

/* 背景画像を敷くセクションの共通土台（黒オーバーレイを ::before で重ねる） */
.section--overlay { position: relative; isolation: isolate; }
.section--overlay::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: #000;
  opacity: var(--overlay, .3);
}
.section--overlay > .container { position: relative; }

/* --------------------------------------------------------------------------
   1. ヒーロー
   -------------------------------------------------------------------------- */
.top-image-section {
  --overlay: .3;
  padding: 350px 24px;
  background: url("../img/hero/top-head-img.jpg") no-repeat 52% 32% / cover;
  color: #fff;
  text-align: center;
}
.top-image-text { max-width: 960px; margin-inline: auto; }

.top-image-company-name {
  margin: 0;
  font-family: var(--font-display);
  font-size: 80px;
  font-weight: 400;
  font-style: normal;
  line-height: 1.4;
}
.top-image-message {
  margin: 0;
  font-family: var(--font-display);
  font-size: 40px;
  font-style: normal;
  line-height: 1.7;
}

/* --------------------------------------------------------------------------
   2. About Us
   -------------------------------------------------------------------------- */
.top-aboutus-section { padding: 30px 0 60px; }
.top-aboutus-section .container { max-width: var(--container); }

.top-aboutus-section p {
  font-family: "Klee One", cursive; /* 未読込のため実際は cursive フォールバック（base.css の注記を参照） */
  font-weight: 400;
  font-style: normal;
  text-align: center;
}
.top-aboutus-section p + p { margin-top: 1.7em; }
.top-aboutus-section .aboutus-first-message { font-size: 18px; font-weight: bold; }

/* --------------------------------------------------------------------------
   3. Services
   -------------------------------------------------------------------------- */
.top-service-section {
  padding: 80px 20px;
  background: linear-gradient(rgba(99, 233, 242, .52) 0%, rgba(66, 91, 240, .57) 100%);
}
.top-service-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 40px;
  margin-top: 40px;
}
.top-service-block {
  padding: 20px;
  border-radius: 6px;
  color: var(--color-heading);
  text-align: center;
}
.top-service-block__icon {
  font-size: 75px;
  line-height: 1;
  color: var(--color-heading);
}
/* Font Awesome のアイコンに Otter が付けていた余白を殺す */
.top-service-block__icon i { margin: 0; }

.top-service-block__title {
  margin: 24px 0 24px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--color-rule-strong);
  font-size: 24px;
  line-height: 1.4;
}
.top-service-block p { line-height: 1.7; }

/* --------------------------------------------------------------------------
   4. Contact Us
   -------------------------------------------------------------------------- */
.top-contact-section {
  --overlay: .7;
  padding: 48px 24px;
  background: url("../img/hero/top-head-img.jpg") no-repeat 52% 29% / cover;
  color: #fff;
  text-align: center;
}
.top-contact-section .section-title { color: #fff; border-bottom-color: rgba(255, 255, 255, .2); }
.top-contact-section p { margin-bottom: 24px; }

/* --------------------------------------------------------------------------
   5. News
   -------------------------------------------------------------------------- */
.top-news-section { padding: 80px 20px; background: #fff; }

/* --------------------------------------------------------------------------
   6. Company / Follow on SNS
   -------------------------------------------------------------------------- */
.top-companydata-section {
  --overlay: .5;
  padding: 64px 24px;
  background: url("../img/hero/top-company-sns-bg.jpg") no-repeat 50% 50% / cover;
}
.top-companydata-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  max-width: 1140px;
  margin-inline: auto;
}
.top-companydata-box {
  min-height: 360px;
  padding: 50px;
  border-radius: var(--radius-lg);
  background: #fff;
  color: #000;
}
.top-companydata-box .section-title { margin-bottom: 25px; padding: 0; border: 0; }

.top-companydata-detail {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: 8px 24px;
}
.top-companydata-detail dt { padding: 8px 0; font-weight: 400; }
.top-companydata-detail dd { margin: 0; padding: 8px 0; }

.sns-block { display: flex; flex-direction: column; }
.coming-soon {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-bottom: 40px;
  font-size: 24px;
  text-align: center;
}

/* --------------------------------------------------------------------------
   レスポンシブ
   -------------------------------------------------------------------------- */
@media (max-width: 960px) {
  .top-service-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
  .top-companydata-list { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 768px) {
  .top-image-section { padding: 240px 0; }
  .top-image-company-name { font-size: 50px; }
  .top-image-message { font-size: 24px; }

  .top-service-section { padding: 48px 20px; }
  .top-service-list { grid-template-columns: minmax(0, 1fr); }
  .top-service-block { background-color: #ffffffba; }

  .top-news-section { padding: 48px 20px; }

  .top-companydata-box { min-height: 0; padding: 24px; }
  .top-companydata-detail { gap: 4px 16px; }
  .coming-soon { padding: 40px 0; }
}