@charset "UTF-8";

/* ==============================
   見出し設定
============================== */

h4 { background: linear-gradient(transparent 70%, #a7d6ff 70%); }



/* ==============================
   ヒーロースライド
============================== */

.hero {
  position: relative;
  height: calc(50vh - 64px);
  overflow: hidden;
}

/* スライド領域 */
.hero-slides {
  position: absolute;
  inset: 0;
}

/* 各スライド */
.slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 2s ease;
}

/* 画像 */
.slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* 表示中 */
.slide.active {
  opacity: 1;
}

/* 黒オーバーレイ */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.4);
  z-index: 1;
}

/* テキスト */
.hero-inner {
  position: absolute;
  bottom: 15%;
  left: 5%;
  z-index: 2;
  color: #fff;
  max-width: 700px;
}

.hero-inner h1 {
  font-size: clamp(24px, 4vw, 42px);
  line-height: 1.4;
  text-shadow: 0 2px 8px rgba(0,0,0,0.6);
  margin-bottom: 10px;
}

.hero-inner p {
  font-size: clamp(14px, 2vw, 18px);
  text-shadow: 0 2px 8px rgba(0,0,0,0.6);
  line-height: 1.6;
}

/* PCでは改行しない */
.sp-break {
  display: none;
}

/* ==============================
   メインコンテンツ
============================== */
main {
  max-width: 1000px;
  margin: 20px auto;
  padding: 20px;
  background: #fff;
  border-radius: 6px;
  box-shadow: 0 0 10px rgba(0,0,0,0.08);
}


/* バナーの設定 */
.banner-container {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  max-width: 1000px;
  margin: 0 auto;
}

.banner {
  flex: 0 0 48%;
  min-width: 280px;
  height: 180px;
  position: relative;
  border-radius: 10px;
  overflow: hidden;
  text-decoration: none;
  transition: background-color 0.25s ease;
  background-size: cover;
  background-position: center;
}

/* 個別画像 */
.banner-1 {
  background-image: url("../images/bn-01.jpg");
}

.banner-2 {
  background-image: url("../images/bn-02.jpg");
}

.banner::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.35);
  transition: background 0.25s ease;
}

.banner:hover::before {
  background: rgba(0,0,0,0.2);
}

.banner-title {
  position: absolute;
  top: 16px;        /* 少し上寄せ */
  left: 16px;       /* 少し左寄せ */
  z-index: 2;
  font-size: 24px;  /* ちょっと大きめ */
  font-weight: 700;
  font-family: 'Arial Black', sans-serif; /* 力強い印象 */
  color: #fff;
  background: rgba(0, 128, 255, 0.85);   /* 半透明で青系のかっこよさ */
  padding: 10px 16px;
  border-radius: 6px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.3); /* 浮かせて立体感 */
  transition: background 0.25s ease, transform 0.25s ease;
}

.banner-text {
  position: absolute;
  bottom: 16px;   /* 下からの距離 */
  right: 16px;    /* 右からの距離 */
  z-index: 1;
  font-size: 16px;
  font-weight: normal;
  color: #fff;
  background: rgba(0, 0, 0, 0.5); /* 半透明の黒背景 */
  padding: 6px 10px;
  border-radius: 4px;
}



/* ======================================
   テキストリンクの装飾
======================================= */
.link-line {
  display: block;
  padding-left: 10px;
  margin: 8px 0;
  border-left: 4px solid #67c5ff;
  color: #0080FF;
  text-decoration: none;
}

.link-line:hover {
  text-decoration: underline;
}



/* ==============================
   長文章の装飾
============================== */
.section-message {
  margin-top: 60px;
  padding-top: 40px;
  border-top: 2px solid #0080ff;
  line-height: 1.9;
}

/* ================================================================
   フェイスブック ページプラグイン
================================================================ */
.fb-wrap {
  max-width: 350px; /* Facebook想定に合わせる */
  width: 100%;
}

/* ================================================================
   スマホ対応
================================================================ */
@media screen and (max-width: 768px) {

  /* ヒーロー */
  .hero {
    height: 32vh;
    max-height: 260px;
   }

  /* テキスト位置（中央寄せ気味に） */
  .hero-inner {
    left: 5%;
    right: 5%;
    bottom: 8%;
    max-width: 100%;
    text-align: left;
  }

  .hero-inner h1 {
    font-size: 20px;
    line-height: 1.4;
    word-break: keep-all;
    overflow-wrap: normal;
  }

  /* サブテキスト */
  .hero-inner p {
    font-size: 13px;
    line-height: 1.6;
  }
  /* スマホだけ改行 */
  .sp-break {
    display: inline;
  }
  
  /* メイン余白 */
  main {
    padding: 15px;
    margin: 10px;
  }

  /* バナー */
  .banner-container {
    gap: 10px;
  }

  .banner {
    flex: 0 0 100%;
    height: 140px;
  }

  .banner-title {
    font-size: 18px;
    padding: 8px 12px;
  }

  .banner-text {
    font-size: 14px;
  }

  .link-line {
    padding: 12px 10px;
    font-size: 15px;
    margin: 10px 0;
  }

  /* フェイスブック ページプラグイン */
    .fb-wrap {
    max-width: 100%;
  }

  /* 見出し調整 */
  h2 {
    font-size: 20px;
  }

  h3 {
    font-size: 18px;
  }

  h5 {
    font-size: 20px;
  }

}