@charset "utf-8";
body {
  color: #222;
  font-family: "Montserrat", "Noto Sans JP", sans-serif;
}
p {
  letter-spacing: 0.08em;
  line-height: 1.8;
  @media (width <= 600px){
    font-size: 15px;
  }
}
/* ================ ヘッダー ================ */
header {
  padding: 10px 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  @media(width <= 960px) {
    padding: 10px 20px;
  }
  @media(width <= 600px) {
    flex-direction: column;
    gap: 10px;
  }
  .logo {
    display: block;
    img {
      display: block;
      height: 60px;
      @media(width <= 600px) {
        height: 40px;
      }
    }
  }
  nav {
    ul {
      display: flex;
      align-items: center;
      gap: 50px;
      @media(width <= 960px) {
        gap: 24px;
      }
    }

    ul {
      display: flex;
      align-items: center;
      gap: 50px;
      @media(width <= 960px) {
        gap: 24px;
      }
    }

    ul li img {
      height: 25px;
      @media(width <= 960px) {
        gap: 24px;
      }
    }
    
    a {
      font-size: 14px;
      font-weight: 400;
      @media(width <= 600px) {
        font-size: 12px;
      }
      &:hover {
        color: #6A9631;
        text-decoration: underline;
      }
    }
  }
}
/* ================ 共通のヒーローセクションスタイル ================ */
.hero,
.hero-k,
.hero-howto,
.hero-staff,
.hero-event,
.hero-review {
  color: #fff;
  text-align: center;
  height: 640px;
  background-size: cover;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
}

@media (width <= 600px) {
  .hero,
  .hero-k,
  .hero-howto,
  .hero-staff,
  .hero-event,
  .hero-review {
    height: 600px;
  }
}

/* ページごとの背景画像設定 */
.hero { background-image: url(../img/sfh-background.jpg); }
.hero-k { background-image: url(../img/sfhk-background.jpg); }
.hero-howto { background-image: url(../img/sfhe-background.jpg); }
.hero-staff { background-image: url(../img/sfhs-background.jpg); }
.hero-event { background-image: url(../img/sfhsc-background.jpg); }
.hero-review { background-image: url(../img/sfhre-background.jpg); }

@media (width <= 600px) {
  .hero { background-image: url(../img/sfh-background-sp.jpg); }
  .hero-k { background-image: url(../img/sfhk-background-sp.jpg); }
  .hero-howto { background-image: url(../img/sfhe-background-sp.jpg); }
  .hero-staff { background-image: url(../img/sfhs-background-sp.jpg); }
  .hero-event { background-image: url(../img/sfhsc-background-sp.jpg); }
  .hero-review { background-image: url(../img/sfhre-background-sp.jpg); }
}

/* ================ 見出しと段落の共通スタイル ================ */
.hero h2, .hero-k h2, .hero-howto h2, .hero-staff h2, .hero-event h2, .hero-review h2 {
  color: orange;
  text-shadow: 2px 2px 5px rgba(248, 237, 237, 0.925);
  font-size: 48px;
  font-weight: 700;
}

.hero p, .hero-k p, .hero-howto p, .hero-staff p, .hero-event p, .hero-review p {
  color: orange;
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.4);
  font-size: 20px;
  font-weight: 400;
  margin-top: 20px;
}

@media (width <= 600px) {
  .hero h2 br, .hero-k h2 br, .hero-howto h2 br, .hero-staff h2 br, .hero-event h2 br, .hero-review h2 br,
  .hero p br, .hero-k p br, .hero-howto p br, .hero-staff p br, .hero-event p br, .hero-review p br {
    display: block;
  }
  .hero p, .hero-k p, .hero-howto p, .hero-staff p, .hero-event p, .hero-review p {
    font-size: 18px;
  }
}

/* ================ 共通のボタンスタイル ================ */
.hero a,
.hero-k a,
.hero-howto a,
.hero-staff a,
.hero-event a,
.hero-review a {
  display: grid;
  place-items: center;
  width: 60px;
  height: 60px;
  background-color: orange;
  border-radius: 50%;
  box-shadow: 0px 12px 20px rgb(0 0 0 / 0.1);
  position: absolute;
  left: 50%;
  bottom: 0;
  translate: -50% 50%;
}

