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

  li{
    list-style: none;
  }

  .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: #fff;
  }

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


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

.footer-buttons {
  position: fixed;
  bottom: 20px;
  right: 20px;
  display: flex;
  align-items: center;
  z-index: 1000;
  width: 100%;
  justify-content: center;
}

.conversion-button {
  margin-right: 0; /* 右側の余白を設定 */
}




/* 実際のユーザーからの声セクションのスタイル */
.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間の余白 */
  background-color: beige;
}

.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: #fff; /* 背景色はお好みで調整してください */
    padding: 20px 0; /* 上下に20pxのパディング */
  }
  
  .features h2 {
    text-align: center;
    color: #000; /* 色はお好みで */
    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(255,255,255,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:#fff; /* 背景色を設定（お好みで変更可能） */
}
  
.intro-section h1 {
    color: #000; /* タイトルの色 */
    margin-bottom: 15px; /* 下の余白 */
}
  
.intro-section p {
    color: #000; /* 段落のテキストの色 */
    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;
}
  


/* カラースタイル */

.white{
  color:#fff;
}

.red{
  color:red;
}

.blue{
  color:blue;
}

.green{
  color:green;
}

.lightgreen{
  color:greenyellow;
}

.yellow{
  color:yellow;
}

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

.brown{
  color:brown;
}

/* テキストデコレーション */
.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);
}
/* クリックボタン */
/* ベース -------------------------- */
.cta-btn{
  display:inline-block;
  padding:1.2rem 2.8rem;          /* クリック領域を十分に */
  background:linear-gradient(135deg,#00d600 0%,#009f00 100%);
  color:#fff;
  font-weight:700;
  font-size:1.1rem;
  text-decoration:none;
  letter-spacing:.15em;
  border-radius:48px;             /* 丸みでやさしい印象に */
  cursor:pointer;
  /* 立体感 */
  box-shadow:
    0 6px   0  rgba(0,0,0,.15),   /* 下に濃い影 */
    0 12px 24px rgba(0,0,0,.20);  /* 広がる影 */

  transition:
    transform .15s ease,
    box-shadow .15s ease;
  position:relative;
}

/* ② 内フチ：ほんのり白っぽい線を重ねる */
.cta-btn::after{
  content:'';
  position: absolute;
  inset: 2px;                  /* 外側から 2px 内側へ縮める */
  border-radius: inherit;      /* 本体と同じ丸みに */
  border: 2px solid rgba(255,255,255,.8); /* 色・太さは好みで */
  pointer-events: none;        /* クリック判定に干渉しない */
}

/* ホバーでフチを少し強調 */
.cta-btn:hover::after{
  border-color: rgba(255,255,255,.9);
}

/* うっすら光るハイライト ---------- */
.cta-btn::before{
  content:'';
  position:absolute;
  inset:0;
  border-radius:inherit;
  background:radial-gradient(circle at 30% 30%,
             rgba(255,255,255,.8) 0%,
             rgba(255,255,255,0) 60%);
  opacity:0;
  transition:opacity .35s;
  pointer-events:none;
}

/* ホバー：ふわっと浮く ------------- */
.cta-btn:hover{
  transform:translateY(-3px);
  box-shadow:
    0 9px   0  rgba(0,0,0,.15),
    0 18px 28px rgba(0,0,0,.25);
}
.cta-btn:hover::before{
  opacity:1;
}

/* クリック：押し込まれる ---------- */
.cta-btn:active{
  transform:none;
  box-shadow:
    0 4px   0  rgba(0,0,0,.15),
    0 8px  16px rgba(0,0,0,.20);
}

/* ★オートアテンション（任意） ----
   一定周期で“呼吸”するアニメーション。
   ページ遷移後 5〜10 秒だけ付与→
   JS で .attention クラスを外すと
   ユーザーの邪魔になりません。
-----------------------------------*/
@keyframes pulse {
  0%   { transform: scale(1); }
  20%  { transform: scale(1.07); }   /* 強い拍 */
  40%  { transform: scale(1); }
  55%  { transform: scale(1.04); }   /* 弱い拍 */
  70%  { transform: scale(1); }
  100% { transform: scale(1); }
}
/* ループ 0.6s → 約100 bpm、0.5s → 約120 bpm */
.cta-btn.attention{
  animation: pulse 0.5s ease-in-out infinite;
}

/* ===== カラーとサイズをまとめて管理 ===== */
:root{
  --accent: #00c300;                     /* ブランド基調色 */
  --card-bg: #ffffff;
  --card-shadow: 0 4px 12px rgba(0,0,0,.08);
  --radius: 16px;
  --gap: clamp(1rem, 4vw, 2rem);         /* 画面幅で自然に伸縮 */
}

/* セクション全体 ---------------------------------- */
.safety{
  padding: var(--gap);
  background: linear-gradient(135deg, #f4fff4 0%, #e9f9e9 100%);
}
.safety-title{
  text-align:center;
  font-size:clamp(1.5rem, 2vw + 1rem, 2.2rem);
  font-weight:800;
  color:var(--accent);
  margin-bottom:var(--gap);
  letter-spacing:.05em;
}

/* リスト (レスポンシブカードレイアウト) ----------- */
.safety-list{
  display:grid;
  gap:var(--gap);
  grid-template-columns:repeat(auto-fit, minmax(260px,1fr));
}
.safety-item{
  background:var(--card-bg);
  border-radius:var(--radius);
  box-shadow:var(--card-shadow);
  padding:clamp(1.2rem, 1.5vw + .5rem, 1.8rem);
  transition:transform .25s, box-shadow .25s;
}

/* ホバーでわずかに浮かせる ------------------------ */
.safety-item:hover{
  transform:translateY(-4px);
  box-shadow:0 6px 18px rgba(0,0,0,.12);
}

/* 見出し＆アイコン -------------------------------- */
.safety-heading{
  display:flex;
  align-items:center;
  gap:.6em;
  font-size:1.1rem;
  font-weight:700;
  margin-bottom:.4em;
  color:#1b1b1b;
  line-height:1.3;
}
.safety-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:2rem;
  height:2rem;
  font-size:1.3rem;
  background:var(--accent);
  color:#fff;
  border-radius:50%;
  flex:0 0 2rem;
  box-shadow:0 2px 4px rgba(0,0,0,.15);
}

/* テキスト ---------------------------------------- */
.safety-text{
  font-size:.95rem;
  line-height:1.7;
  color:#444;
}

/* 利用規約タイトルを安全対策タイトルと統一 */
.terms-title{
  text-align:center;
  font-size:clamp(1.5rem, 2vw + 1rem, 2.2rem);
  font-weight:800;
  color:var(--accent);   /* ← 既存のブランド色変数を活用 */
  margin-bottom:var(--gap);
  letter-spacing:.05em;
}


/* ----- 共通：番号を自前で付けるため bullet を消す ----- */
.list_number,
.list_number2{
  list-style:none;          /* デフォルトの●を非表示 */
  margin:0;
  padding:0;
}

/* ===== 1.2.3. 形式 ================================= */
.list_number{
  counter-reset:num;        /* カウンタ初期化 */
}

.list_number li{
  position:relative;
  padding-left:2.2em;       /* 番号ぶんの余白 */
}
.list_number li::before{
  counter-increment:num;    /* 1 ずつ加算 */
  content:counter(num) ".";
  position:absolute;
  left:0;
  top:0;
  font-weight:bold;
}

/* ===== (1)(2)(3) 形式 ============================== */
.list_number2{
  counter-reset:num2;
}

.list_number2 li{
  position:relative;
  padding-left:2.8em;       /* 括弧ぶん少し広め */
}
.list_number2 li::before{
  counter-increment:num2;
  content:"(" counter(num2) ")";  /* 括弧を追加 */
  position:absolute;
  left:0;
  top:0;
  font-weight:bold;
}

/* ========== Testimonials (レビュー) ========== */
.testimonials{
  padding:var(--gap);
  background:#fff;
}

/* タイトルをブランドカラーで統一 */
.testimonials-title{
  text-align:center;
  font-size:clamp(1.6rem,2vw+1rem,2.3rem);
  font-weight:800;
  color:var(--accent);
  margin-bottom:var(--gap);
}

/* グリッドレイアウト */
.testimonials-grid{
  display:grid;
  gap:var(--gap);
  grid-template-columns:repeat(auto-fit, minmax(280px,1fr));
}

/* カード本体 */
.testimonial{
  display:flex;
  flex-direction:column;
  background:var(--card-bg);
  border-radius:var(--radius);
  box-shadow:var(--card-shadow);
  overflow:hidden;
  transition:transform .25s, box-shadow .25s;
}
.testimonial:hover{
  transform:translateY(-4px);
  box-shadow:0 6px 18px rgba(0,0,0,.12);
}

/* 画像まわり */
.testimonial-image{
  width:100%;
  aspect-ratio:4/3;        /* 高さをそろえる */
  object-fit:cover;
}

/* テキスト */
.testimonial-text{
  padding:1.4rem 1.6rem 1.8rem;
  font-size:.95rem;
  line-height:1.7;
  color:#444;
}
.testimonial-text cite{
  display:block;
  margin-top:1.1rem;
  font-style:normal;
  font-size:.85rem;
  letter-spacing:.04em;
}

/* ========== FEATURES (熟年層に特化…) ========== */
.features{
  padding:var(--gap);
  background:#fff;
}

.features-title{
  text-align:center;
  font-size:clamp(1.6rem,2vw+1rem,2.3rem);
  font-weight:800;
  color:var(--accent);          /* ← ブランドカラー流用 */
  margin-bottom:var(--gap);
}

/* グリッドレイアウト */
.features-grid{
  display:grid;
  gap:var(--gap);
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
}

/* カード共通 */
.feature-item{
  display:flex;
  flex-direction:column;
  background:var(--card-bg);
  border-radius:var(--radius);
  box-shadow:var(--card-shadow);
  overflow:hidden;
  transition:transform .25s, box-shadow .25s;
}
.feature-item:hover{
  transform:translateY(-4px);
  box-shadow:0 6px 18px rgba(0,0,0,.12);
}

/* 画像まわり */
.feature-imgwrap{
  aspect-ratio:4/3;
  overflow:hidden;
}
.feature-image{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .45s ease;
}
.feature-item:hover .feature-image{
  transform:scale(1.08);        /* ふわっとズーム */
}

/* テキスト */
.feature-heading{
  font-size:1.05rem;
  font-weight:700;
  padding:1rem 1.25rem .4rem;
  color:#1b1b1b;
  line-height:1.4;
}
.feature-text{
  flex:1;
  padding:0 1.25rem 1.6rem;
  font-size:.95rem;
  line-height:1.7;
  color:#444;
}

/* スマホ：カードを少し大きめに */
@media (max-width:520px){
  .testimonial-text{font-size:1rem;}
}

@media (max-width:520px){
  /* ▼ 1 列に固定し、アイテムを中央揃え */
  .features-grid{
    grid-template-columns:1fr;
    justify-items:center;      /* 幅を縮めた場合でも中央へ */
  }

  /* ▼ 念のため幅を100%に戻す */
  .feature-item{
    width:100%;                /* 古い 80% を完全に打ち消す */
  }
}




/* ========== FOOTER (画像のレイアウト) ========== */
.site-footer{
  background:#000;              /* ← 背景を黒に */
  color:#fff;
  padding:64px 0 80px;
  text-align:center;
  font-size:clamp(.95rem, 3vw, 1.15rem);
}

/* --- メニュー：縦並び + セパレータ --------- */
.footer-menu ul{
  margin:0 0 48px;              /* メニュー下に余白 */
  padding:0;
  list-style:none;
}

.footer-menu li{
  padding:32px 0;               /* 行間 */
  border-bottom:1px solid rgba(255,255,255,.35);
}

.footer-menu li:first-child{
  border-top:1px solid rgba(255,255,255,.35);
}

.footer-menu a{
  color:#fff;
  text-decoration:none;
  font-weight:700;
  display:block;                /* 全幅クリックエリア */
  transition:opacity .25s;
}
.footer-menu a:hover{opacity:.7;}

/* --- 法令表示など ---------------------------- */
.footer-notes p{
  margin:.5em 0;
  line-height:1.6;
  font-size:.9em;
  letter-spacing:.04em;
}

/* スマホ：文字を少し小さく ------------------- */
@media (max-width:520px){
  .site-footer{font-size:.9rem;}
  .footer-menu li{padding:24px 0;}
}

/* スマホで文字が詰まらないよう微調整 */
@media (max-width:520px){
  .footer-menu ul{gap:1em;}
  .site-footer{padding:32px 0 72px;} /* scrollToTop ボタンとの重なり防止 */
}




/* メディアクエリ */
@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; /* 画像を中央に配置し、上下に余白を追加 */
  }
}