html {
  scroll-behavior: smooth;
}

    body {
      margin: 0;
      font-family: "Noto Sans JP", sans-serif;
      background-color: #000;
      color: #fff;
    }

    /* ===== Hero Section ===== */
    .hero {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      min-height: 90vh;
      background: url("images/img-top-main.jpg") center center / cover no-repeat;
      text-align: center;
      overflow: hidden;
    }
    .hero::before {
      content: "";
      position: absolute;
      inset: 0;
      background: rgba(0, 0, 0, 0.4);
    }
    .hero-content {
      position: relative;
      z-index: 1;
      padding: 2rem;
    }
     .hero p {
      font-size: 1.1rem;
      font-weight: 600;
      margin-bottom: 2rem;
    }
    .cta-row {
      display: flex;
      justify-content: center;
      flex-wrap: wrap;
      gap: 1rem;
    }
    .btn {
      display: inline-block;
      padding: 14px 24px;
      border-radius: 999px;
      font-weight: 700;
      text-decoration: none;
      transition: all 0.2s ease;
    }
    .btn--primary {
      background: #0ea5a0;
      background: #4cc602;
      color: #fff;
    }
    .btn--primary:hover {
      opacity: 0.9;
    }
    .btn--outline {
      border: 2px solid #fff;
      color: #fff;
    }
    .btn--outline:hover {
      background: #fff;
      color: #000;
    }
	.orange{
		color:#ffcc33;
	}
    /* ===== サポピー（ロゴ） ===== */
    .sapopee-logo {
      position: absolute;
      top: 24px;
      left: 24px;
      z-index: 10;
    }
    .sapopee-logo img {
      width: 120px;     /* 大きさ調整OK */
      height: auto;
      display: block;
    }
    @media (max-width:600px){
      .sapopee-logo{
        top:16px;
        left:16px;
      }
      .sapopee-logo img{
        width:90px;
      }
    }
  
  /* ===== Hero tel ===== */
.hero-tel {
  position: absolute;
  top: 1em;
  right: 24px;
  z-index: 10;
  color: #fff;
  text-align: right;
  white-space: nowrap;
}

.hero-tel .tel-number {
  font-weight: 700;
  font-size: 24px;
}

.hero-tel .tel-time {
  font-size: 12px;
  opacity: 0.9;
}

/* スマホ調整 */
@media (max-width: 600px) {
  .hero-tel {
    top: 16px;
    right: 16px;
    font-size: 14px;
  }

  .hero-tel .tel-number {
    font-size: 18px;
    display: block;
  }

  .hero-tel .tel-time {
    font-size: 11px;
  }
}
/* 共通の p スタイル */
.hero p {
  font-size: 1.1rem;
  font-weight: 600;
  margin-bottom: 2rem;
}

/* hero lead キャッチコピー（上書きで必ず上にくる） */
.hero-lead {
  font-size: clamp(1.8rem, 4vw, 3rem) !important;
  line-height: 1.5;
  font-weight: 900;
  margin-bottom: 1.2rem;
  color: #99ff66;
}
 .hero-title {
  font-size: clamp(1.0rem, 3vw, 2rem) !important;
  font-weight: 900;
  margin-bottom: 2rem;
  color: #ffffff;
}   
    /* ===== お困りごと Section ===== */
.pagetop-text{
    padding-bottom:3em;
}

#problems{
  background:#f6f8f7;        /* 薄いグレー */
  padding:72px 20px;
  color:#0b0b0c;
}
#problems .container{max-width:1100px;margin:0 auto}
#problems h2{
  font-size:clamp(22px,3.2vw,32px);
  text-align:center;
  margin:0 0 28px;
  font-weight:900;
}
.problems-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:18px 36px;
}
@media (max-width:900px){ .problems-grid{grid-template-columns:1fr} }