@media (width <= 600px) {
  .hero a,
  .hero-k a,
  .hero-howto a,
  .hero-staff a,
  .hero-event a,
  .hero-review a {
    width: 50px;
    height: 50px;
  }
}

.hero a img,
.hero-k a img,
.hero-howto a img,
.hero-staff a img,
.hero-event a img,
.hero-review a img {
  width: 24px;
  height: 24px;
}

/* ================ コンテナ ================ */
.container {
  max-width: 1160px;
  margin: 0 auto;
  padding-inline: 40px;
  @media(width <= 600px) {
    padding-inline: 20px;
  }
}
/* ================ メイン ================ */
main {
  /* 共通セクション */
  .main-section {
    padding: 60px 0 8%;
    @media(width <= 600px) {
      padding-block: 60px;
    }
    /* 見出しグループ */
    .heading-group {
      text-align: center;
      margin: 0 0 60px;
      @media(width <= 600px) {
        margin: 0 0 50px;
      }
      h2 {
        color: orange;
        font-size: 40px;
        font-weight: 700;
        @media(width <= 600px) {
          font-size: 32px;
        }
      }
      span {
        color: #222;
        font-size: 14px;
        font-weight: 400;
        letter-spacing: 0.08em;
        display: block;
        margin-top: 10px;
        @media(width <= 600px) {
          font-size: 13px;
        }
      }
      &::after {
        content: "";
        display: block;
        width: 40px;
        height: 4px;
        background-color: orange;
        border-radius: 4px;
        margin: 30px auto 0;
      }
      @media(width <= 600px) {
        &::after {
          width: 30px;
          margin: 20px auto 0;
        }
      }
    }
  }
}
/* ================ インフォメーションおしらせ(index.html） ================ */
.info-container {
  background-color: #F3F1EE;
  max-height: 300px; /* 最大高さを300pxに設定 */
  overflow-y: auto; /* 高さを超えた場合にスクロール */
  padding: 15px 20px;
  border-radius: 10px;
  border: 1px solid #ddd;
}

/* ニュースリスト */
.info-container ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.info-container li {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 15px;
  font-size: 14px;
  background: #fff;
  border-radius: 8px;
  margin-bottom: 10px;
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
}

/* 日付 */
.date {
  font-size: 12px;
  font-weight: bold;
  color: #6A9631;
}

/* リンク */
.info-container a {
  color: #333;
  text-decoration: none;
  font-size: 14px;
  font-weight: bold;
}

.info-container a:hover {
  color: #ff6600;
  text-decoration: underline;
}

/* スマホ用調整 */
@media (width <= 600px) {
  .info-container {
    max-height: 250px;
  }
  .info-container li {
    font-size: 12px;
    padding: 12px;
  }
}


/* ================ サンフラについて(index.html) ================ */
.about {
  @media(width <= 600px) {
    padding-top: 80px;
  }
  .layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: start;
    gap: 60px;
    @media(width <= 960px) {
      grid-template-columns: 1fr;
    }
  }
  .image {
    border-radius: 40px;
    overflow: hidden;
    @media(width <= 960px) {
      border-radius: 30px;
    }
    img {
      width: 100%;
      aspect-ratio: 5 / 4;
      object-fit: cover;
      @media(width <= 960px) {
        aspect-ratio: 5 / 3;
      }
    }
  }
  .text {
    @media(width <= 600px) {
      padding-inline: 20px;
    }
    img {
      height: 60px;
    }
    h3 {
      font-size: 28px;
      font-weight: 700;
      margin-top: 20px;
      @media(width <= 600px) {
        font-size: 24px;
      }
    }
    p {
      margin-top: 20px;
    }
  }
}


/* ================ 企業理念について(katsudou.html) ================ */
.philosophy {
  padding: 80px 0;
  background-color: #F3F1EE;
}

.philosophy-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: start;
  justify-content: center;
  @media (width <= 960px) {
    grid-template-columns: 1fr;
  }
}

.philosophy-card {
  background: #fff;
  padding: 30px;
  border-radius: 12px;
  box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.philosophy-card:hover {
  transform: translateY(-5px);
  box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.15);
}

