/* =====================================================
   50代男性向けプロモーションLP 専用CSS
   テーマ本体の style.css（.sec-*, .lp-*, .point-list, .issues-item-list 等）
   を最大限利用し、このファイルでは不足分のみを補う。
   全て #lp50 配下にスコープしてテーマへの影響を防ぐ。
===================================================== */

#lp50 {
	background-color: var(--bg-color);
}

/* ---------- HERO ---------- */
#lp50 .sec-lp50-hero {
	padding-block: 100px 80px;
	background-color: #fff;
	overflow: hidden;
}
#lp50 .lp50-hero-eyebrow {
	display: inline-block;
	padding: 4px 24px;
	color: #fff;
	font-size: 13px;
	font-weight: bold;
	letter-spacing: .1em;
	background-color: var(--sub-color);
	border-radius: 100px;
	margin-bottom: 16px;
}
#lp50 .lp50-hero-notes {
	display: flex;
	flex-wrap: wrap;
	gap: .5em 1.5em;
	margin-top: 24px;
	font-size: 14px;
	font-weight: 500;
	color: var(--font-color);
}
#lp50 .lp50-hero-notes span::before {
	content: '';
	display: inline-block;
	width: 6px;
	height: 6px;
	border-radius: 100%;
	background-color: var(--main-color);
	margin-right: 8px;
	vertical-align: 1px;
}
#lp50 .lp50-hero-img-wrap {
	position: relative;
}
#lp50 .sec-lp50-hero .mv-item {
	gap: 64px;
}
/* トップページのHeroはテキストが先・イラストが後（auto=テキスト / 1fr=イラスト）の
   DOM順でグリッド比率が組まれている。本LPはイラストを先に配置しているため、
   同じ auto/1fr のままだとテキスト側が極端に狭くなり見出しが1〜2文字ずつ
   改行される。デスクトップ幅ではカラム比率とイラストの最大幅を明示指定し、
   テキスト側の可読幅を確保する。 */
@media(min-width:768px) {
	#lp50 .sec-lp50-hero .mv-item {
		grid-template-columns: minmax(0,1fr) minmax(0,1.3fr);
		gap: 48px;
	}
	#lp50 .sec-lp50-hero .mv-item-img {
		width: 100%;
		max-width: 380px;
		margin-inline: auto;
	}
	#lp50 .sec-lp50-hero .mv-heading {
		font-size: clamp(30px, 3vw, 38px);
		line-height: 1.45;
	}
}
#lp50 .lp50-hero-badge {
	position: absolute;
	left: 16px;
	bottom: 16px;
	background-color: #fff;
	border: 2px solid var(--main-color);
	border-radius: 16px;
	padding: 10px 18px;
	box-shadow: 5px 5px 10px rgb(0 0 0 / .1);
	font-size: 13px;
	line-height: 1.5;
}
#lp50 .lp50-hero-badge strong {
	display: block;
	color: var(--main-color);
	font-size: 14px;
}
@media(max-width:767px) {
	#lp50 .sec-lp50-hero { padding-block: 56px 40px; }
	#lp50 .lp50-hero-notes { font-size: 12px; gap: .5em 1em; }
	#lp50 .sec-lp50-hero .mv-item { gap: 32px; }
}

/* ---------- 汎用: ストアバッジ / 中間CTA ---------- */
#lp50 .lp50-store-badges {
	display: flex;
	justify-content: center;
	gap: 16px;
	margin-top: 48px;
}
#lp50 .lp50-store-badges a { height: 48px; }
#lp50 .lp50-store-badges img { height: 100%; width: auto; }

#lp50 .lp50-hero-store-badges {
	justify-content: flex-start;
	margin-top: 20px;
}
@media(max-width:767px) {
	#lp50 .lp50-hero-store-badges { justify-content: center; }
}