.problem-item{
  background:#a7e259;             /* 明るめグリーン */
  color:#143914;                   /* 読みやすい濃緑 */
  padding:18px 22px 18px 50px;
  border-radius:14px;
  position:relative;
  font-weight:700;
  box-shadow:0 6px 20px rgba(0,0,0,.06);
}
.problem-item::before{
  content:"✓";
  position:absolute; left:18px; top:50%; transform:translateY(-50%);
  font-weight:900; font-size:1.1rem; color:#1a6f1a;
}
.problems-note{
  text-align:center; margin-top:26px; font-weight:700;
  color:#3cb950;
}
/* ===== 料金プラン Section ===== */
#pricing{
  background:#76d92e;             /* 鮮やかなグリーン背景 */
  background:#7cca23;             /* 鮮やかなグリーン背景 */
  background:#58aa46;             /* 鮮やかなグリーン背景 */
  padding:80px 20px 100px;
  color:#0b0b0c;
  text-align:center;
}
#pricing .container{max-width:1100px;margin:0 auto}
#pricing h2{
  font-size:clamp(22px,3vw,32px);
  font-weight:900;
  margin-bottom:48px;
  color:#fff;
}
.plan-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:28px;
  justify-content:center;
}
.section-lead{
    margin-bottom:2em;text-align:center;color:#fff;
}
.section-bottom{
    margin:2em;text-align:left;max-width:900px;color:#fff;
}
.section-lead-600{
    font-size:250%; font-weight:600;color:#ffff00;margin:0.5em;
}
@media(max-width:900px){.plan-grid{grid-template-columns:1fr;max-width:500px;margin:auto}}

.plan-card{
  background:#fff;
  border-radius:16px;
  box-shadow:0 10px 25px rgba(0,0,0,.1);
  padding:40px 28px 1em;
  position:relative;
  display:flex;flex-direction:column;align-items:center;
}
.plan-card h3{
  font-size:1.3rem;font-weight:800;margin:0;padding:0;
}
.plan-price{
  font-size:2rem;font-weight:900;color:#2563eb;
  margin:0;padding:0;
}
.plan-desc{
  font-size:.95rem;color:#555;margin:0;padding:0;margin-bottom:20px;
}
.plan-list{
  list-style:none;padding:0;margin:0 0 28px;text-align:left;width:100%;
  height:12em;
}
.plan-list li{
  position:relative;padding-left:28px;margin-bottom:10px;font-weight:600;color:#333;
}
.plan-list li::before{
  content:"✓";position:absolute;left:0;top:0;color:#22c55e;font-weight:900;
}
.plan-btn{
  display:inline-block;background:#e5e7eb;color:#111;
  padding:12px 22px;border-radius:999px;font-weight:700;
  text-decoration:none;transition:.2s;width:90%;
}
.plan-btn:hover{background:#d1d5db}

/* おすすめバッジ */
.plan-card.recommended{
  border:3px solid #3b82f6;
}
.badge{
  position:absolute;top:-14px;right:20px;
  background:#3b82f6;color:#fff;font-size:.8rem;
  font-weight:700;padding:4px 10px;border-radius:999px;
}

/* キャンペーン帯 */
.campaign{
  margin-top:48px;
  background:linear-gradient(90deg,#f97316,#ef4444);
  color:#fff;padding:16px 20px;border-radius:12px;
  font-weight:700;
  display:inline-block;
}
.campaign::before{
  content:"🔥";
  margin-right:6px;
}
.campaign span{
  font-weight:400;
}

/* ===== 単発メニューブロック Section ===== */
/* 単発メニュー全体 */
#spot-menu {
  background: #f7f7f7 !important;
  padding: 60px 0;
  color: #333; /* 文字色リセット */
}

#spot-menu .spot-menu__title {
  text-align: center;
  font-size: 1.8rem;
  margin-bottom: 24px;
}

/* カードの並び */
#spot-menu .spot-menu__cards {
  display: flex;
  gap: 20px;
  max-width: 960px;
  margin: 0 auto;
}

/* カード本体 */
#spot-menu .spot-menu__card {
  flex: 1 1 0;
  background: #ffffff;
  border-radius: 12px;
  padding: 20px 18px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
  border: 1px solid #e3e3e3;
  color: #333;
}

/* カードタイトル */
#spot-menu .spot-menu__card-title {
  font-size: 1.2rem;
  margin-bottom: 12px;
}

/* リスト */
#spot-menu .spot-menu__list {
  list-style: none;
  padding: 0;
  margin: 0;
}

#spot-menu .spot-menu__list li {
  line-height: 1.7;
}

#spot-menu .spot-menu__note {
  font-size: 0.9rem;
  color: #666;
}

