/* ベーススタイル */
body {
    font-family: 'Arial', sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f4f4f4;
}

  .no-list-style {
    list-style-type: none;
    padding-left: 0;
    margin-left: 0;

  }
  
  .no-list-style li {
    margin-bottom: 10px;
  }
  
  .container {
    width: 95%;
    max-width: 960px;
    margin: 0 auto;
  }

  header, section, footer {
    padding: 20px 0;
    background: beige;
  }

  .headline {
    text-align: center;
    color: #333;
  }

  .button {
    display: block;
    max-width: 600px;
    margin: 20px auto;
    padding: 20px;
    background-color: #00C300;
    color: white;
    text-align: center;
    font-weight: 600;
    text-decoration: none;
    border-radius: 5px;
    letter-spacing: 0.1em;
  /* アニメーション追加 */
  animation: heartbeat 1s infinite;
}

/* トップに戻るボタンのスタイル */
#scrollToTop {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 50px;       /* 幅を設定 */
  height: 50px;      /* 高さを設定 */
  line-height: 50px; /* テキストを垂直中央に配置 */
  text-align: center; /* テキストを水平中央に配置 */
  background-color: #00C300; /* LINEのカラーコード */
  color: white;
  border: none;
  border-radius: 50%; /* 丸い形状にする */
  cursor: pointer;
  display: none; /* デフォルトでは非表示 */
  z-index: 1000; /* 他の要素より上に表示 */
  font-size: 24px; /* アイコンやテキストのサイズ調整 */
}

/* キーフレーム定義 */
@keyframes heartbeat {
  0% {
    transform: scale(1);
  }
  14% {
    transform: scale(1.1);
  }
  28% {
    transform: scale(1);
  }
  42% {
    transform: scale(1.1);
  }
  70% {
    transform: scale(1);
  }
}

/* 実際のユーザーからの声セクションのスタイル */
.testimonials h2 {
    text-align: center; /* タイトルを中央揃えにする */
}
  
.testimonial , .secrets-list{
    max-width: 600px; /* testimonialの最大幅を設定 */
    margin: 0 auto; /* 左右のマージンを自動に設定して中央揃え */
    padding: 15px; /* パディングを追加してレイアウトに余裕を持たせる */
    box-shadow: 0 2px 4px rgba(0,0,0,0.1); /* 軽い影をつけて浮かび上がらせる効果 */
    margin-bottom: 20px; /* testimonialアイテム間のスペースを設定 */
}

/* testimonialsセクションのスタイル */
.testimonial {
  display: flex; /* Flexboxを使用して要素を横に並べる */
  align-items: center; /* 画像とテキストを中央揃えにする */
  margin-bottom: 20px; /* 各testimonial間の余白 */
}

.testimonial-image {
  width: 100px; /* 画像の幅を指定 */
  height: auto; /* 画像の高さを幅に合わせて自動調整 */
  margin-right: 20px; /* 画像とテキスト間の余白 */
}

.testimonial-text {
  flex: 1; /* テキストエリアが残りのスペースを埋めるようにする */
}


.secrets-list h3{
    text-align: center;
}

.safety-list p{
    text-align: left;
}

  /* ヘッダーイメージスタイル */
.header-image {
    width: 100%;
    height: auto; /* 高さを自動調整 */
    display: block; /* ブロックレベル要素として表示 */
    margin-bottom: 20px; /* タイトルテキストとの間隔 */
  }
  
  /* ...他のスタイル... */
/* featuresセクションのスタイル */
.features {
    background: #f9f9f9; /* 背景色はお好みで調整してください */
    padding: 20px 0; /* 上下に20pxのパディング */
  }
  
  .features h2 {
    text-align: center;
    color: #333; /* 色はお好みで */
    margin-bottom: 30px; /* タイトルの下の余白 */
  }
  
  /* Flexboxグリッドスタイル */
  .features-grid {
    display: flex;
    flex-direction: column; /* アイテムを縦に並べる */
    align-items: center; /* アイテムを中央寄せに */
    gap: 30px; /* アイテム間のスペース */
  }
  