#lp50 .lp50-mid-cta {
	max-width: 480px;
	margin: 64px auto 0;
	padding: 40px 24px;
	text-align: center;
	background-color: #E9F6F4;
	border-radius: 24px;
}
#lp50 .lp50-mid-cta-txt {
	font-size: 20px;
	font-weight: bold;
	color: var(--main-color);
	margin: 0;
}
#lp50 .lp50-mid-cta .lp50-store-badges { margin-top: 24px; }
#lp50 .lp50-top-link {
	margin-top: 20px;
	font-size: 14px;
}
#lp50 .lp50-top-link a {
	color: var(--main-color);
	font-weight: 500;
	text-decoration: underline;
}
@media(max-width:767px) {
	#lp50 .lp50-mid-cta { padding: 32px 20px; margin-top: 48px; }
	#lp50 .lp50-mid-cta-txt { font-size: 17px; }
}

/* ---------- 汎用: セクション見出し ---------- */
#lp50 .lp50-sec-tit { text-align: center; margin-bottom: 48px; }
@media(max-width:767px) {
	#lp50 .lp50-sec-tit { margin-bottom: 32px; }
}

/* ---------- PAIN POINTS (issues-item流用 / 4カラム化) ---------- */
#lp50 .sec-lp50-problems { padding-block: 100px; }
@media(min-width:1025px) {
	#lp50 .issues-item-list-4 { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 32px; margin-top: 48px; }
	#lp50 .issues-item-list-4 .issues-item-list-con { margin-top: 0; padding-inline: 32px; }
}
#lp50 .lp50-pain-note {
	text-align: center;
	margin-top: 2.5em;
	font-size: 18px;
	line-height: 1.9;
}
@media(max-width:767px) {
	#lp50 .lp50-pain-note { font-size: 15px; }
}

/* ---------- SOLUTION (point-list流用 / 個別イラスト figure) ---------- */
#lp50 .sec-lp50-solution { padding-block: 100px; background-color: #fff; }
/* テーマの .point-list は .point-swiper 配下でのみ display:grid が定義されるため、
   Swiperを使わないLP50では明示的にグリッド化してカード間の余白を確保する */
#lp50 .point-list {
	display: grid;
	grid-template-columns: repeat(3,minmax(0,1fr));
	gap: 56px 32px;
}
@media(max-width:1024px) {
	#lp50 .point-list { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 48px 24px; }
}
@media(max-width:767px) {
	#lp50 .point-list { grid-template-columns: minmax(0,1fr); gap: 32px; }
}
/* テーマの `.point-list li div` は subgrid を前提としたレイアウトのため、
   本LPのようにSwiperを使わない構造ではsubgridが正しく機能せず、
   イラスト(figure)とテキスト(h4)の行間が確保されず重なって表示される。
   flexboxで縦積みにし、gapで確実に余白を確保する。 */
#lp50 .point-list li > div {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 20px;
}
#lp50 .lp50-feature-figure {
	width: 128px;
	aspect-ratio: 1/1;
	margin: 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: #E9F6F4;
	border-radius: 100%;
	overflow: hidden;
	flex-shrink: 0;
}
#lp50 .lp50-feature-figure img {
	width: 76%;
	height: 76%;
	object-fit: contain;
}
#lp50 .point-list h4 {
	text-align: center;
	margin: 0;
}
@media(max-width:767px) {
	#lp50 .lp50-feature-figure { width: 104px; }
	#lp50 .point-list li > div { gap: 16px; }
}

/* ---------- USE CASES (lp-flow流用) ---------- */
#lp50 .sec-lp50-usecase { }
#lp50 .lp50-usecase-img {
	width: 420px;
	max-width: 80%;
	margin: 0 auto 40px;
}
#lp50 .lp-flow-item-time {
	display: block;
	font-size: 13px;
	font-weight: bold;
	color: var(--main-color);
	margin-bottom: 4px;
}

/* ---------- FOUNDER STORY (sec-ourstory流用) ---------- */
#lp50 .sec-lp50-founder { padding-block: 100px; }