.philosophy-card h3 {
  font-size: 24px;
  font-weight: 700;
  color: #333;
  margin-bottom: 15px;
}

.philosophy-card p {
  font-size: 16px;
  line-height: 1.8;
  color: #555;
  margin-bottom: 10px;
}

.philosophy-card .highlight {
  color: #E90C94;
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 10px;
}

.philosophy-card img {
  display: block;
  max-width: 150px;
  margin: 0 auto 15px;
}

/* スマホ対応 */
@media (width <= 600px) {
  .philosophy {
    padding: 60px 0;
  }

  .philosophy-grid {
    gap: 30px;
  }

  .philosophy-card {
    padding: 25px;
  }

  .philosophy-card h3 {
    font-size: 22px;
  }

  .philosophy-card p {
    font-size: 15px;
  }

  .philosophy-card img {
    max-width: 120px;
  }
}

/* ================ インフォメーション(katsudo.html) ================ */
.info-section {
  background-color: #f8f8f8;
  padding: 50px 0;
}

/* レイアウト設定 */
.info-grid {
  max-width: 900px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  padding: 0 20px;
}

/* 各カード */
.info-card {
  background: white;
  padding: 20px;
  border-radius: 12px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* ホバー時のアニメーション */
.info-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

/* タイトル */
.info-card h3 {
  font-size: 18px;
  font-weight: bold;
  color: #6A9631;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* テキスト */
.info-card p {
  font-size: 16px;
  color: #333;
  margin-top: 8px;
  line-height: 1.6;
}

/* メールリンク */
.info-card a {
  color: #ff6600;
  text-decoration: none;
}

.info-card a:hover {
  text-decoration: underline;
}

/* レスポンシブ対応（スマホでは1列表示） */
@media (max-width: 768px) {
  .info-grid {
      grid-template-columns: 1fr;
  }
}

/* ================ やれることについて（howto.html） ================ */
.howto {
  @media(width <= 600px) {
    padding-top: 80px;
  }
}

/* PCでは交互配置（画像左→テキスト右、画像右→テキスト左） */
.layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 60px;
  margin: 80px 0; /* 上下の余白 */
  @media(width <= 960px) {
    grid-template-columns: 1fr; /* タブレット以下は1カラム */
    gap: 40px;
    margin: 60px 0;
  }
}

/* PC: 画像左 */
.img-left .image {
  order: -1;
}

/* PC: 画像右 */
.img-right .text {
  order: -1;
}

/* 画像のスタイル */
.image {
  border-radius: 40px;
  overflow: hidden;
  @media(width <= 960px) {
    border-radius: 30px;
  }
  img {
    width: 100%;
    aspect-ratio: 5 / 4;
    object-fit: cover;
    @media(width <= 960px) {
      aspect-ratio: 5 / 3;
    }
  }
}

/* テキストのスタイル */
.text {
  @media(width <= 600px) {
    padding-inline: 20px;
  }
  h3 {
    font-size: 28px;
    font-weight: 700;
    margin-top: 20px;
    @media(width <= 600px) {
      font-size: 24px;
    }
  }
  p {
    margin-top: 20px;
  }
}

/* タブレット・スマホで画像とテキストを交互に並べる */
@media (width <= 960px) {
  .layout {
    grid-template-columns: 1fr; /* すべて1カラム */
  }

  /* すべてのレイアウトで 画像 → テキスト → 画像 → テキストの順番を維持 */
  .layout:nth-child(odd) .image {
    order: -1;
  }
}


/* ================= STAFF紹介セクション ================ */
.staff {
  padding: 80px 0;
  background-color: #F3F1EE;
}

.staff-intro {
  display: flex;
  align-items: center;
  gap: 40px;
  background: #fff;
  padding: 30px;
  border-radius: 12px;
  box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.staff-intro:hover {
  transform: translateY(-5px);
  box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.15);
}

/* 代表の写真 */
.staff-photo {
  width: 180px;
  height: 180px;
  object-fit: cover;
  border-radius: 50%;
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
}

/* 代表の紹介テキスト */
.staff-text h3 {
  font-size: 24px;
  font-weight: 700;
  color: #333;
  margin-bottom: 15px;
}

.staff-text p {
  font-size: 16px;
  line-height: 1.8;
  color: #555;
  margin-bottom: 10px;
}

/* プロフィールカード */
.staff-profile {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-top: 40px;
}

.profile-card {
  background: #fff;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.1);
}

.profile-card h4 {
  font-size: 18px;
  font-weight: 700;
  color: #E90C94;
  margin-bottom: 8px;
}

.profile-card p {
  font-size: 16px;
  color: #333;
}

/* レスポンシブ対応 */
@media (max-width: 960px) {
  .staff-intro {
    flex-direction: column;
    text-align: center;
  }

  .staff-profile {
    grid-template-columns: 1fr;
  }

  .staff-photo {
    width: 140px;
    height: 140px;
  }
}

@media (max-width: 600px) {
  .staff {
    padding: 60px 0;
  }

  .staff-text h3 {
    font-size: 22px;
  }

  .staff-text p {
    font-size: 15px;
  }

  .staff-profile {
    gap: 15px;
  }

  .profile-card {
    padding: 18px;
  }

  .profile-card h4 {
    font-size: 17px;
  }

  .profile-card p {
    font-size: 14px;
  }
}


/* ================ イベントスケジュール (event.html) ================ */

.event {
  @media(width <= 600px) {
    padding-top: 80px;
  }
  .layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: start;
    gap: 60px;
    @media(width <= 960px) {
      grid-template-columns: 1fr;
    }
  }
  .image {
    border-radius: 40px;
    overflow: hidden;
    @media(width <= 960px) {
      border-radius: 30px;
    }
    img {
      width: 100%;
      aspect-ratio: 5 / 4;
      object-fit: cover;
      @media(width <= 960px) {
        aspect-ratio: 5 / 3;
      }
    }
  }

/* 画像コンテナ */
.image {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  transition: transform 0.3s ease, box-shadow 0.3s ease; /* アニメーション */
  box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.5); /* 通常時のシャドウ */
}

