@charset "UTF-8";
/* ============================================================
   lp-new.css  新標準LP（LP1ティーザー型 / LP2セールス型）専用
   page-lp-new.php 経由でのみ読み込み
   見出し（H2〜H6）は #lp-content-wrapper 配下のみ自動装飾
   ※全幅紺背景は固定ページの「追加CSS」に記述すること
   ============================================================ */

/* ---------- 1. ベース ---------- */
body.lp-template-new {
	font-family: 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', 'Hiragino Sans', Meiryo, sans-serif;
	background-color: #F9F9F9 !important;
	color: #333333 !important;
	-webkit-font-smoothing: antialiased;
	margin: 0;
	padding: 0;
}

#lp-content-wrapper {
	width: 100%;
	overflow-x: hidden;
}

#lp-content-wrapper h1,
#lp-content-wrapper h2,
#lp-content-wrapper h3,
#lp-content-wrapper h4,
#lp-content-wrapper h5,
#lp-content-wrapper h6 {
	border: none;
	box-shadow: none;
}
#lp-content-wrapper h2::before,
#lp-content-wrapper h2::after,
#lp-content-wrapper h3::before,
#lp-content-wrapper h3::after,
#lp-content-wrapper h4::before,
#lp-content-wrapper h4::after {
	display: none;
	content: none;
}

/* 段落は中央寄せ */
#lp-content-wrapper p {
	text-align: center !important;
	font-size: 16px;
	line-height: 1.9;
	margin: 0 0 1em;
}

.lp-inner {
	max-width: 720px;
	margin: 0 auto;
	padding: 0 24px;
	box-sizing: border-box;
}

.center {
	text-align: center !important;
	margin-left: auto !important;
	margin-right: auto !important;
	width: fit-content !important;
	max-width: 100% !important;
}

.text-left {
    text-align: left !important;
}

/* ==================================
   カラー設定用クラス
   ================================== */
.bg-blue {
    background-color: #1A2B3C;
    color: #FFFFFF;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    padding-left: calc(50vw - 50%);
    padding-right: calc(50vw - 50%);
 /* 上下に60px、左右に全幅の計算式を適用 */
    padding: 20px calc(50vw - 50%);
}

.bg-white {
    background-color: #F9F9F9;
    color: #333333;
}

/* ---------- 2. 見出し自動装飾（LP2主軸） ---------- */
body.lp-template-new #lp-content-wrapper h2,
body.lp-template-new #lp-content-wrapper h2.wp-block-heading {
	background-color: #C0392B;
	color: #ffffff;
	font-size: 28px;
	font-weight: 900;
	line-height: 1.4;
	text-align: center !important;
	padding: 18px 16px;
	margin: 48px 0 24px;
	border-radius: 4px;
}

#lp-content-wrapper h3 {
	background-color: #0A0A0A;
	color: #ffffff;
	font-size: 22px;
	font-weight: 700;
	line-height: 1.5;
	padding: 14px 16px;
	margin: 32px 0 20px;
	border-left: 6px solid #C0392B;
}
#lp-content-wrapper h4 {
	background: linear-gradient(135deg, #B38728 0%, #FCF6BA 50%, #AA771C 100%);
	color: #1F2A44;
	font-size: 22px;
	font-weight: 900;
	text-align: center;
	padding: 14px 16px;
	margin: 36px 0 20px;
	border-radius: 4px;
	text-shadow: 0 1px 0 rgba(255,255,255,0.4);
}
#lp-content-wrapper h5 {
	background-color: #E74C3C;
	color: #ffffff;
	font-size: 20px;
	font-weight: 700;
	text-align: center;
	padding: 12px 16px;
	margin: 28px 0 16px;
	border-radius: 4px;
}
#lp-content-wrapper h6 {
	background-color: #16A085;
	color: #ffffff;
	font-size: 18px;
	font-weight: 700;
	padding: 10px 16px;
	margin: 24px 0 14px;
	border-radius: 4px;
}