/* ---------- VOICES (lp-achieve-message流用 / 2カラム化) ---------- */
#lp50 .sec-lp50-voices { padding-block: 100px; background-color: #fff; }
#lp50 .lp50-voices-grid {
	display: grid;
	grid-template-columns: repeat(2,minmax(0,1fr));
	gap: 24px;
}
#lp50 .lp50-voice-meta {
	display: inline-block;
	margin-left: 12px;
	font-size: 12px;
	font-weight: 500;
	color: var(--font-color);
}
#lp50 .lp50-voices-note {
	margin-top: 12px;
	font-size: 13px;
	color: var(--font-color);
	opacity: .8;
}
@media(max-width:767px) {
	#lp50 .lp50-voices-grid { grid-template-columns: minmax(0,1fr); }
	#lp50 .lp50-voices-note { font-size: 12px; }
}

/* ---------- PRICING (introduce-item-con / freeads-item-des dl 流用) ---------- */
#lp50 .sec-lp50-pricing { padding-block: 100px; }
/* テーマの .introduce-item-con h4 は position:absolute; top:0; translate:-50% -50%
   で上枠の中央に「ピル型バッジ」として浮かせる設計。本来は .allinone-item の
   広い上パディング内に浮かせる想定のため、そのままだと直前の説明文とバッジが
   重なってしまう。カード自体にmargin-topを設け、バッジ分の余白を確保する。 */
#lp50 .lp50-plan-card { max-width: 480px; margin: 64px auto 0; }
#lp50 .lp50-pricing-why { max-width: 720px; margin: 72px auto 0; text-align: center; }
#lp50 .lp50-pricing-why-note { margin-top: 1em; font-size: 13px; color: #A49481; }
#lp50 .lp50-cost-title {
	font-size: 22px;
	font-weight: 500;
	text-align: center;
	margin-top: 80px;
}
#lp50 .lp50-cost-highlight {
	text-align: center;
	margin-top: 40px;
	font-size: 22px;
	font-weight: bold;
}
#lp50 .lp50-cost-highlight .marker { font-size: 26px; }

/* ---------- FAQ ---------- */
#lp50 .sec-lp50-faq { padding-block: 100px; background-color: #fff; }

/* ---------- FINAL CTA (lp-contact / start-des 流用) ---------- */
#lp50 .sec-lp50-cta {
	padding-block: 100px;
	background-color: var(--main-color);
}
#lp50 .lp50-final-steps {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	gap: 32px;
	margin-top: 48px;
}
#lp50 .lp50-final-steps li {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	width: 150px;
	color: #fff;
	font-weight: 500;
	text-align: center;
}
#lp50 .lp50-final-steps li .step-num {
	display: grid;
	place-items: center;
	width: 56px;
	aspect-ratio: 1/1;
	border-radius: 100%;
	background-color: #fff;
	color: var(--main-color);
	font-weight: bold;
	font-size: 20px;
}
#lp50 .lp50-cta-notes {
	text-align: center;
	margin-top: 24px;
	color: #fff;
	font-size: 14px;
	font-weight: 500;
	letter-spacing: .05em;
}
#lp50 .lp50-top-link-white a {
	color: #fff;
	text-decoration: underline;
}
@media(max-width:767px) {
	#lp50 .sec-lp50-problems,
	#lp50 .sec-lp50-solution,
	#lp50 .sec-lp50-founder,
	#lp50 .sec-lp50-voices,
	#lp50 .sec-lp50-pricing,
	#lp50 .sec-lp50-faq,
	#lp50 .sec-lp50-cta { padding-block: 60px; }
	#lp50 .lp50-plan-card { margin-top: 48px; }
	#lp50 .lp50-pricing-why { margin-top: 56px; }
	#lp50 .lp50-final-steps { gap: 20px; }
	#lp50 .lp50-final-steps li { width: 42%; }
}