/* 画像のホバーエフェクト */
.image:hover {
  transform: translateY(-5px); /* 5px 浮かせる */
  box-shadow: 0px 10px 30px rgba(0, 0, 0, 0.4); /* 影を強調 */
}

  .text {
    @media(width <= 600px) {
      padding-inline: 20px;
    }
    img {
      height: 60px;
    }
    h3 {
      font-size: 28px;
      font-weight: 700;
      margin-top: 20px;
      @media(width <= 600px) {
        font-size: 24px;
      }
    }
    p {
      margin-top: 20px;
    }
  }
}

/* =========================== イベントスケジュール (table レイアウト) =========================== */
.event {
  padding: 80px 0;
  background-color: #F3F1EE;
}

/* スクロール対応のコンテナ */
.event-schedule-container {
  background-color: #FFF;
  max-height: 600px; /* 最大高さを設定 */
  overflow-y: auto; /* 高さを超えた場合にスクロール */
  padding-right: 10px;
}

/* 各イベントカード */
.event-table-container {
  background: #fff;
  padding: 20px;
  border-radius: 12px;
  box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.1);
  margin-bottom: 20px;
}

/* テーブル */
.event-table {
  width: 100%;
  border-collapse: collapse;
}

.event-table th {
  font-weight: bold;
  text-align: left;
  padding: 12px;
  color: #E90C94;
  white-space: nowrap;
  width: 160px;
}

.event-table td {
  padding: 12px;
  color: #333;
  border-bottom: 1px solid #ddd;
}

/* 最終行のボーダーを削除 */
.event-table tr:last-child td {
  border-bottom: none;
}

/* 申し込みボタン */
.btn-register {
  display: inline-block;
  background-color: #E90C94;
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  padding: 12px 20px;
  border-radius: 8px;
  text-align: center;
  text-decoration: none;
  margin-top: 20px;
}

.btn-register:hover {
  background-color: #C80A7A;
}

/* インスタDMメモ */
.insta-note {
  font-size: 14px;
  color: #E90C94;
  margin-top: 10px;
  text-align: center;
}

/* =================== レスポンシブ対応 =================== */
@media (max-width: 768px) {
  .event-table th {
    display: block;
    width: 100%;
    text-align: left;
  }
  .event-table td {
    display: block;
    width: 100%;
  }
}