/* スマホ対応（縦積み） */
@media screen and (max-width: 768px) {
  #spot-menu .spot-menu__cards {
    flex-direction: column;
  }

  #spot-menu .spot-menu__card {
    margin-bottom: 12px;
  }

  #spot-menu .spot-menu__card:last-child {
    margin-bottom: 0;
  }
}

/* ===== ご利用の流れ Section ===== */
#flow{
  background:#fff;
  padding:80px 20px;
  text-align:center;
  color:#0b0b0c;
}
#flow .container{max-width:1100px;margin:0 auto}
#flow h2{
  font-size:clamp(22px,3vw,32px);
  font-weight:900;
  margin-bottom:60px;
    color:#3cb950;

}
.flow-steps{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:24px;
  align-items:start;
  position:relative;
}
@media(max-width:900px){.flow-steps{grid-template-columns:1fr 1fr;row-gap:40px}}
@media(max-width:600px){.flow-steps{grid-template-columns:1fr}}

.flow-step{
  position:relative;
  padding:0 10px;
}
.flow-step::after{
  content:"→";
  position:absolute;
  top:45px;right:-16px;
  color:#3b82f6;
  font-size:1.4rem;
  font-weight:900;
}
.flow-step:last-child::after{display:none}

.flow-icon{
  width:80px;height:80px;
  background:#3864e3;
  border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  margin:0 auto 16px;
}
.flow-icon img{
  width:38px;height:38px;object-fit:contain;
}
.flow-step h3{
  font-size:.9rem;
  font-weight:700;
  color:#3b82f6;
  margin:0 0 6px;
}
.flow-step h4{
  font-size:1.1rem;
  font-weight:900;
  margin:0 0 8px;
}
.flow-step p{
  font-size:.95rem;
  color:#555;
  margin:0;
  text-align:left;
}
/* ===== 選ばれる理由 Section ===== */
#reason{
  background:#76d92e;             /* 鮮やかなグリーン背景 */
  background:#5eb74b;             /* 鮮やかなグリーン背景 */
  padding:80px 20px 100px;
  color:#0b0b0c;
  text-align:center;
}
#reason .container{max-width:1100px;margin:0 auto}
#reason h2{
  font-size:clamp(22px,3vw,32px);
  font-weight:900;
  margin-bottom:60px;
  color:#fff;
}

/* カードグリッド */
.reason-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:28px;
}
@media(max-width:900px){.reason-grid{grid-template-columns:1fr 1fr;row-gap:32px}}
@media(max-width:600px){.reason-grid{grid-template-columns:1fr}}

/* カード本体 */
.reason-card{
  background:#fff;
  border-radius:18px;
  box-shadow:0 8px 25px rgba(0,0,0,.08);
  overflow:hidden;
  display:flex;
  flex-direction:column;
  text-align:left;
  transition:transform .2s ease, box-shadow .2s ease;
}
.reason-card:hover{
  transform:translateY(-4px);
  box-shadow:0 14px 30px rgba(0,0,0,.12);
}

/* 画像部分 */
.reason-card img{
  width:100%;
  height:200px;
  object-fit:cover;
  display:block;
}

/* 内容部分 */
.reason-body{
  padding:24px 24px 32px;
}
.reason-icon{
  width:36px;height:36px;
  background:#e0edff;
  border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  margin-bottom:10px;
}
.reason-icon img{
  width:18px;height:18px;object-fit:contain;
}
.reason-body h3{
  font-size:1.1rem;font-weight:800;margin:0 0 8px;
}
.reason-body p{
  font-size:.95rem;line-height:1.6;color:#444;margin:0;
}

/* ===== お客様の声 Section ===== */
#voice{
  background:#fff;
  padding:80px 20px 100px;
  color:#0b0b0c;
  text-align:center;
}
#voice .container{max-width:1100px;margin:0 auto}
#voice h2{
  font-size:clamp(22px,3vw,32px);
  font-weight:900;
  margin-bottom:60px;
    color:#3cb950;

}

/* グリッド配置 */
.voice-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:28px;
}
@media(max-width:900px){.voice-grid{grid-template-columns:1fr 1fr;row-gap:32px}}
@media(max-width:600px){.voice-grid{grid-template-columns:1fr}}