.feature-item {
    width: 80%; /* コンテナの80%の幅を使用 */
    background: #fff; /* アイテムの背景色 */
    padding: 20px; /* 内部のパディング */
    border-radius: 8px; /* 角の丸み */
    text-align: center; /* テキストを中央揃えに */
    box-shadow: 0 4px 8px rgba(0,0,0,0.1); /* 影を追加 */
    transition: transform 0.3s ease; /* ホバー時のトランジション効果 */
}
  
.feature-item:hover {
    transform: translateY(-5px); /* ホバー時に少し持ち上がる */
}
  
.feature-image {
    max-width: 100%; /* 画像はコンテナ幅に合わせて最大100% */
    height: auto; /* 画像の高さは自動で調整 */
    margin-bottom: 15px; /* 画像の下の余白 */
}
/* レスポンシブデザインのための追加スタイルは必要ありません。 */

/* intro-sectionセクションのスタイル */
.intro-section .intro-image {
    width: 100%; /* 画像がコンテナの幅に合わせて拡大/縮小される */
    height: auto; /* 画像の高さを自動調整 */
    margin-bottom: 20px; /* 画像とタイトルの間の余白 */
}

.intro-section {
    text-align: center; /* 中央揃えにする */
    padding: 20px; /* 上下左右に20pxのパディング */
    background: #f8f8f8; /* 背景色を設定（お好みで変更可能） */
}
  
.intro-section h1 {
    color: #333; /* タイトルの色 */
    margin-bottom: 15px; /* 下の余白 */
}
  
.intro-section p {
    color: #666; /* 段落のテキストの色 */
    margin-bottom: 10px; /* 下の余白 */
}

/* セクション全体のテキストを中央揃えにする */
.secrets {
    text-align: center;
  }
  
/* セクション内の個々の要素（ブロックレベル）を中央揃えにする */
.secrets .secrets-item {
    margin: 0 auto; /* 左右のマージンを自動で設定して中央に配置 */
    max-width: 600px; /* 必要に応じて最大幅を設定 */
}

/* secretsセクションのスタイル */
.container.secrets {
    text-align: center;
}

/* セーフティーセクションの中央揃えスタイル */
.safety {
    text-align: center; /* テキストを中央揃えにする */
    max-width: 600px; /* 最大横幅を設定 */
  }

.footer-content{
    text-align: center;
}
  


/* カラースタイル */

.red{
  color:red;
}

.blue{
  color:blue;
}

.green{
  color:green;
}

.yellow{
  color:yellow;
}

.pink{
  color:rgb(209, 83, 104);
}

/* テキストデコレーション */
.waveunder{
  text-decoration: wavy underline;
}

.dots {
  -webkit-text-emphasis: filled;
  text-emphasis: filled;
}

/* フォントサイズ */
.textlit{
  font-size: small;
}

.textbig{
  font-size: xx-large;  
}

/* フォント太さ */
.light{
  font-weight: lighter;
}

.bold{
  font-weight: bolder;
}

.checkmark {
  position: relative;
}
.checkmark::after {
  content: '';
  display: block;
  position: absolute;
  top: .3em;
  left: -1.5em;
  width: 25px;
  height: 5px;
  border-left: 2px solid #F00;
  border-bottom: 2px solid #F00;
  transform: rotate(-45deg);
}



/* メディアクエリ */
@media (min-width: 961px) {
  /* パソコン用のスタイル */
  .intro-section .intro-image {
      max-width: 600px; /* 画像の最大幅を600pxに設定 */
      display: block;
      margin: 0 auto; /* 画像を中央揃えに */
  }    
}

@media (min-width: 521px) and (max-width: 960px) {
  /* タブレット用のスタイル */
 /* タブレット向け: アイテムを1列にする */
 .feature-item {
  flex: 0 1 calc(100% - 20px); /* 100%の幅で表示 */
} 
.intro-section .intro-image {
  max-width: 80%; /* 画像の最大幅をコンテナの80%に設定 */
  display: block;
  margin: 20px auto; /* 画像を中央に配置し、上下に余白を追加 */
}  
}

@media (max-width: 520px) {
  /* スマートフォン用のスタイル */
  .container {
    width: 100%;
    padding: 0;
  }
  .headline {
    font-size: 1.5em;
  }
  .intro-section .intro-image {
      max-width: 100%; /* 画像の最大幅をコンテナの100%に設定 */
      display: block;
      margin: 10px auto; /* 画像を中央に配置し、上下に余白を追加 */
  }
}