/* =========================== ぬり絵ダウンロードセクション =========================== */
.coloring {
  padding: 80px 0;
  background-color: #FFF;
  text-align: center;
}

/* セクションタイトル */
.coloring-title {
  font-size: 20px;
  font-weight: bold;
  color: #E90C94;
  margin-bottom: 10px;
}

/* ぬり絵カード */
.coloring-card {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}

.coloring-card img {
  width: 300px;
  max-width: 100%;
  border-radius: 12px;
  box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.4);
}

/* ダウンロードボタン */
.download-button {
  margin-top: 20px;
}

.btn-download {
  display: inline-block;
  background-color: #E90C94;
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  padding: 12px 20px;
  border-radius: 8px;
  text-decoration: none;
}

.btn-download:hover {
  background-color: #C80A7A;
}

/* =================== レスポンシブ対応 =================== */
@media (max-width: 600px) {
  .coloring-card img {
    width: 100%;
    max-width: 280px;
  }
}


/* ================= お客様の声紹介セクション ================ */
.review {
  padding: 80px 0;
  background: linear-gradient(135deg, #fff8e8, #ffe6f2);
}

/* レビューリスト */
.review-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); /* PC/タブレット2列、スマホ1列 */
  gap: 25px;
  margin-top: 40px;
}

/* レビューカード */
.review-card {
  background: #fff;
  padding: 25px;
  border-radius: 20px;
  box-shadow: 0px 5px 15px rgba(255, 183, 213, 0.3);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  position: relative;
  overflow: hidden;
  border: 3px solid #ffc1e3;
}

/* ホバー時のエフェクト */
.review-card:hover {
  transform: translateY(-5px);
  box-shadow: 0px 10px 20px rgba(255, 183, 213, 0.5);
}

/* レビューコンテンツ */
.review-content h4 {
  font-size: 18px;
  font-weight: 700;
  color: #ff6699;
  margin-bottom: 12px;
  font-family: "Comic Sans MS", "Chalkboard SE", cursive;
}

.review-content p {
  font-size: 16px;
  color: #444;
  line-height: 1.6;
  font-family: "Noto Sans JP", sans-serif;
}

/* お住まい情報（リボン風バッジ・右寄せ） */
.customer-badge {
  font-size: 14px;
  font-weight: bold;
  color: #fff;
  background: #ff6699;
  padding: 8px 14px;
  border-radius: 20px 20px 20px 0;
  position: absolute;
  bottom: 10px;
  right: 15px;
  box-shadow: 0px 4px 10px rgba(255, 102, 153, 0.4);
  font-family: "Comic Sans MS", "Chalkboard SE", cursive;
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
  .review-grid {
    grid-template-columns: 1fr; /* スマホでは1列 */
  }

  .review-card {
    padding: 20px;
  }

  .review-content h4 {
    font-size: 17px;
  }

  .review-content p {
    font-size: 14px;
  }

  .customer-badge {
    font-size: 12px;
    padding: 6px 12px;
  }
}








/* ================ ここから下部共通 ================ */

/* ================ メニュー ================ */
.menu {
  background-color: #F3F1EE;
}
.menu-list {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 20px;
  @media (width <= 960px){
    grid-template-columns: 1fr 1fr 1fr;
  }
  @media (width <= 600px){
    grid-template-columns: 1fr 1fr;
    gap: 10px;
  }
}
.menu-card {
  padding: 10px;
  background-color: #fff;
  border-radius: 20px;
  display: grid;
  gap: 5px;
  transition: transform 0.3s ease, box-shadow 0.3s ease; /* 画像浮かせる アニメーション */
  img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: 12px;
  }
  .name {
    font-size: 14px;
    font-weight: 700;
  }
  .price {
    color: orange;
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0;
    text-align: right;
  }
}

/* 画像浮かせる アニメーション */
.menu-card:hover {
  transform: translateY(-5px); /* 5px 浮かせる */
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); /* 影を強くして浮いてる感を出す */
}

