@charset "utf-8";

/* ==========================================================================
   toppage.css
   トップページ専用スタイル
   ------------------------------------------------------------------------
   ※1rem = 10px（reset.css の html { font-size: 62.5%; } 前提）
   ========================================================================== */

/* ==========================================================================
   1. メインイメージ
   ========================================================================== */
.p-mainimage {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 60rem;
  margin-bottom: 2.4rem;
  background-image: url("/assets/img/top/img_mainimage.jpg");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}

.p-mainimage__inner {
  width: 100%;
  padding: 0 5%;
  text-align: center;
}

.p-mainimage__logo {
  width: 30rem;
  margin-inline: auto;
  line-height: 1;
}

.p-mainimage__logo img {
  width: 100%;
  filter: drop-shadow(3px 3px 10px #000000);
}

.p-mainimage__catch {
  margin-top: -5.4rem;
  font-size: 3.7rem;
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: 0.1em;
  color: #fff;
  text-shadow: 3px 3px 10px #000000;
}

/* タブレット */
@media screen and (max-width: 1023px) {
  .p-mainimage__catch {
    margin-top: -2.4rem;
  }
}

@media screen and (max-width: 767px) {
  .p-mainimage {
    height: 36.4rem;
  }

  .p-mainimage__logo {
    width: 17rem;
  }

  .p-mainimage__catch {
    margin-top: -3.6rem;
    font-size: 2.3rem;
  }
}

/* ==========================================================================
   2. NEWS
   ========================================================================== */
.p-news {
  padding: 0;
  margin-bottom: 2.4rem;
}

/* 見出しと「一覧」ボタンは上寄せ */
.p-news__inner {
  display: flex;
  align-items: flex-start;
  gap: 6rem;
}

.p-news__head {
  flex-shrink: 0;
}

/* ------------------------------ 一覧 ------------------------------ */
.p-news__list {
  flex: 1 1 auto;
  min-width: 0;
}

.p-news__item + .p-news__item {
  margin-top: 2.4rem;
}

/* 日付と記事タイトルの余白は24px */
.p-news__link {
  display: flex;
  gap: 2.4rem;
  line-height: 1.4;
}

.p-news__date {
  flex-shrink: 0;
}

.p-news__title {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

@media (hover: hover) {
  .p-news__link:hover {
    color: var(--color-main);
  }
}

.p-news__btn {
  flex-shrink: 0;
}

/* -------------------- タブレット（ここから1カラム） -------------------- */
@media screen and (max-width: 1023px) {
  .p-news__inner {
    display: block;
    text-align: center;   /* 見出しとボタンを中央寄せ */
  }

  .p-news__list {
    margin-top: 3.2rem;
    text-align: left;
  }

  .p-news__btn {
    margin-top: 3.2rem;
  }
}

/* ------------------------------ SP ------------------------------ */
@media screen and (max-width: 767px) {
  .p-news__item + .p-news__item {
    margin-top: 2rem;
  }

  /* SPは日付と記事タイトルを縦積み */
  .p-news__link {
    display: block;
    line-height: 1.8;
  }

  .p-news__title {
    display: block;
    white-space: normal;
  }
}

/* ==========================================================================
   3. REASON
   ========================================================================== */
.p-reason {
  padding: 9rem 0 10rem;
  margin-bottom: 7.2rem;
  background-color: var(--color-bg-blue);
}

.p-reason__head {
  margin-bottom: 9rem;   /* 番号バッジがカード上部にはみ出す分を含む */
}

.p-reason__list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2.4rem;
}

.p-reason__card {
  position: relative;
  padding: 4.8rem 3.2rem 4rem;
  background-color: #fff;
  border-radius: 10px;
}

/* 番号バッジ（カード左上に上方向へはみ出す） */
.p-reason__num {
  position: absolute;
  top: -2.6rem;
  left: 3.2rem;   /* カードの padding-left と同じ値＝本文の左端に揃える */
  display: flex;
  align-items: center;
  justify-content: center;
  width: 7.6rem;
  height: 7.6rem;
  border: 1px solid var(--color-main);
  border-radius: 50%;
  background-color: #fff;
  color: var(--color-main);
  font-size: 3rem;
  line-height: 1;
  letter-spacing: 0;
}

.p-reason__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 19.2rem;
}

.p-reason__icon img {
  width: auto;
  height: 100%;
}

.p-reason__title {
  margin-top: 1.2rem;
  color: var(--color-main);
  font-size: 2rem;
  font-weight: 700;
  line-height: 1.6;
  text-align: center;
}

.p-reason__text {
  margin-top: 1.6rem;
}

/* ------------------------------ タブレット ------------------------------ */
@media screen and (max-width: 1023px) {
  .p-reason {
    padding: 7rem 0 8rem;
    margin-bottom: 4rem;
  }

  .p-reason__head {
    margin-bottom: 7rem;
  }

  .p-reason__card {
    padding: 4rem 2.4rem 3.2rem;
  }

  .p-reason__num {
    top: -1.4rem;
    left: 2.4rem;   /* カードの padding-left と同じ値 */
    width: 6rem;
    height: 6rem;
    font-size: 2.4rem;
  }

  .p-reason__icon {
    height: 12rem;
  }

  /* SPも同じ値でよいので、SPブロックには書かずここで両方をまかなう */
  .p-reason__title {
    font-size: 1.8rem;
  }
}