/* 吹き出しカード */
.voice-card{
  background:#dce7fa;
  border-radius:16px;
  box-shadow:0 8px 20px rgba(0,0,0,.08);
  padding:32px 28px 24px;
  position:relative;
 display:flex;
  flex-direction:column;
  justify-content:space-between;   /* ← 下揃えのポイント */
  text-align:left;
  min-height:260px;                /* 高さをある程度固定 */
  transition:transform .2s ease, box-shadow .2s ease;
}
.voice-card:hover{
  transform:translateY(-4px);
  box-shadow:0 14px 30px rgba(0,0,0,.12);
}
.voice-card::before{
  content:"“";
  position:absolute;
  top:10px;left:20px;
  font-size:2rem;font-weight:900;
  color:#3b82f6;opacity:.4;
}

/* テキスト部分 */
.voice-text{
  font-size:1rem;
  line-height:1.8;
  color:#333;
  margin-bottom:28px;
  flex:1; /* ← これで上下のバランス維持 */
}

/* 顧客情報部分 */
.voice-user{
  display:flex;
  align-items:center;
  gap:14px;
  margin-top:auto; /* ← 下寄せ */
}

.voice-user img{
  width:48px;height:48px;border-radius:50%;object-fit:cover;
}
.voice-user-name{
  font-weight:800;font-size:.95rem;margin:0;
}
.voice-user-role{
  font-size:.85rem;color:#555;margin:0;
}
/* ===== お問い合わせ Section ===== */
#contact{
  background:#3cb950;           /* 単色グリーン（グラデなし） */
	background-image:url(./images/bg-green.jpg);
	background-size:  100% auto;
	background-position:top center;
	background-repeat:no-repeat;
  padding:100px 20px;
  color:#fff;
  text-align:center;
}
#contact .container{max-width:900px;margin:0 auto}
#contact h2{
  font-size:clamp(22px,3vw,32px);
  font-weight:900;
  margin-bottom:20px;
}
#contact p{
  font-size:1.1rem;
  color:rgba(255,255,255,.9);
  margin-bottom:40px;
}

/* CTAボタン */
.contact-btns{
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:20px;
  margin-bottom:30px;
}
.contact-btn{
  display:flex;
  align-items:center;
  gap:10px;
  padding:18px 28px;
  border-radius:999px;
  font-weight:800;
  font-size:1rem;
  text-decoration:none;
  transition:.2s;
  box-shadow:0 6px 16px rgba(0,0,0,.15);
}
.contact-btn img{
  width:22px;height:22px;object-fit:contain;
}

/* ボタンタイプ */
.contact-btn--light{
  background:#fff;
  color:#1d8231;
}
.contact-btn--light:hover{
  background:#f2f2f2;
}
.contact-btn--dark{
  background:#1d8231;
  background:#eb7502;
  color:#fff;
}
.contact-btn--dark:hover{
  background:#166727;
  background:#fc8f24;
}


/*プロフィール*/
#profile{
  background:#f6f8f7;        /* 薄いグレー */
  padding:72px 20px;
  color:#0b0b0c;
}
#profile .container{max-width:900px;margin:0 auto}

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

/* カード全体 */
.profile-card {
  max-width: 700px;
  margin: 0 auto;
  background: #ffffff;
  border-radius: 12px;
  padding: 30px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.08);
}

/* 本文 */
.profile-body h3 {
  font-size: 1.4rem;
  margin-bottom: 10px;
  font-weight: 600;
  text-align: center;
}

.profile-role {
  text-align: center;
  font-size: 0.95rem;
  color: #666;
  margin-bottom: 20px;
}

/* プロフィール本文テキスト */
.profile-text {
  font-size: 1rem;
  line-height: 1.8;
  margin-bottom: 18px;
  color: #333;
}

/* スマホ調整 */
@media (max-width: 768px) {
  #profile h2 {
    font-size: 1.6rem;
    margin-bottom: 30px;
  }

  .profile-card {
    padding: 20px;
  }

  .profile-body h3 {
    font-size: 1.2rem;
  }

  .profile-text {
    font-size: 0.95rem;
  }
}


/*FAQ*/

#faq{
  background:#85d54a;  
  padding:72px 20px;
  color:#0b0b0c;
}
#faq .container{max-width:900px;margin:0 auto}
/* FAQセクション */

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

