:root {
	--main-red: #e60033;
	--accent: #f4b400;
	--gray-bg: #f7f7f7;
	--text: #333;
	--link: #0066cc;
}

* { box-sizing: border-box; }

body {
	margin: 0;
	font-family: -apple-system, BlinkMacSystemFont,
		"ヒラギノ角ゴ ProN", "Yu Gothic", sans-serif;
	color: var(--text);
	line-height: 1.7;
	background: #fff;
}

/* 見出し・強調だけ丸フォント */
.hero-kawaii, h1, h2, h3 {
  font-family: "Baloo 2", "M PLUS Rounded 1c",
               "ヒラギノ角ゴ ProN", "Yu Gothic", sans-serif;
}

img {
	max-width: 100%;
	height: auto;
}

/* 共通レイアウト */

.lp-inner {
	max-width: 1040px;
	margin: 0 auto;
	padding: 0 16px;
}

.lp-section {
	padding: 56px 0;
	background: var(--innerbg-color);
}

.innerbg-white  { --innerbg-color:#fff; }
.innerbg-yellow  { --innerbg-color:#ffde00; }
.innerbg-gray  { --innerbg-color:#edf4f6; }
.innerbg-beige  { --innerbg-color:#fff6e5; }
.innerbg-pink  { --innerbg-color:#fff0f0; }

/* テキストユーティリティ */

.lp-center {
	text-align: center;
}

.lp-h2 {
	font-size: 1.6rem;
	margin: 0 0 16px;
}

.lp-h3 {
	font-size: 1.1rem;
	margin: 0 0 8px;
}

.lp-lead {
	font-size: 1.05rem;
	margin: 8px 0 12px;
}

.lp-lead-small {
	font-size: 0.95rem;
	margin: 4px 0 12px;
}

.lp-note {
	font-size: 0.8rem;
	color: #777;
	margin-top: 8px;
}

.lp-link a,
.lp-link {
	font-size: 0.88rem;
	color: var(--link);
	text-decoration: none;
}

.lp-link a:hover,
.lp-link:hover {
	text-decoration: underline;
}

.txt-em {
	color: var(--main-red);
	font-weight: 700;
}

	/* タイトル＋商品画像をまとめる共通ラッパー */
	.title-with-image {
		position: relative;
		text-align: center;
		margin: 0 auto 24px; 
	}

	/* 右側の画像 */
	.title-image-r {
		position: absolute;
		right: 30%;  /* タイトル枠からどれくらい右に出すか */
		top: 30%;    /* タイトルより少し上に出すか */
		transform: translate(100%, -50%);  /* そこから右に1つぶんズラす */
	}

	.title-image-r img {
		max-width: 150px;      /* 画像サイズをここで統一管理 */
		height: auto;
		transform: rotate(-10deg);
		transform-origin: center bottom;
	}

	/* 左側の画像 */
	.title-image-l {
		position: absolute;
		right: 75%;  /* タイトル枠からどれくらい右に出すか */
		top: 10%;    /* タイトルより少し上に出すか */
		transform: translate(100%, -50%);  /* そこから右に1つぶんズラす */
	}

	.title-image-l img {
		max-width: 150px;      /* 画像サイズをここで統一管理 */
		height: auto;
		transform: rotate(10deg);
		transform-origin: center bottom;
	}

	@media (max-width: 768px) {
	/* 左側の画像 */
		.title-image-l {
			position: absolute;
			right: 110%;  /* タイトル枠からどれくらい右に出すか */
			top: 10%;    /* タイトルより少し上に出すか */
		}
	}

/* ヘッダー */

.lp-header {
	background: #fff;
	border-bottom: 1px solid #eee;
	position: sticky;
	top: 0;
	z-index: 50;
}

.header-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 8px 0;
}

.lp-logo img {
	height: 60px;
}

.lp-header-nav {
	display: flex;
	gap: 16px;
	font-size: 0.9rem;
	padding-right: 10px;
}

.lp-header-link {
	color: #555;
	text-decoration: none;
}

.lp-header-link:hover {
	color: var(--main-red);
}

/* フローティングボタン */

.lp-float-btn {
	position: fixed;
	right: 12px;
	bottom: 16px;
	z-index: 60;
	background: var(--main-red);
	color: #fff;
	text-decoration: none;
	padding: 10px 18px;
	border-radius: 999px;
	font-size: 0.9rem;
	font-weight: 700;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25);
}

/* PC専用表示用のヘルパー */
.wide-only { display: block; }

@media (max-width: 1200px) {
	.wide-only { display: none; }  /* スマホでは非表示 */
}

/* QRブロック本体：lp-float-btnの上に固定表示 */
.lp-float-qr {
	position: fixed;
	right: 16px;
	bottom: 84px;          /* ボタンの高さ＋余白ぶん上にずらす（調整可） */
	z-index: 60;
	background: #ffffff;
	border-radius: 8px;
	padding: 8px 10px 10px;
	box-shadow: 0 4px 12px rgba(0,0,0,0.18);
	text-align: center;
	width:150px;
	font-size:0.8rem;
}

/* ラベル */
.lp-float-qr-label {
	margin: 0 0 4px;
	font-size: 0.8rem;
	font-weight: 700;
	color: #333;
	white-space: nowrap;
}

/* QR画像 */
.lp-float-qr img {
	width: 150px;      /* 任意で調整 */
	height: auto;
	display: block;
}

/* ヒーロー */

.lp-hero {
	background: var(--bg-color);
}
.bg-red  { --bg-color:#ff7582; }
.bg-yellow  { --bg-color:#ffde00; }

.hero-inner {
	display: grid;
	grid-template-columns: 1.2fr 1.2fr;
	gap: 24px;
	align-items: center;
	padding: 32px 0 40px;
}

.hero-label {
	display: inline-block;
	padding: 4px 12px;
	background: #fff;
	border-radius: 999px;
	font-size: 0.9rem;
	color: var(--main-red);
	border: 1px solid #ffd5dd;
}

.hero-title {
	font-size: 1.9rem;
	margin: 12px 0 8px;
	line-height: 1.4;
}

.hero-title span {
	font-size: 1rem;
	display: block;
	margin-top: 4px;
	color: #555;
}

.hero-points {
	margin: 8px 0 14px;
	padding-left: 18px;
	font-size: 0.9rem;
}

.hero-cta {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin: 8px 0;
}

.hero-cta form {
  width: 95%;
}

.hero-note {
	font-size: 0.8rem;
	color: #777;
}

.hero-visual {
	text-align: center;
	position: relative;
}

.hero-badge-img {
	position: absolute;
	bottom: -10px;
	right: 0;
	width: 130px;
}

/* ボタン */

.btn {
	display: inline-block;
	text-decoration: none;
	border-radius: 999px;
	font-weight: 700;
	font-size: 0.95rem;
	margin-left: 10px;
	padding: 10px 20px;
	border: 2px solid transparent;
	text-align: center;
	width: 400px;
}

.btn-primary {
	background: var(--main-red);
	color: #fff;
	border-color: var(--main-red);
}

.btn-primary:hover {
	opacity: 0.9;
}

.badge-limited {
  display: inline-block;
  background: #fff;
  color: #E60033;
  font-size: 0.7rem;
  font-weight: bold;
  padding: 4px 10px;
  border-radius: 4px; /* ← 四角アイコン風 */
  margin-bottom: 10px;
}	

.badge-strong {
  font-size: 0.8rem;   /* ← 限定だけ大きく */
  font-weight: 900;
  margin-left: 2px;
}
.price-row {
  font-size: 0.8rem
  margin-bottom: 6px;
  font-weight:normal;
}

.normal-price span {
  text-decoration: line-through;
  color: #FFD2D3;
  margin-left: 6px;
}

.special-price {
  display: flex;
  align-items: center;
  gap: 6px;
}

.price-wrap {
	display: inline-flex;      /* 価格＋右側ブロックを横並び */
	align-items: center;   /* 中央揃え */
	gap: 8px;                  /* 1,700円との間隔 */
}

.price-big {
  font-size: 3rem;      /* ← 2行分相当の大きさ */
  font-weight: 900;
  color: #fff;      /* ← 縦を詰めて2行分に見せる */
  line-height: 1.0;      /* 縦に間延びしないようにする */
}
.price-unit {
	font-size: 0.8rem;     /* 数字よりかなり小さめ */
	margin-left: 4px;      /* 数字との間隔 */
	line-height: 1;
}

/* 右側：上「送料無料」 下「（税込）」を縦並び */
.price-side {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 2px;                  /* 「送料無料」と「（税込）」の間隔 */
}

.price-label-free {
	display: inline-block;
	padding: 2px 6px;
	background-color: #ffe36b;  /* 黄色背景 */
	color: #000;                /* 黒字 */
	font-size: 0.8rem;
	font-weight: 700;
	border-radius: 4px;
	line-height: 1.2;
}

.price-tax {
  font-size: 0.6rem;
  color: #fff;
}

.price-tax-b {
  font-size: 0.6rem;
  color: #000000;
}

.special-price span {
  margin-left: 6px;
}

.btn-secondary {
	background: #FFF;
	color: var(--main-red);
	border-color: var(--main-red);
}

.btn-secondary:hover {
	background: #ffe6ec;
}

.btn-block {
	display: block;
	width: 100%;
}

.btn-wide {
	min-width: 260px;
}

.priceArea {
  margin-top: 0px;
  font-size: 0.9rem;
  font-weight: bold;
  color: #000000;
}

.priceArea .old {
  text-decoration: line-through;
  color: #888;
  margin-right: 6px;
  font-size: 0.8rem;
}

/* ▼ 購入ボタンをホバー時に指アイコン */
#cartBtn {
  cursor: pointer;
}
#btnP {
  cursor: pointer;
}

/* 特典エリア */

.benefit-top {
	text-align: center;
	margin-bottom: 24px;
}

.benefit-main-label {
	max-width: 520px;
	margin: 0 auto 12px;
}

.benefit-cols {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 24px;
}

.benefit-col {
	background: #fff;
	border-radius: 12px;
	padding: 20px 18px 22px;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.04);
}

.benefit-h2 {
	font-size: 1.2rem;
	margin-bottom: 8px;
}

.benefit-img {
	margin: 8px 0 12px;
}

.lp-list-dot {
	margin: 8px 0;
	padding-left: 18px;
	font-size: 0.9rem;
}

.lp-list-dot li {
	margin-bottom: 4px;
}

.lp-list-inline {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	justify-content: center;
	font-size: 0.88rem;
	margin: 8px 0 4px;
}

.benefit-cta {
	margin-top: 10px;
}

/* クーポンボックス */

.coupon-box {
	margin-top: 32px;
	padding: 20px 18px;
	background: #fff;
	border-radius: 12px;
	text-align: center;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}

.coupon-label {
	max-width: 460px;
	margin: 0 auto 8px;
}

/* 実績エリア */

.result-label-img {
	max-width: 520px;
	margin: 0 auto 8px;
}

/* WEB加入プレゼント詳細 */

.present-grid {
	display: grid;
	grid-template-columns: 1.1fr 1.3fr;
	gap: 24px;
	align-items: center;
}

.present-text p {
	font-size: 0.95rem;
}

/* サンプルセット */

.sample-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 24px;
	margin-top: 16px;
}

.sample-item {
	background: #fff;
	border-radius: 12px;
	padding: 18px 16px 20px;
	box-shadow: 0 4px 10px rgba(0, 0, 0, 0.04);
}

.sample-label {
	display: inline-block;
	padding: 2px 10px;
	font-size: 0.78rem;
	background: #eee;
	border-radius: 999px;
	margin-bottom: 8px;
}

.sample-img {
	margin: 6px 0 10px;
}

/* POINT 01〜06 */

.lp-points {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 18px;
	margin-top: 20px;
}

.lp-point {
	background: #fff;
	border-radius: 10px;
	padding: 14px 12px 16px;
	font-size: 0.9rem;
}

.lp-point-num {
	font-size: 0.8rem;
	font-weight: 700;
	color: #999;
	margin-bottom: 4px;
}

.lp-point-title {
	font-size: 1rem;
	margin: 0 0 6px;
}

.lp-point-img {
	margin-top: 8px;
}

/* ご利用者の声 */

.lp-voices {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 18px;
	margin-top: 16px;
}

.lp-voice {
	background: #fff;
	border-radius: 12px;
	padding: 14px 12px 16px;
	font-size: 0.88rem;
}

.lp-voice-img {
	margin-bottom: 8px;
}

/* Q&A */

.lp-qa dl {
	margin: 0;
}

.lp-qa-item {
	background: #fff;
	border-radius: 10px;
	padding: 10px 12px 12px;
	margin-bottom: 10px;
}

.lp-qa-item dt {
	font-weight: 700;
	font-size: 0.95rem;
	margin-bottom: 4px;
}

.lp-qa-item dd {
	margin: 0;
	font-size: 0.9rem;
}

/* 最終CTA */

.cta-btns {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 12px;
	margin: 12px 0;
}

/* フッター */

.lp-footer {
	background: #111827;
	color: #9ca3af;
	font-size: 0.78rem;
	padding: 18px 0 24px;
}

.lp-footer-logo img {
	height: 32px;
}

.lp-footer-links {
	list-style: none;
	padding: 0;
	margin: 8px 0;
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

.lp-footer-links a {
	color: #9ca3af;
	text-decoration: none;
	font-size: 0.78rem;
}

.lp-footer-links a:hover {
	text-decoration: underline;
}

.lp-footer-copy {
	margin: 8px 0 0;
}

/* レスポンシブ */

.sp-only {
	display: none;
}

@media (max-width: 768px) {
	.sp-only {
		display: inline;
	}
	
	.title-small{
		font-size: 0.7rem;
	}

	.lp-header-nav {
		display: none; /* 必要ならハンバーガーメニューに */
	}

	.hero-inner {
		grid-template-columns: 1fr;
	}

	.hero-visual {
		order: -1;
		margin-bottom: 8px;
	}

	.benefit-cols,
	.present-grid,
	.sample-grid,
	.lp-points{
		grid-template-columns: 1fr;
	}
	
	.lp-voices {
		grid-template-columns: repeat(2, 1fr);
	}

	.lp-section {
		padding: 40px 0;
	}
	
	.lp-float-btn {
		display: none;
	}
	
	.lp-float-btn.is-visible {
		display: inline-block;
		right: 8px;
		left: 8px;
		text-align: center;
	}

	.btn {
		display: inline-block;
		text-decoration: none;
		border-radius: 999px;
		font-weight: 700;
		font-size: 0.95rem;
		margin-left: 10px;
		margin-right: 10px;
		padding: 10px 20px;
		text-align: center;
		width: 100%;
	}
	.badge-limited {
	  font-size: 0.7rem;
	  }	
}
/* かわいく強調するクラス */
.hero-kawaii {
	--outer-color: #0084D8; /* ← デフォルト外フチ色 */
    --inner-color: #ffffff; /* ← 内フチ色 */
	
	display: inline-block;
	font-family: "Baloo 2", "M PLUS Rounded 1c",
		"ヒラギノ角ゴ ProN", "Yu Gothic", sans-serif;
	font-weight: 900;
	font-size: 1.3em;          /* まわりより少し大きく */
	color: #373737;            /* 文字色（ピンク） */
	padding-left: 8px;
	padding-right: 8px;

	/* 二重アウトライン */
  	text-shadow: 
     /* ===== 内側 白 2px ===== */
   -2px -2px 0 var(--inner-color),
   -1px -2px 0 var(--inner-color),
    0px -2px 0 var(--inner-color),
    1px -2px 0 var(--inner-color),
    2px -2px 0 var(--inner-color),

   -2px -1px 0 var(--inner-color),
    2px -1px 0 var(--inner-color),
   -2px  0px 0 var(--inner-color),
    2px  0px 0 var(--inner-color),
   -2px  1px 0 var(--inner-color),
    2px  1px 0 var(--inner-color),

   -2px  2px 0 var(--inner-color),
   -1px  2px 0 var(--inner-color),
    0px  2px 0 var(--inner-color),
    1px  2px 0 var(--inner-color),
    2px  2px 0 var(--inner-color),

  /* ===== 外側 ピンク 4px ===== */
   -4px -4px 0 var(--outer-color),
   -3px -4px 0 var(--outer-color),
   -2px -4px 0 var(--outer-color),
   -1px -4px 0 var(--outer-color),
    0px -4px 0 var(--outer-color),
    1px -4px 0 var(--outer-color),
    2px -4px 0 var(--outer-color),
    3px -4px 0 var(--outer-color),
    4px -4px 0 var(--outer-color),

   -4px -3px 0 var(--outer-color),
    4px -3px 0 var(--outer-color),
   -4px -2px 0 var(--outer-color),
    4px -2px 0 var(--outer-color),
   -4px -1px 0 var(--outer-color),
    4px -1px 0 var(--outer-color),
   -4px  0px 0 var(--outer-color),
    4px  0px 0 var(--outer-color),
   -4px  1px 0 var(--outer-color),
    4px  1px 0 var(--outer-color),
   -4px  2px 0 var(--outer-color),
    4px  2px 0 var(--outer-color),
   -4px  3px 0 var(--outer-color),
    4px  3px 0 var(--outer-color),

   -4px  4px 0 var(--outer-color),
   -3px  4px 0 var(--outer-color),
   -2px  4px 0 var(--outer-color),
   -1px  4px 0 var(--outer-color),
    0px  4px 0 var(--outer-color),
    1px  4px 0 var(--outer-color),
    2px  4px 0 var(--outer-color),
    3px  4px 0 var(--outer-color),
    4px  4px 0 var(--outer-color);
}

.kawaii-blue  { --outer-color:#0084D8; }
.kawaii-pink  { --outer-color:#ff5c9a; }
.kawaii-orange{ --outer-color:#ff4e00; }
.kawaii-green { --outer-color:#55efc4; }
.kawaii-purple{ --outer-color:#a66bff; }

.hero-img {
	width: 100%;
	height: auto;
	display: block;
	object-fit: cover; /* 念のため */
}

/* スマホだけ拡大＆中央寄せ */
@media (max-width: 768px) {
	.hero-img-wrap {
		overflow: hidden;      /* はみ出した部分を隠す */
	}

	.hero-img {
		width: 150%;          /* 100%を超えて拡大 */
		max-width: none;      /* 拡大を抑えないように */
		transform: translateX(-20%); /* 左にずらして中央を見せる */
	}
}

/* 初期状態：少し下にずらして透明にしておく */
.js-fade {
	opacity: 0;
	transform: translateY(40px);
	transition: opacity 0.6s ease, transform 0.6s ease;
}

/* 画面に入ってきたら：見える＆位置を戻す */
.js-fade.is-visible {
	opacity: 1;
	transform: translateY(0);
}

/* 下に波っぽい下線 */
.fx-underline-wave {
  display: inline;
  padding-bottom: 0.6em;

  background-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' width='80' height='16' viewBox='0 0 80 16'>\
<path d='M0 8 Q 10 0 20 8 T 40 8 T 60 8 T 80 8' fill='none' stroke='%23ff8cab' stroke-width='3.5' stroke-linecap='round'/>\
</svg>");
  
  background-repeat: repeat-x;
  background-position: left bottom;
  background-size: 40px 16px;

  /* ★これが重要 */
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* ドット：テキスト幅に自動追従 */
.hero-title .fx-dots-top-auto {
  display: inline-block;
  position: relative;
  width: fit-content;   /* ← これを追加 */
  padding-top: 0.7em;
}

.fx-dots-top-auto {
  position: relative;
  display: inline;
  width: fit-content;   /* ← これを追加 */
  padding-top: 0.7em;
}

.fx-dots-top-auto::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;             /* テキスト幅に自動追従 */
  top: 0.2em;
  height: 0.5em;

  /* ドット生成 */
  background:
    radial-gradient(circle 0.3em, var(--dot-color) 60%, transparent 61%) repeat-x;
  background-size: 1.2em 0.6em;  /* ドット間隔とサイズ */
  padding-top: 1.2em;
  pointer-events: none;
}

.dots-top-blue  { --dot-color:#0084D8; }
.dots-top-pink  { --dot-color:#ff5c9a; }
.dots-top-orange{ --dot-color:#ff4e00; }
.dots-top-green { --dot-color:#55efc4; }
.dots-top-purple{ --dot-color:#a66bff; }

/* ===== グリッド ===== */
.grid {
  display: grid;
  grid-template-columns: repeat(var(--cols), 1fr);
  gap: 15px;
  max-width: 1040px;
  padding: 10px;
  text-align: center;
  margin: 0 auto;
}

.purchase-box {
  display: grid;
  grid-template-columns: repeat(var(--cols), 1fr);
  flex-wrap: wrap;
  gap: 10px;
  max-width: 1040px;
  margin: 0 auto;
  padding: 20px;
}

/* 列数プリセット */
.cols-2 { --cols: 2; }
.cols-3 { --cols: 3; }
.cols-4 { --cols: 4; }

/* ===== 各アイテム ===== */
.grid-item {
  text-align: center;
}

.purchase-box-item {
  text-align: center;
}

/* ===== 赤アウトラインの正方形フレーム ===== */
.frame {
  border: 1px solid var(--border-col);
  border-radius: 30px 0 30px 0;
  aspect-ratio: 1 / 1;     /* 正方形を維持 */
  overflow: hidden;        /* 画像を角丸内に収める */
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
}

.frame-rec {
  border: 1px solid var(--border-col);
  border-radius: 30px 0 30px 0;
  aspect-ratio: 2 / 1;     /* 長方形を維持 */
  overflow: hidden;        /* 画像を角丸内に収める */
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
}

.border-col-red  { --border-col:#e50000; }
.border-col-blue  { --border-col:#0084D8; }
.border-col-pink  { --border-col:#ff5c9a; }
.border-col-orange{ --border-col:#ff4e00; }
.border-col-green { --border-col:#55efc4; }
.border-col-purple{ --border-col:#a66bff; }

/* ===== 中の画像 ===== */
.frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;       /* フレームいっぱいにトリミング */
}

/* ===== 下のテキスト ===== */
.caption {
  margin-top: 6px;
  font-size: 0.8em;
  font-weight: bold;
  color: #930002;
	
}

.teiki-sec--安心3 {
	background: #f7f7fb;
	padding: 56px 0;
}

.teiki-inner {
	max-width: 1040px;
	margin: 0 auto;
	padding: 0 16px;
}

.teiki-h2--center {
	text-align: center;
	font-size: 1.6rem;
	margin-bottom: 24px;
}

.teiki-anshin-list {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
}

.teiki-anshin-item {
	background: #f2f8f1;
	border-radius: 12px;
	padding: 18px 16px 20px;
	box-shadow: 0 4px 10px rgba(0,0,0,0.04);
}

/* タイトル下の画像（PC表示イメージ） */
.teiki-anshin-img {
	margin: 8px 0 10px;
	text-align: center;
}
.teiki-anshin-img img {
	max-width: 100%;
	height: auto;
}

.teiki-anshin-num {
	width: 40px;
	height: 40px;
	margin: 0 0 8px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 700;
	color: #fff;
	font-size: 0.9rem;

	/* ハート画像を背景に（PNGなど） */
	background: url("images/heart.png") no-repeat center / contain;
}

.teiki-anshin-title {
	font-size: 1.05rem;
	margin: 0 0 8px;
	line-height: 1.6;
}

.teiki-anshin-body ul {
	margin: 8px 0;
	padding-left: 18px;
}

.teiki-anshin-note {
	font-size: 0.78rem;
	color: #777;
	margin-top: 8px;
}

@media (max-width: 768px) {
	.teiki-anshin-list {
		grid-template-columns: 1fr;
	}
	
	.teiki-anshin-img {
	 	 display: flex;
  		justify-content: center;
	}
	
	.teiki-anshin-img img {
	max-width: 80%;
	height: auto;
	}

	.ms-review-area {
	  max-width: 100%;
	  margin: 40px auto;
	  padding: 24px;
	  border: 2px solid #ffd1dc;
	  border-radius: 16px;
	  background: #fffafc;
	}
	.purchase-box {
	  display: inline;
	  gap: 15px;
	  width: 90%;
	  padding: 0 10px 0 10px;
	}
	.purchase-box-item {
 		text-align: center;
		padding: 20px;
	}
	
}

.back-to-top {
  position: fixed;
  left: 20px;
  bottom: 20px;
  width: 55px;
  height: 55px;
  border-radius: 50%;
  background: var(--main-green, #2ecc71);
  color: #fff;
  text-align: center;
  line-height: 55px;
  font-size: 20px;
  font-weight: bold;
  text-decoration: none;
  box-shadow: 0 4px 10px rgba(0,0,0,0.2);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, transform 0.3s ease;
  z-index: 9999;
}

.back-to-top.show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.back-to-top:hover {
  opacity: 0.85;
}