/* リセットスタイル */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Arial', sans-serif;
    line-height: 1.6;
    color: #333;
    overflow-x: hidden; /* 横スクロールを防ぐ */
}

.container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto; /* 左右の中央揃え */
    padding: 0; /* 左右のパディング */
    box-sizing: border-box; /* パディングを含むボックスサイズ */
}

.content {
    padding: 2em;
    box-sizing: border-box; /* パディングを含むボックスサイズ */
}

.content h2{
    margin-bottom: 20px;
}
button {
    display: block;
    width: 150px;
    margin: 20px auto;
    padding: 10px;
    background-color: #007bff;
    color: #fff;
    border: none;
    border-radius: 4px;
    font-size: 16px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

button:hover {
    background-color: #0056b3;
}

/* QAセクションのスタイル */
.qa-section {
    margin-bottom: 20px; /* セクション間の余白を追加 */
}

.qa-section h3 {
    font-size: 20px; /* 質問のフォントサイズを設定 */
    color: #333; /* 質問のテキストカラーを設定 */
    margin-bottom: 10px; /* 質問と回答の間に余白を追加 */
}

.qa-section p {
    text-align: left;
    font-size: 1.2em; /* 回答のフォントサイズを設定 */
    color: #666; /* 回答のテキストカラーを設定 */
    margin-bottom: 10px; /* 回答の下に余白を追加 */
}

P {
    text-align: left;
    font-size: 1.2em;
}
/* 目次を中央に配置 */
.toc-container {
    text-align: center;
  }

.toc-container h2 {
    font-size: 1.5em;
    font-weight: bold;
    margin-bottom: 20px;
  }
  
  .toc-container .toc {
    display: inline-block;
    text-align: left; /* リスト内の項目を左揃え */
  }  

.toc {
    font-family: Arial, sans-serif;
    margin: 0;
    margin-bottom: 20px;
    padding: 0;
    list-style-type: none;
}

.toc li {
    margin-bottom: 10px;
}

.toc a {
    text-decoration: none;
    text-align: left;
    color: var(--main-text-color);
    padding: 0;
    margin-top: 10px;
    display: block;
}

.toc a:hover {
    text-decoration: underline;
    background-color: var(--hover-bg-color); /* ホバー時の背景色 */
    color: #000; /* ホバー時の文字色 */
}

.toc .toc-level-1 {
    font-size: 1.2em;
    font-weight: bold;
}
 
/* ヒーローセクション */
#hero {
    position: relative;
    text-align: center;
    color: white;
    padding: 0; /* 両端に空白を追加 */
}

#hero img {
    width: 100%;
    height: auto;
    display: block;
    margin: 0 auto; /* 画像を中央揃えに */
}

#goldenage {
    position: relative;
    text-align: center;
    color: white;
    padding: 0; /* 両端に空白を追加 */
}

#goldenage img {
    width: 100%;
    height: auto;
    display: block;
    margin: 0 auto; /* 画像を中央揃えに */
}

#features {
    position: relative;
    text-align: center;
    color: white;
    padding: 0; /* 両端に空白を追加 */
}

#features img {
    width: 100%;
    height: auto;
    display: block;
    margin: 0 auto; /* 画像を中央揃えに */
}

#price {
    position: relative;
    text-align: center;
    color: white;
    padding: 0; /* 両端に空白を追加 */
}

#price img {
    width: 100%;
    height: auto;
    display: block;
    margin: 0 auto; /* 画像を中央揃えに */
}

#anxiety {
    position: relative;
    text-align: center;
    color: white;
    padding: 0; /* 両端に空白を追加 */
}

#anxiety img {
    width: 100%;
    height: auto;
    display: block;
    margin: 0 auto; /* 画像を中央揃えに */
}

#solution {
    position: relative;
    text-align: center;
    color: white;
    padding: 0; /* 両端に空白を追加 */
}

#solution img {
    width: 100%;
    height: auto;
    display: block;
    margin: 0 auto; /* 画像を中央揃えに */
}

#XM {
    position: relative;
    text-align: center;
    color: white;
    padding: 0; /* 両端に空白を追加 */
}

#XM img {
    width: 100%;
    height: auto;
    display: block;
    margin: 0 auto; /* 画像を中央揃えに */
}

