html {
  scroll-behavior: smooth;
}
    * { box-sizing: border-box; }
		
/* ===== 全体背景 ===== */
body {
      margin: 0;
  background-color: #fffaf7; /* 薄いクリーム色で明るく */
  color: #1f2937; /* 濃いグレーで読みやすく */
  font-family: 'ヒラギノ明朝 ProN', 'Hiragino Mincho ProN', '游明朝体', 'YuMincho';
  line-height: 1.7;
}
@media (min-width: 601px) {
	.sp{	
		display: none;
	}	
}
    img { max-width: 100%; height: auto; display: block; }
    a { color: inherit; text-decoration: none; }

    .container {
      width: 94%;
      max-width: 960px;
      margin: 0 auto;
    }

    header {
      background: linear-gradient(135deg, #111827, #374151);
      color: #fff;
      padding: 18px 0;
      position: sticky;
      top: 0;
      z-index: 10;
    }
    header .brand {
      font-size: 1.1rem;
      font-weight: 600;
    }
    header .brand span {
      font-size: 0.8rem;
      opacity: 0.8;
      margin-left: 8px;
    }
	  
/* ===== Scroll Animation ===== */
.fade-up {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.9s ease, transform 0.9s ease;
}

.fade-up.show {
  opacity: 1;
  transform: translateY(0);
}
	  
@keyframes pulseSoft {
  0% { box-shadow: 0 0 0 0 rgba(249,115,22,0.35); }
  70% { box-shadow: 0 0 0 12px rgba(249,115,22,0); }
  100% { box-shadow: 0 0 0 0 rgba(249,115,22,0); }
}

.btn-primary {
  animation: pulseSoft 4.5s ease-out infinite;
}
	  
@keyframes floatSoft {
  0% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
  100% { transform: translateY(0); }
}

.hero-photo {
  animation: floatSoft 6s ease-in-out infinite;
}

/* ===== HERO ===== */
.hero {
  background: radial-gradient(circle at top, #fff1f8 0%, #e6f7e0 50%, #eaffd0 100%);

	background-size: cover;
  color: #1f2937;
  padding: 40px 0 32px;
  text-align: center;
}

.hero-copy{
	background-color:  rgba(255, 255, 255, 0.5);
	padding: 30px;
}

@media (min-width: 1201px) {
	.hero{	
		background-image: url("../img/top_back2.png");
	}

}

@media (min-width: 601px) and (max-width: 1200px){
		.hero{	
		background-image: url("../img/top_back3.png");
	}
}

@media (max-width: 600px) {
	.hero{	
		background-image: url("../img/top_back4.png");
	}

}
.hero-copy h1,
.hero-copy p {
  color: #1f2937;
}
.hero-tagline {
  color: #ff6f61; /* パステルオレンジで楽しげに */
}

    .hero-inner {
      display: flex;
      flex-direction: column;
      gap: 24px;
      align-items: center;
    }
    .hero-copy h1 {
      font-size: 1.5rem;
      margin: 0 0 10px;
    }
    .hero-copy p {
      font-size: 0.98rem;
      opacity: 0.9;
      margin: 0 0 18px;
    }
    .hero-badges {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 8px;
      margin-bottom: 18px;
    }
/* ボタン */
.btn-primary {
  background: #ff6f61; /* パステルオレンジ */
  color: #fff;
  font-weight: 600;
  box-shadow: 0 8px 20px rgba(255,111,97,0.35);
  border-radius: 999px;
  padding: 12px 30px;
  transition: opacity 0.3s ease;
}
.btn-primary:hover {
  opacity: 0.85;
}

/* バッジ */
.badge {
  background: rgba(255,223,186,0.7); /* パステルオレンジ半透明 */
  border: 1px solid rgba(255,180,120,0.3);
  color: #1f2937;
    padding: 10px;
    border-radius: 20px;
}

    .hero-note {
      margin-top: 10px;
      font-size: 0.8rem;
      opacity: 0.85;
    }

    .hero-photo {
      max-width: 360px;
      border-radius: 16px;
      background: white;
      padding: 14px;
      box-shadow: 0 18px 40px rgba(0,0,0,0.55);
    }
    .hero-photo figcaption {
      font-size: 0.78rem;
      margin-top: 6px;
      opacity: 0.85;
      text-align: left;
    }

/* ===== 各セクション ===== */
section {
  padding: 40px 0;
  background-color: #fffaf7; /* 全体的に淡いクリーム */
	background-image: url("../img/nikukyuu4.png");
	  background-position: center;
	  background-repeat: repeat-x;
}
section:nth-of-type(even) {
  background-color: #ffffff; /* 白ベースでメリハリ */
	background-image: url("../img/nikukyuu2.png");
	background-repeat: no-repeat;
	background-size: contain;
	background-position: center;
	
}

		#custom{
			background-color: #f6f0e3;
		}
/* セクションタイトル・サブタイトル */

    h2.section-title {
  color: #1f2937;
      font-size: 1.5rem;
      margin: 0 0 6px;
      text-align: center;
    }
    .section-subtitle {
      text-align: center;
      font-size: 0.9rem;
      color: #6b7280;
      margin-bottom: 28px;
  color: #6b7280;
    }
    .feature-grid2,
    .feature-grid {
      display: grid;
      grid-template-columns: 1fr;
      gap: 18px;
    }
/* 特長カード・声カード */
.feature-card,
.voice-card,
.order-step-card {
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 8px 20px rgba(0,0,0,0.08);
  padding: 18px 16px;
  color: #1f2937;
}
    .feature-card h3 {
      font-size: 1.05rem;
      margin-top: 0;
      margin-bottom: 6px;
    }
    .feature-card p {
      font-size: 0.9rem;
      margin: 0;
      color: #4b5563;
    }


.two-column {
  display: flex;
  flex-direction: column-reverse; /* デフォルトはスマホ用で文章を下に */
  gap: 24px;
  align-items: center;
}
/* PC表示では横並び */
@media (min-width: 768px) {
  .two-column {
    flex-direction: row; /* 左：文章、右：画像＋ボタン */
    align-items: center;
  }
  .two-column > div:first-child {
    flex: 1; /* 文章 */
    text-align: left;
  }
  .two-column > div:last-child {
    flex: 1; /* 画像＋ボタン */
    text-align: center;
  }
}

    .list-check {
      list-style: none;
      padding: 0;
      margin: 0;
      font-size: 0.9rem;
      color: #374151;
    }
    .list-check li {
      padding-left: 1.4em;
      position: relative;
      margin-bottom: 6px;
    }
    .list-check li::before {
      content: "✔";
      position: absolute;
      left: 0;
      top: 0;
  color: #34d399; /* 明るい緑で爽やか */
      font-size: 0.9rem;
    }
/* テーブル仕様 */

    .spec-table {
      width: 100%;
      font-size: 0.9rem;
  background: #fff1f8; /* 薄いピンク系 */
  border-radius: 12px;
      overflow: hidden;
    }
    .spec-table th,
    .spec-table td {
      padding: 8px 10px;
      border-bottom: 1px solid #e5e7eb;
  background: #ffe4da; /* 明るめオレンジ */
  color: #1f2937;
    }
    .spec-table th {
      width: 30%;
      background: #e5e7eb;
      text-align: left;
      font-weight: 600;
    }
    .spec-table tr:last-child td,
    .spec-table tr:last-child th {
      border-bottom: none;
    }

    .voice-list {
      display: grid;
      grid-template-columns: 1fr;
      gap: 16px;
    }
    .voice-card {
      background: #fff;
      border-radius: 14px;
      padding: 14px;
      box-shadow: 0 8px 18px rgba(15,23,42,0.05);
      font-size: 0.88rem;
    }
    .voice-name {
      font-weight: 600;
      margin-top: 6px;
      font-size: 0.8rem;
      color: #6b7280;
    }
		
/* 価格ボックス */
.price-box {
  background: #ffedd5; /* パステルオレンジ系 */
  color: #1f2937;
  border-radius: 18px;
  padding: 22px 18px;
  text-align: center;
  box-shadow: 0 18px 40px rgba(0,0,0,0.15);
      max-width: 540px;
      margin: 0 auto;
}

    .price-main {
      font-size: 1.4rem;
      margin-bottom: 2px;
    }
    .price-main span {
      font-size: 2rem;
      font-weight: 700;
    }
    .price-note {
      font-size: 0.8rem;
      opacity: 0.85;
      margin-bottom: 12px;
	text-align: left;
    }
    .option-list {
      list-style: none;
      padding: 0;
      margin: 0 0 14px;
      font-size: 0.86rem;
    }
    .option-list li {
      margin-bottom: 4px;
    }

    .cta-bottom {
      text-align: center;
      margin-top: 26px;
    }

    .order-steps {
      list-style: none;
      padding: 0;
      margin: 0;
      font-size: 0.9rem;
    }
    .order-steps li {
      margin-bottom: 8px;
      padding-left: 1.3em;
      position: relative;
    }
    .order-steps li::before {
      content: "①";
      position: absolute;
      left: 0;
      color: #4b5563;
    }
    .order-steps li:nth-child(2)::before { content: "②"; }
    .order-steps li:nth-child(3)::before { content: "③"; }
    .order-steps li:nth-child(4)::before { content: "④"; }

    .faq-item {
      margin-bottom: 14px;
      font-size: 0.9rem;
    }
    .faq-q {
      font-weight: 600;
      margin-bottom: 4px;
    }
    .faq-a {
      color: #4b5563;
    }

		
/* FAQ Accordion */
.faq-q {
  width: 100%;
  text-align: left;
  background: #fff4f2; /* 薄いオレンジ */
  color: #1f2937;
  border: none;
  border-radius: 10px;
  padding: 12px 14px;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.faq-q:hover {
  background: #f3f4f6;
}

.faq-icon {
  font-size: 1.2rem;
  transition: transform 0.3s ease;
}

.faq-item.active .faq-icon {
  transform: rotate(45deg); /* ＋ → × */
}

.faq-a {
  max-height: 0;

  overflow: hidden;
  transition: max-height 0.35s ease, padding 0.35s ease;
  padding: 0 14px;
  font-size: 0.9rem;
  background: #fffaf7;
  color: #1f2937;
}

.faq-item.active .faq-a {
  max-height: 300px;
  padding: 10px 14px 14px;
}  

.a-img{
	max-height:250px; 
	float: left
}

@media (max-width: 768px) {
  .a-img {
    width: 45%;
  }
}

/* フッター */		
		
    footer {
      padding: 22px 0 26px;
      font-size: 0.78rem;
        background-color: #fffcfa; /* 薄いクリーム系 */
  color: #1f2937;
      text-align: center;
    }
.footer-inner {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
}

.footer-company {
  font-weight: 600;
  color: #1f2937;
}

.footer-address {
  font-size: 0.75rem;
  color: #6b7280;
  line-height: 1.6;
  text-align: center;
}

.footer-address a {
  color: #1f2937;
  text-decoration: underline;
}

.footer-copy {
  margin-top: 6px;
  font-size: 0.7rem;
  color: #6b7280;
}

/* PC表示 */
@media (min-width: 768px) {
  .footer-inner {
    gap: 10px;
  }
}
    @media (min-width: 768px) {
      .hero-inner {
        justify-content: space-between;
        align-items: center;
      }
      .hero-copy {
        flex: 1;
        text-align: left;
      }
      .hero-photo {
        flex: 0 0 360px;
      }
      .feature-grid {
        grid-template-columns: repeat(3, 1fr);
      }
      .feature-grid2 {
        grid-template-columns: repeat(2, 1fr);
      }
      .two-column {
        grid-template-columns: 1.1fr 1fr;
      }
      .voice-list {
        grid-template-columns: repeat(3, 1fr);
      }
    }

/* ===== Image Slider ===== */
.slider {
  position: relative;
  max-width: 300px;
  margin: 0 auto;
  overflow: hidden;
  border-radius: 16px;
}

.slides {
  display: flex;
  transition: transform 0.5s ease;
}

.slides img {
  flex-shrink: 0;
  object-fit: contain;
width: 100%;
}

/* 矢印ボタン */
.slide-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0,0,0,0.5);
  color: #fff;
  border: none;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 1.4rem;
  line-height: 1;
}

.slide-btn.prev { left: 0px; }
.slide-btn.next { right: 0px; }

.slide-btn:hover {
  background: rgba(0,0,0,0.7);
}