/* FAQリスト */
.faq-list {
  max-width: 800px;
  margin: 0 auto;
}

/* 各質問ブロック */
.faq-item {
  background: #fff;
  border-radius: 10px;
  padding: 20px 24px;
  margin-bottom: 16px;
  box-shadow: 0 3px 12px rgba(0,0,0,0.05);
}

/* 質問（Q） */
.faq-q {
  font-size: 1.1rem;
  font-weight: 600;
  margin-bottom: 8px;
  color: #333;
}

/* 回答（A） */
.faq-a {
  font-size: 1rem;
  line-height: 1.8;
  color: #555;
  margin: 0;
}

/* スマホ版 */
@media (max-width: 768px) {
  #faq h2 {
    font-size: 1.6rem;
  }

  .faq-item {
    padding: 18px;
  }

  .faq-q {
    font-size: 1rem;
  }

  .faq-a {
    font-size: 0.95rem;
  }
}



/* フッターテキスト */
.contact-info{
  font-size:.9rem;
  color:rgba(255,255,255,.85);
  display:flex;
  justify-content:center;
  align-items:center;
  gap:10px;
}
.contact-info img{
  width:16px;height:16px;object-fit:contain;
}

/* ===== フッター contact-form ===== */
.contact-form{
  background:#f9fafb;
  padding:80px 20px;
  text-align:center;
}
.contact-form h2{
  font-size:clamp(22px,3vw,32px);
  font-weight:900;
  margin-bottom:20px;
  color:#3cb950;
}
.contact-form p{
  color:#555;
  margin-bottom:40px;
}
/* Googleフォーム埋め込みの見た目 */
.contact-form{background:#f9fafb;padding:80px 20px;text-align:center}
.contact-form .container{max-width:900px;margin:0 auto}
.contact-form h2{font-size:clamp(22px,3vw,32px);font-weight:900;margin-bottom:16px}
.contact-form p{color:#555;margin-bottom:24px}

/* iFrameをレスポンシブに */
.gform-embed iframe{
  width:100% !important;         /* フォーム幅は常に100% */
  max-width:900px;
  height:1900px;                 /* 初期高さ */
  border:0;
  background:#fff;
  border-radius:12px;
  box-shadow:0 8px 24px rgba(0,0,0,.06);
}
@media (max-width:900px){
  .gform-embed iframe{height:1400px}  /* モバイルは少し高めに */
}

/* ===== フッター Section ===== */
#footer{
  background:#1f2a28;       /* ダークグリーン系（#1f2a28） */
  color:#d1d5db;
  padding:80px 20px 30px;
  font-size:.95rem;
}
#footer a{
  color:#d1d5db;
}
#footer .sapopee{
    width:10em;
}
#footer .sapopee img{
    width:100%;
}
#footer .container{max-width:1100px;margin:0 auto}
.footer-top{
  display:grid;
  grid-template-columns:2fr 1fr 1fr;
  gap:40px;
  margin-bottom:40px;
}
@media(max-width:900px){.footer-top{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.footer-top{grid-template-columns:1fr}}

.footer-col h3{
  font-size:1.1rem;
  font-weight:800;
  margin-bottom:12px;
  color:#fff;
}
.footer-col p{
  line-height:1.8;
  margin-bottom:16px;
  color:#cbd5e1;
}
.footer-links{
  list-style:none;padding:0;margin:0;
}
.footer-links li{
  margin-bottom:8px;
}
.footer-links a{
  color:#cbd5e1;
  text-decoration:none;
  transition:.2s;
}
.footer-links a:hover{color:#fff}

/* お問い合わせアイコン付き行 */
.footer-contact{
  list-style:none;padding:0;margin:0;
}
.footer-contact li{
  display:flex;align-items:center;gap:8px;
  margin-bottom:10px;
}
.footer-contact img{
  width:16px;height:16px;object-fit:contain;
  opacity:.8;
}

/* コピーライト */
.footer-bottom{
  border-top:1px solid rgba(255,255,255,.1);
  padding-top:20px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  flex-wrap:wrap;
  color:#9ca3af;
  font-size:.85rem;
}
.footer-bottom span{white-space:nowrap}