#benefits {
    position: relative;
    text-align: center;
    color: white;
    padding: 0; /* 両端に空白を追加 */
}

#benefits img {
    width: 100%;
    height: auto;
    display: block;
    margin: 0 auto; /* 画像を中央揃えに */
}

#QandA {
    position: relative;
    text-align: center;
    color: white;
    padding: 0; /* 両端に空白を追加 */
}

#QandA img {
    width: 100%;
    height: auto;
    display: block;
    margin: 0 auto; /* 画像を中央揃えに */
}

#voices {
    position: relative;
    text-align: center;
    color: white;
    padding: 0; /* 両端に空白を追加 */
}

#voices img {
    width: 100%;
    height: auto;
    display: block;
    margin: 0 auto; /* 画像を中央揃えに */
}
/* 共通セクションスタイル */
section {
    position: relative;
    text-align: center;
    padding: 0px;
}

section img {
    width: 100%;
    max-width: 1200px; /* 最大幅を1200pxに設定 */
    height: auto;
    display: block;
    margin: 0 auto; /* 画像を中央揃えに */
}
 
a {
    display: block;
    margin: 20px auto 0; /* 上に20pxのスペース、左右に自動、下に0のスペースを追加 */
    text-align: center;
  }
  
.red-text {
    text-align: center; /* 中央揃え */
    margin-top: 10px; /* 上部マージンを追加 */
    font-size: 17px; /* フォントサイズを調整 */
    color: red; /* テキストを赤色に設定 */
    font-weight: bold; /* フォントを太字に設定（オプション） */
    line-height: 0.9;
    }
      

  /* ボタンスタイル */
.button {
    display: inline-block;
    font-size: 32px; /* フォントサイズを設定 */
    font-weight: bold; /* 太字に設定 */
    color: #fff; /* テキストカラーを白に設定 */
    background-color: #ff5722; /* ボタンの背景色を設定 */
    padding: 10px 20px; /* パディングを追加 */
    margin-top: 0px;
    text-align: center; /* 中央揃え */
    text-decoration: none; /* 下線を削除 */
    border-radius: 25px; /* 角を丸くする */
    transition: background-color 0.3s ease; /* ホバー時の背景色アニメーションを追加 */
}

.button:hover {
    background-color: #e64a19; /* ホバー時の背景色を変更 */
}

/* Q&Aセクションスタイル */
#qanda {
    margin: 0 0 40px; /* 上下にスペースを追加 */
    text-align: center; /* セクション全体を中央揃えに */
}

#procedure{
    margin-bottom: 40px;
}

#order{
    margin-top: 40px;
    margin-bottom: 40px;
}

  
/* お問い合わせセクション */
#contact {
    padding: 20px 20px 50px;
    text-align: center;
}

#contact h2 {
    margin-bottom: 20px;
}
.disclaimer {
    margin-left: 20px;
}
#acceptDisclaimer {
    width: auto;
    margin-top: 20px;
    margin-bottom: 20px;
    text-align: center;
}

form {
    max-width: 600px;
    margin: 0 auto;
    padding: 20px;
    border: 1px solid #ccc;
    border-radius: 5px;
    background-color: #f9f9f9;
    text-align: left; /* フォーム全体を左揃えに */
}

form label {
    display: block;
    margin-bottom: 10px;
    font-weight: bold;
}

form input {
    width: 100%;
    padding: 10px;
    margin-bottom: 20px;
    border: 1px solid #ccc;
    border-radius: 5px;
}



form textarea {
    width: 100%;
    padding: 10px;
    margin-bottom: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
    height: 150px; /* 高さを設定 */
}

/* 名前の入力欄の幅を狭くするスタイル */
form .narrow-input {
    width: 50%; /* 幅を50%に設定 */
}

form button {
    background-color: #ff5722;
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    display: block; /* ブロック要素に */
    margin: 0 auto; /* 中央揃えに */
    text-align: center;
}

form button:hover {
    background-color: #e64a19;
}

.large-textarea {
    width: 100%;
    height: 150px; /* テキストエリアの高さを設定 */
}

/* フッターセクション */
footer {
    background-color: #333;
    color: white;
    text-align: center;
    padding: 10px;
}

footer p {
    text-align: center;
    color:#fff;
    margin: 0;
}

/* レスポンシブ画像スタイル */
img {
    max-width: 100%;
    height: auto;
}