/*
Theme Name: Original Theme
Author: e.fujita
Version: 1.0
Description: オリジナルテーマ
*/

/* ===== LP部分 ===== */
/* H1用の設定 */
.visually-hidden{
  position:absolute;
  width:1px;
  height:1px;
  overflow:hidden;
  clip:rect(0 0 1px 1px);
  clip-path:inset(50%);
  white-space:nowrap;
  border:0;
  padding:0;
  margin:-1px;
}

/* サイト全体の背景色を設定 */
body {
/* background-color: #eaf7fd; */
/* background-color: #f6fcff; */        
  background-color: #f9fbfc;         /* ページ全体の背景色 */
  line-height: 1.8;                  /* 行間を広げて読みやすく */
  font-family: 'Noto Sans JP', sans-serif;  /* Google Fontsを適用 */
}

/* フッターの設定 */
footer {
  text-align: center;                /* フッター内のテキストや要素を中央揃えに配置する */
}

/* LP画像とボタンを囲むラッパー設定 */
.img-button-wrapper {
  position: relative;               /* ボタンを絶対配置するための基準にする */
  text-align: center;               /* 画像などの要素を中央揃え */
  max-width: 600px;                 /* LP画像の最大幅 */
  margin: 0 auto;                   /* 中央に配置 */
}

/* LP画像の設定 */
.img-button-wrapper img {
  max-width: 100%;                  /* ラッパーの幅以内で拡大縮小 */
  height: auto;                     /* アスペクト比を維持 */
  display: inline-block;            /* 画像が中央寄せされるように */
}

/* ボタンの配置設定 */
.btn {
  position: absolute;              /* `.img-button-wrapper` を基準に自由配置 */
  transform: translate(-50%, -50%);/* 上下左右中央揃えに使う */
  z-index: 10;                     /* LP画像の上に重ねて表示 */
  width: 90%;                      /* LP画像に対して90%の幅で表示（相対サイズ） */
}

/* ボタン画像のサイズ調整 */
.btn img {
  width: 100%;                     /* `.btn` の幅にフィットさせる */
  height: auto;                    /* 縦横比を維持して縮小 */
  display: block;                  /* 画像の下の余白を防ぐ */
}

/* 購入ボタンの位置 */
.btn1 {
  position: absolute;          /* 親要素（LP画像ラッパー）を基準に絶対配置 */
  top: 92.9%;                  /* 親要素の高さに対する割合で、ボタンの縦位置を指定 */
  left: 50%;                   /* 親要素の横幅の中央位置を基準に配置 */
  transform: translateX(-50%); /* 自身の幅の50%分だけ左に移動して、中央揃えにする */
}

/* 固定購入ボタンの設定 */
.fixed-action-btn {
  position: fixed;             /* 画面に固定配置する（スクロールしても位置が変わらない） */
  bottom: 30px;                /* 画面下から20pxの位置に配置 */
  z-index: 9999;               /* 他の要素よりも最前面に表示 */
  left: 50%;                   /* 画面の中央（X軸方向）に配置するための起点 */
}


/* 固定ボタンの画像設定 */
.fixed-action-btn img {
  display: inline-block;     /* 画像をインラインブロックにして、text-alignの影響を受けるようにする */
  height: auto;              /* 高さを自動調整してアスペクト比を保持 */
}

/* ===== Q&A部分 ===== */
/* Q&A全体ラッパー（LP画像と同じ幅に揃える） */
.lp-content,
.lp-content2 {
  max-width: 600px;                /* LP画像と同じ最大幅に制限 */
  margin: 30px auto;               /* 中央寄せ（上下30pxの余白） */
  padding: 0 15px;                 /* スマホ用に左右に余白を確保 */
}

.lp-content2 {
  padding-bottom: 70px;            /* ボタン高さ＋余白の調整 */
}

/* Q&A見出し */
.lp-content h2 {
  text-align: center;              /* 見出しを中央揃えに配置 */
  font-size: 1.2rem;               /* 見出しの文字サイズ */
  margin-bottom: 20px;             /* 見出し下に余白 */
  font-weight: bold;               /* 見出しを太字に */
}

/* 質問（dt）・回答（dd）の共通設定 */
.qa-item dt,
.qa-item dd {
  margin-bottom: 20px;             /* 各Q&A項目の間隔を確保 */
}

/* 質問・回答ラベル共通 */
.qa-item .label {
  display: inline-block;           /* ラベルとテキストを横並びに */
  width: 28px;                     /* ラベルの横幅 */
  height: 28px;                    /* ラベルの高さ */
  line-height: 28px;               /* 文字を上下中央に配置 */
  text-align: center;              /* 文字を中央揃え */
  border-radius: 50%;              /* 丸型ラベル */
  font-size: 14px;                 /* ラベル文字のサイズ */
  font-weight: bold;               /* ラベル文字を太字に */
  color: #fff;                     /* ラベル文字の色を白に */
  margin-right: 6px;               /* ラベルと本文の間に余白 */
}

/* 質問ラベル（Q） */
.qa-item dt .label {
  background-color: #ff6600;       /* Qラベルの背景色（オレンジ） */
}

/* 回答ラベル（A） */
.qa-item dd .label {
  background-color: #0073aa;       /* Aラベルの背景色（青） */
}

/* 質問文 */
.qa-item dt {
  font-weight: bold;               /* 質問文を太字にして強調 */
}

/* 回答内リンク */
.qa-item dd a {
  white-space: nowrap;             /* リンクを改行させない */
  font-weight: bold;               /* 回答内リンクを太字に */
}


/* ===== 404ページ ===== */
/* 404ページ全体のスタイル */
.error-404 {
  text-align: center;       /* コンテンツを中央寄せに配置 */
  padding: 100px 20px;      /* 上下100px、左右20pxの余白を確保 */
}

/* 404ページの見出し（h1）のスタイル */
.error-404 h1 {
  font-size: 2rem;          /* 見出しの文字サイズを2rem（約32px）に設定 */
  margin-bottom: 20px;      /* 見出しの下に20pxの余白を追加 */
}

/* 404ページ内のリンクボタンのスタイル */
.error-404 a {
  display: inline-block;    /* ボタンのように幅・高さを持たせるためにインラインブロック化 */
  margin-top: 20px;         /* リンクの上に20pxの余白を追加 */
  text-decoration: none;    /* リンクの下線を削除 */
  background: #0073aa;      /* 背景色をWordPress管理画面の青に近い色(#0073aa)に設定 */
  color: #fff;              /* 文字色を白に設定 */
  padding: 10px 20px;       /* ボタン内の上下10px・左右20pxの余白 */
  border-radius: 4px;       /* 角を4pxの半径で丸めてボタンっぽい見た目に */
}


/* ===== レスポンシブ設定 ===== */
/* スマホ用（画面幅768px以下） */
@media screen and (max-width: 767px) {
  /* LP画像の設定 */
  .img-button-wrapper > img {
    width: 100vw;            /* ビューポート幅（画面幅）いっぱいに画像を拡大・縮小して表示 */
    height: auto;            /* アスペクト比（縦横比）を保持したまま高さを自動調整 */
    display: block;          /* ブロック要素として表示（余白をなくし、中央揃え） */
  }
  .lp-content,
  .lp-content2 {
    font-size: 0.8rem;       /* フォントサイズの指定 */
  }
  .lp-content2 {
	padding-bottom: 40px;    /* ボタン高さ＋余白の調整 */
  }
  /* 固定購入ボタンの設定 */
  .fixed-action-btn img {
    max-width: 101%;
  }
}