/* ================ サンフラ情報 ================ */
.shop {
  .layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: start;
    gap: 40px 60px;
    @media (width <= 960px){
      grid-template-columns: 1fr;
    }
  }
  .text {
    h3 {
      text-align: center;
      font-size: 20px;
      font-weight: 700;
      margin: 0 0 20px;
      display: flex;
      align-items: baseline;
      gap: 1em;
      span {
        font-size: 0.6em;
      }
    }
    dl {
      display: grid;
      grid-template-columns: 100px 1fr;
      @media (width <= 600px){
        grid-template-columns: 80px 1fr;
      }
      dt,dd {
        font-size: 14px;
        padding: 10px;
        border-top: 1px solid #ccc;
      }
      dd img {
        height: 20px;
        margin-right: 10px;
      }
      dd a:hover {
        color: #ff6600;
      }
    }
  }
  .map {
    border-radius: 40px;
    overflow: hidden;
    iframe {
      width: 100%;
      height: auto;
      aspect-ratio: 5 / 4;
    }
  }
}
/* ================ お問い合わせ ================ */
.contact {
  text-align: center;
  background-color: #F3F1EE;
  .layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    margin-top: 60px;
    margin-inline: auto;
    max-width: 700px;
    @media (width <= 960px){
      gap: 60px 20px;
    }
    @media (width <= 600px){
      grid-template-columns: 1fr;
    }
  }
  .description {
    br {
      display: none;
      @media (width <= 600px){
        display: block;
      }
    }
  }
  .label {
    margin-bottom: 20px;
  }
  .number {
    font-size: 30px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0;
    img {
      width: 1em;
    }
  }

  .number:hover{
    color: #ff6600;
  }

  .hour {
    font-size: 13px;
    display: block;
    margin-top: 1em;
  }
  .button {
    display: inline-block;
    color: #fff;
    background-color: orange;
    padding: 1em 2em;
    border-radius: 8px;
  }
}
/* ================ フッター ================ */
footer {
  color: #fff;
  background-color: orange;
  padding: 40px 20px 20px;
  display: grid;
  justify-items: center;
  gap: 40px;
  @media (width <= 600px){
    gap: 40px;
  }
  .logo {
    display: block;
    img {
      display: block;
      height: 60px;
      @media (width <= 600px){
        height: 40px;
      }
    }
  }
  ul {
    display: flex;
    gap: 40px;
    @media (width <= 600px){
      gap: 24px;
    }
    a {
      font-size: 13px;
      @media (width <= 600px){
        font-size: 12px;
      }
    }
  }
  .copyright {
    font-size: 12px;
    @media (width <= 600px){
      font-size: 11px;
    }
  }
}
/* ================ 下層ページ ================ */
.lower-main {
  padding: 80px 0 100px;
  background-color: #F3F1EE;
  @media (width <= 600px){
    padding-block: 50px 80px;
  }
}
.lower-heading-group {
  text-align: center;
  display: grid;
  justify-items: center;
  gap: 20px;
  margin: 0 0 40px;
  h2 {
    font-size: 40px;
    font-weight: 700;
    @media (width <= 600px){
      font-size: 24px;
    }
  }
  p {
    br {
      display: none;
      @media (width <= 600px){
        display: block;
      }
    }
  }
}
/* ================ お問い合わせフォーム ================ */
.form-box {
  max-width: 640px;
  margin: 0 auto;
  border-radius: 20px;
  padding: 60px;
  background-color: #fff;
  box-shadow: 0px 24px 40px rgb(0 0 0 / 0.08);
  @media (width <= 600px){
    padding: 30px;
  }
}
.form-item {
  display: grid;
  gap: 10px;
  label {
    font-size: 14px;
  }
  + .form-item {
    margin-top: 30px;
    @media (width <= 600px){
      margin-top: 20px;
    }
  }
  input,
  textarea {
    border: 1px solid #aaa;
    padding: 0.8em 0.5em;
    border-radius: 8px;
    &::placeholder {
      color: #aaa;
    }
  }
  textarea {
    resize: none;
  }
  button {
    font-size: 16px;
    display: inline-block;
    color: #fff;
    background-color: orange;
    border: none;
    padding: 1em 2em;
    border-radius: 8px;
    &:hover {
      background-color: orange;
    }
  }
}