/* ------------------------------ SP ------------------------------ */
@media screen and (max-width: 767px) {
  .p-reason {
    padding: 5rem 0 6rem;
  }

  .p-reason__head {
    margin-bottom: 6rem;
  }

  /* 1カラム。番号バッジのはみ出し分をrow-gapで確保 */
  .p-reason__list {
    grid-template-columns: minmax(0, 1fr);
    gap: 7rem;
  }

  .p-reason__card {
    padding: 3.2rem 2.4rem;
  }

  .p-reason__num {
    width: 5.6rem;
    height: 5.6rem;
  }

  .p-reason__icon {
    height: 13rem;
  }
}

/* ==========================================================================
   4. SERVICE
   ========================================================================== */
/* 次のセクションとの余白はmarginで一本化（padding+marginの合算を避ける） */
.p-service {
  margin-bottom: 7.2rem;
}

.p-service__box {
  padding: 8rem;
  background-color: var(--color-bg-beige);
  border-radius: 10px;
}

.p-service__inner {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 7.2rem;
}

.p-service__img {
  grid-area: 1 / 1 / 3 / 2;
  align-self: start;
  line-height: 1;
}

.p-service__img img {
  width: 100%;
  border-radius: 10px;
}

.p-service__head {
  grid-area: 1 / 2 / 2 / 3;
  align-self: start;
  width: fit-content;
}

.p-service__body {
  grid-area: 2 / 2 / 3 / 3;
  align-self: start;
  padding-top: 2.4rem;
}

.p-service__btn {
  margin-top: 3.2rem;
}

/* ------------------------ タブレット・SP ------------------------ */
@media screen and (max-width: 1023px) {
  .p-service {
    margin-bottom: 4rem;
  }

  /* コンテンツ幅100％・角丸なし */
  .p-service__box {
    width: 100%;
    max-width: 100%;
    padding: 6rem 5%;
    border-radius: 0;
  }

  .p-service__inner {
    display: block;
  }

  .p-service__head {
    display: block;
    width: auto;
    text-align: center;
  }

  .p-service__img {
    margin-top: 3.2rem;
  }

  .p-service__img img {
    border-radius: 0;
  }

  .p-service__body {
    padding-top: 0;
    margin-top: 2.4rem;
  }

  .p-service__btn {
    margin-top: 2.4rem;
    text-align: center;
  }
}

@media screen and (max-width: 767px) {
  .p-service__box {
    padding: 5rem 5%;
  }
}

/* ==========================================================================
   5. WORKS
   ========================================================================== */
.p-works {
  padding: 8rem 0 10rem;
  margin-bottom: 14.4rem;
  background-color: var(--color-bg-blue);
}

.p-works__inner {
  display: flex;
  align-items: flex-start;
}

.p-works__img {
  flex-shrink: 0;
  width: 53rem;
  height: 40rem;
  line-height: 1;
}

.p-works__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 10px;
}

/* 画像に重ねる白カード（残り幅＋重なり分を自動で取る） */
.p-works__body {
  position: relative;
  z-index: 1;
  flex: 1 1 auto;
  min-width: 0;
  margin-top: 7rem;
  margin-left: -9rem;   /* カード幅＝コンテンツ幅970 − 画像530 + 重なり90 = 530px */
  padding: 5.6rem 4.8rem 6rem;
  background-color: #fff;
  border-radius: 10px;
}

.p-works__head {
  margin-bottom: 2.4rem;
}

.p-works__btn {
  margin-top: 3.2rem;
  text-align: center;
}

/* ------------------------------ タブレット ------------------------------ */
@media screen and (max-width: 1023px) {
  .p-works {
    padding: 6rem 0 8rem;
    margin-bottom: 8rem;
  }

  /* タブレットは画像を可変にする（PCの53:40比率を踏襲） */
  .p-works__img {
    width: 48%;
    height: auto;
    aspect-ratio: 53 / 40;
  }

  .p-works__body {
    margin-top: 5rem;
    margin-left: -4%;
    padding: 4rem 3.2rem;
  }
}

/* ------------------------------ SP ------------------------------ */
@media screen and (max-width: 767px) {
  .p-works {
    padding: 4rem 0 6rem;
  }

  /* コンテンツ幅100％。画像を全幅表示し、白カードを下部に重ねる */
  .p-works__inner {
    display: block;
    width: 100%;
    max-width: 100%;
  }

  .p-works__img {
    width: 90%;
    margin-inline: auto;
    aspect-ratio: 16 / 10;
  }

  .p-works__body {
    width: 90%;
    margin: -4rem 0 0 auto;
    padding: 3.2rem 2.4rem 4rem;
    /* 右端が画面に接するので、その2つの角だけ角丸を落とす（左上／右上／右下／左下の順） */
    border-radius: 10px 0 0 10px;
  }
}