/* ---------- 3. 専用クラス（短縮名） ---------- */
.hero {
	background-color: #0A0A0A;
	color: #ffffff;
	font-size: 34px;
	font-weight: 900;
	line-height: 1.4;
	text-align: center;
	padding: 32px 20px;
	margin: 0 0 28px;
	border-radius: 4px;
}
.sub {
	color: #FCF6BA;
	font-size: 18px;
	font-weight: 700;
	text-align: center;
	margin: -12px 0 24px;
}
.red-box {
	color: #C0392B;
	border: 3px solid #C0392B;
	padding: 16px 20px;
	margin: 20px auto;
	border-radius: 4px;
	font-weight: 700;
	text-align: center;
	width: fit-content;
	max-width: 100%;
}
.navy-box {
	color: #1F2A44;
	border: 3px solid #1F2A44;
	padding: 16px 20px;
	margin: 20px auto;
	border-radius: 4px;
	text-align: center;
	width: fit-content;
	max-width: 100%;
}
.yellow-box {
	background-color: #FFF9C4;
	color: #1F2A44;
	border: 2px solid #F1C40F;
	padding: 16px 20px;
	margin: 20px auto;
	border-radius: 4px;
	text-align: center;
	width: fit-content;
	max-width: 100%;
}
.review-head {
	background: linear-gradient(135deg, #3498DB 0%, #5DADE2 100%);
	color: #ffffff;
	font-size: 18px;
	font-weight: 700;
	text-align: center;
	padding: 12px 16px;
	margin: 24px auto 0;
	border-radius: 4px 4px 0 0;
	width: fit-content;
	max-width: 100%;
}
.review-head + blockquote {
	background-color: #F0FEFF;
	color: #1F2A44;
	border-left: 4px solid #b3e9ff;
	padding: 16px 20px;
	margin: 0 auto 20px;
	border-radius: 0 0 4px 4px;
	text-align: center;
	width: fit-content;
	max-width: 100%;
}

.yellow-mark {
	background: linear-gradient(transparent 60%, #FFF59D 60%);
	font-weight: 700;
	padding: 0 2px;
}

/* ---------- 4. ボタン6種 ---------- */
.btn-blue,
.btn-blue-s,
.btn-gold,
.btn-gold-s,
.btn-red,
.btn-orange {
	display: inline-block;
	min-width: 280px;
	padding: 18px 32px;
	margin: 16px auto;
	font-size: 18px;
	font-weight: 700;
	text-align: center;
	text-decoration: none;
	border-radius: 6px;
	box-shadow: 0 4px 0 rgba(0,0,0,0.2);
	transition: transform .1s ease, box-shadow .1s ease;
}
.btn-blue:hover,
.btn-blue-s:hover,
.btn-gold:hover,
.btn-gold-s:hover,
.btn-red:hover,
.btn-orange:hover {
	transform: translateY(2px);
	box-shadow: 0 2px 0 rgba(0,0,0,0.2);
}
.btn-blue   { background-color: #386CD1; color: #ffffff; }
.btn-blue-s { background: linear-gradient(135deg, #5472cd 0%, #386CD1 50%, #4967b4 100%); color: #ffffff; }
.btn-gold   { background-color: #B38728; color: #1F2A44; }
.btn-gold-s { background: linear-gradient(135deg, #B38728 0%, #FCF6BA 50%, #AA771C 100%); color: #1F2A44; }
.btn-red    { background-color: #E74C3C; color: #ffffff; }
.btn-orange { background: linear-gradient(135deg, #F39C12 0%, #E67E22 100%); color: #ffffff; }

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

/* ---------- 5. モバイル調整 ---------- */
@media (max-width: 600px) {
	#lp-content-wrapper h2 { font-size: 22px; padding: 14px 12px; }
	#lp-content-wrapper h3 { font-size: 18px; padding: 12px 12px; }
	#lp-content-wrapper h4 { font-size: 18px; padding: 12px 12px; }
	#lp-content-wrapper h5 { font-size: 17px; padding: 10px 12px; }
	#lp-content-wrapper h6 { font-size: 16px; padding: 10px 12px; }
	.hero { font-size: 24px; padding: 24px 14px; }
	.btn-blue,
	.btn-blue-s,
	.btn-gold,
	.btn-gold-s,
	.btn-red,
	.btn-orange {
		min-width: auto;
		width: 100%;
		padding: 16px 20px;
		font-size: 16px;
	}
}