/* =========================
シメナビ LP - Full CSS (Readable / Modern / JP)
- Inter + Noto Sans JP
- Bigger font + better line-height
- Fix tiny texts (12/13px) -> 14/15px
========================= */
/* Google Fonts は index.php の に追加してください
*/
:root {
--bg: #ffffff;
--text: #0f172a;
--muted: #334155;
/* 少し濃くして読みやすく */
--muted2: #64748b;
--line: #e2e8f0;
--soft: #f1f5f9;
--soft2: #eff6ff;
--primary: #2563eb;
--primary2: #60a5fa;
--green: #22c55e;
--warn: #f59e0b;
--shadow: 0 14px 40px rgba(15, 23, 42, .08);
--shadow2: 0 10px 26px rgba(15, 23, 42, .10);
--radius: 18px;
--radius2: 26px;
--max: 1120px;
--font: "Inter", "Noto Sans JP", ui-sans-serif, system-ui, -apple-system, "Hiragino Sans", "Yu Gothic", Meiryo, "Segoe UI", Roboto, "Helvetica Neue", Arial;
}
/* Reset */
* {
box-sizing: border-box;
}
html,
body {
height: 100%;
}
html {
font-size: 16px;
/* 基準を固定 */
text-size-adjust: 100%;
}
body {
margin: 0;
font-family: var(--font);
color: var(--text);
line-height: 1.85;
/* 読みやすく */
letter-spacing: 0.02em;
/* JPに効く */
background:
radial-gradient(900px 520px at 15% 0%, rgba(96, 165, 250, .18), transparent 62%),
radial-gradient(900px 520px at 85% 10%, rgba(37, 99, 235, .10), transparent 60%),
#fff;
}
a {
color: inherit;
text-decoration: none;
}
a:hover {
opacity: .95;
}
code {
background: rgba(37, 99, 235, .06);
padding: 2px 6px;
border-radius: 8px;
border: 1px solid rgba(37, 99, 235, .14);
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
font-size: .92em;
}
.container {
max-width: var(--max);
margin: 0 auto;
padding: 0 20px;
}
.muted {
color: var(--muted);
}
.tiny {
font-size: 14px;
}
/* 12px→14px */
.w100 {
width: 100%;
justify-content: center;
}
/* Header */
.header {
position: sticky;
top: 0;
z-index: 50;
background: rgba(255, 255, 255, .88);
backdrop-filter: blur(10px);
border-bottom: 1px solid rgba(226, 232, 240, .95);
}
.nav {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 14px 0;
}
.brand {
display: flex;
align-items: center;
gap: 10px;
min-width: 240px;
}
.logo {
width: 40px;
height: 40px;
border-radius: 14px;
background: linear-gradient(135deg, rgba(37, 99, 235, 1), rgba(96, 165, 250, 1));
box-shadow: 0 12px 24px rgba(37, 99, 235, .18);
position: relative;
overflow: hidden;
}
.logo:before {
content: "";
position: absolute;
inset: -22px;
background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, .55), transparent 55%);
transform: rotate(18deg);
}
.logo.small {
width: 34px;
height: 34px;
border-radius: 14px;
}
.brandText strong {
font-size: 15px;
/* 14→15 */
letter-spacing: .6px;
display: block;
line-height: 1.15;
font-weight: 800;
}
.brandText span {
font-size: 13px;
/* 12→13 */
color: var(--muted2);
display: block;
margin-top: 2px;
}
/* Menu */
.menu {
display: flex;
align-items: center;
gap: 10px;
flex-wrap: wrap;
justify-content: flex-end;
}
.menu a {
font-size: 14px;
/* 13→14 */
color: var(--muted);
padding: 9px 12px;
border-radius: 12px;
font-weight: 600;
}
.menu a:hover {
background: var(--soft2);
color: #0b3aa7;
}
/* Buttons */
.btn {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 12px 16px;
/* 少し大きく */
border-radius: 14px;
font-size: 14px;
/* 13→14 */
font-weight: 700;
border: 1px solid var(--line);
background: #fff;
box-shadow: 0 6px 16px rgba(15, 23, 42, .06);
transition: transform .12s ease, box-shadow .12s ease;
cursor: pointer;
}
.btn:hover {
transform: translateY(-1px);
box-shadow: var(--shadow2);
}
.btn.primary {
border-color: rgba(37, 99, 235, .25);
background: linear-gradient(135deg, rgba(37, 99, 235, 1), rgba(96, 165, 250, 1));
color: #fff;
box-shadow: 0 14px 28px rgba(37, 99, 235, .20);
}
.btn.ghost {
background: transparent;
box-shadow: none;
}
.btn.sm {
padding: 10px 13px;
font-size: 13px;
}
/* 12→13 */
/* Pill */
.pill {
display: inline-flex;
align-items: center;
padding: 9px 13px;
border-radius: 999px;
background: rgba(37, 99, 235, .06);
border: 1px solid rgba(37, 99, 235, .14);
color: #0b3aa7;
font-size: 13px;
/* 12→13 */
font-weight: 700;
}
.grad {
background: linear-gradient(135deg, rgba(37, 99, 235, 1), rgba(96, 165, 250, 1));
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
/* Hero */
.hero {
padding: 50px 0 20px;
}
.heroGrid {
display: grid;
grid-template-columns: 1.08fr .92fr;
gap: 26px;
align-items: start;
}
.hero h1 {
margin: 14px 0 10px;
font-size: 46px;
/* 44→46 */
line-height: 1.18;
letter-spacing: 0;
font-weight: 900;
}
.lead {
margin: 0;
color: var(--muted);
font-size: 18px;
/* 16→18 */
max-width: 68ch;
}
.heroActions {
display: flex;
gap: 10px;
flex-wrap: wrap;
margin-top: 16px;
}
/* Hero badges */
.heroBadges {
display: grid;
grid-template-columns: 1fr;
gap: 10px;
margin-top: 18px;
}
.badge {
display: flex;
gap: 10px;
align-items: flex-start;
border: 1px solid rgba(226, 232, 240, .95);
background: #fff;
border-radius: 16px;
padding: 12px 14px;
box-shadow: 0 8px 18px rgba(15, 23, 42, .05);
}
.dot {
width: 10px;
height: 10px;
border-radius: 999px;
background: var(--warn);
box-shadow: 0 0 0 4px rgba(245, 158, 11, .18);
margin-top: 6px;
/* 行間が増えたので少し下げ */
}
.dot.blue {
background: var(--primary);
box-shadow: 0 0 0 4px rgba(37, 99, 235, .14);
}
.dot.green {
background: var(--green);
box-shadow: 0 0 0 4px rgba(34, 197, 94, .14);
}
.bTitle {
font-weight: 800;
font-size: 14px;
}
/* 13→14 */
.bSub {
color: var(--muted2);
font-size: 13px;
margin-top: 2px;
}
/* 12→13 */
/* Hero card */
.heroCard {
border: 1px solid rgba(226, 232, 240, .95);
border-radius: var(--radius2);
background: #fff;
box-shadow: var(--shadow);
padding: 16px;
position: relative;
overflow: hidden;
}
.cardTop {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 10px;
}
.cardTitle {
font-weight: 900;
font-size: 14px;
}
/* 13→14 */
.cardSub {
color: var(--muted2);
font-size: 13px;
margin-top: 2px;
}
/* 12→13 */
.chip {
font-size: 13px;
/* 12→13 */
padding: 6px 10px;
border-radius: 999px;
border: 1px solid rgba(226, 232, 240, .95);
background: rgba(37, 99, 235, .06);
color: #0b3aa7;
font-weight: 800;
}
.chip.blue {
background: rgba(37, 99, 235, .06);
color: #0b3aa7;
border-color: rgba(37, 99, 235, .14);
}
/* AI report (text version) */
.aiReport {
margin-top: 12px;
border: 1px solid rgba(226, 232, 240, .95);
border-radius: 16px;
background: linear-gradient(180deg, rgba(239, 246, 255, .75), #fff);
padding: 12px;
}
.aiLine {
display: grid;
grid-template-columns: 76px 1fr;
gap: 10px;
padding: 7px 0;
}
/* 少し広く */
.aiLine+.aiLine {
border-top: 1px dashed rgba(226, 232, 240, .95);
}
.aiLine .k {
font-weight: 900;
color: #0b3aa7;
font-size: 13px;
}
/* 12→13 */
.aiLine .v {
color: var(--muted);
font-size: 13px;
}
/* 12→13 */
/* KPI */
.kpiGrid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
margin-top: 12px;
}
.kpi {
border: 1px solid rgba(226, 232, 240, .95);
border-radius: 16px;
background: linear-gradient(180deg, rgba(239, 246, 255, .65), #fff);
padding: 12px;
}
.kLabel {
font-size: 13px;
color: var(--muted2);
font-weight: 600;
}
/* 12→13 */
.kValue {
font-size: 22px;
font-weight: 900;
margin-top: 4px;
color: #0b3aa7;
}
.kSub {
font-size: 13px;
color: var(--muted2);
margin-top: 2px;
}
/* 12→13 */
/* Image Slot (hero right bottom) */
.imgSlot {
margin-top: 12px;
border: 1px solid rgba(226, 232, 240, .95);
border-radius: 16px;
overflow: hidden;
background: rgba(241, 245, 249, .6);
}
.imgSlot img {
width: 100%;
height: 190px;
object-fit: cover;
display: block;
}
/* 180→190 */
.imgFallback {
height: 190px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
color: var(--muted2);
font-size: 13px;
/* 12→13 */
gap: 10px;
}
.fallbackGrid {
width: 85%;
height: 90px;
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 10px;
}
.fallbackGrid div {
border-radius: 12px;
background: rgba(37, 99, 235, .06);
border: 1px solid rgba(37, 99, 235, .12);
}
/* ---------- (Optional) AI report image frame ----------
もし index.php の AI改善レポート（例）を画像にするなら
を使えるようにしておく
------------------------------------------------------ */
.aiShot {
margin-top: 12px;
border-radius: 16px;
overflow: hidden;
border: 1px solid rgba(226, 232, 240, .95);
background: #fff;
box-shadow: 0 16px 34px rgba(15, 23, 42, .10);
}
.aiShot img {
width: 100%;
height: auto;
display: block;
}
/* Sections */
.section {
padding: 62px 0;
}
/* 56→62 */
.section.soft {
background: linear-gradient(#fff, rgba(241, 245, 249, .55));
border-top: 1px solid rgba(226, 232, 240, .6);
border-bottom: 1px solid rgba(226, 232, 240, .6);
}
.sectionHead h2 {
margin: 0;
font-size: 32px;
/* 28→32 */
letter-spacing: .2px;
font-weight: 900;
line-height: 1.35;
}
.sectionHead p {
margin: 10px 0 0;
color: var(--muted);
max-width: 78ch;
font-size: 17px;
/* 少し上げる */
}
/* Cards grid */
.grid3 {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 14px;
margin-top: 18px;
}
.card {
border: 1px solid rgba(226, 232, 240, .95);
border-radius: var(--radius);
background: #fff;
padding: 18px 18px;
box-shadow: 0 10px 24px rgba(15, 23, 42, .06);
}
.card h3 {
margin: 0 0 8px;
font-size: 18px;
/* 16→18 */
font-weight: 900;
line-height: 1.35;
}
.card p {
margin: 0;
color: var(--muted);
font-size: 15.5px;
/* 14→15.5 */
line-height: 1.9;
}
.icon {
width: 38px;
height: 38px;
border-radius: 14px;
display: grid;
place-items: center;
background: rgba(37, 99, 235, .08);
border: 1px solid rgba(37, 99, 235, .16);
color: #0b3aa7;
font-weight: 900;
margin-bottom: 10px;
}
/* Split panels */
.split {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
margin-top: 18px;
}
.panel {
border: 1px solid rgba(226, 232, 240, .95);
border-radius: var(--radius2);
background: linear-gradient(180deg, rgba(239, 246, 255, .70), #fff);
box-shadow: var(--shadow);
padding: 18px;
}
.panel h3 {
margin: 0 0 6px;
font-size: 20px;
font-weight: 900;
}
.panelActions {
display: flex;
gap: 10px;
flex-wrap: wrap;
margin-top: 12px;
}
/* Prompt box */
.promptBox {
margin-top: 12px;
border: 1px solid rgba(226, 232, 240, .95);
border-radius: 16px;
background: #fff;
padding: 12px;
}
.promptBox .q {
font-weight: 900;
font-size: 14px;
}
/* 13→14 */
.promptBox .a {
margin-top: 8px;
color: var(--muted);
font-size: 14px;
line-height: 1.9;
}
/* 13→14 */
/* Image grid */
.imageGrid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
margin-top: 12px;
}
.imgBox {
border-radius: 16px;
border: 1px solid rgba(226, 232, 240, .95);
overflow: hidden;
background: #fff;
height: 130px;
/* 120→130 */
}
.imgBox.big {
height: 240px;
margin-top: 12px;
}
/* 220→240 */
.imgBox img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.imgPlaceholder {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
color: var(--muted2);
background: rgba(241, 245, 249, .7);
font-size: 13px;
font-weight: 700;
}
/* Gallery */
.gallery {
margin-top: 18px;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 12px;
}
.gItem {
border: 1px solid rgba(226, 232, 240, .95);
border-radius: 16px;
overflow: hidden;
background: #fff;
height: 190px;
/* 170→190 */
box-shadow: 0 10px 24px rgba(15, 23, 42, .06);
}
.gItem img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.gPlaceholder {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
color: var(--muted2);
background: rgba(241, 245, 249, .7);
font-size: 13px;
font-weight: 700;
}
.note {
margin-top: 12px;
color: var(--muted2);
font-size: 14px;
/* 12→14 */
}
/* Pricing */
.pricing {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 14px;
margin-top: 18px;
}
.priceCard {
border: 1px solid rgba(226, 232, 240, .95);
border-radius: var(--radius2);
background: #fff;
box-shadow: var(--shadow);
padding: 18px;
}
.priceTop {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 10px;
}
.priceCard h3 {
margin: 0;
font-size: 18px;
font-weight: 900;
}
.price {
font-size: 36px;
/* 34→36 */
font-weight: 900;
color: #0b3aa7;
margin-top: 10px;
line-height: 1.2;
}
.price span {
font-size: 14px;
/* 13→14 */
color: var(--muted2);
font-weight: 700;
}
.priceCard ul {
margin: 12px 0 0;
padding-left: 18px;
color: var(--muted);
font-size: 15.5px;
/* 14→15.5 */
line-height: 1.9;
}
.priceCard li {
margin: 7px 0;
}
/* Forms */
.formGrid {
display: grid;
grid-template-columns: 1.1fr .9fr;
gap: 16px;
margin-top: 18px;
}
.form label {
display: grid;
gap: 6px;
}
.form label span {
font-size: 13px;
color: var(--muted2);
font-weight: 700;
}
/* 12→13 */
.form input,
.form textarea,
.form select {
padding: 12px 12px;
border-radius: 14px;
border: 1px solid rgba(226, 232, 240, .95);
outline: none;
font-size: 15px;
/* 14→15 */
background: #fff;
}
.form input:focus,
.form textarea:focus,
.form select:focus {
border-color: rgba(37, 99, 235, .35);
box-shadow: 0 0 0 4px rgba(37, 99, 235, .10);
}
.row2 {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
}
.agree {
display: flex;
align-items: center;
gap: 10px;
margin-top: 10px;
}
.agree input {
width: 16px;
height: 16px;
}
.sideInfo ul {
margin: 10px 0 0;
padding-left: 18px;
color: var(--muted);
font-size: 15.5px;
line-height: 1.9;
}
.sideInfo li {
margin: 7px 0;
}
.hp {
position: absolute;
left: -9999px;
width: 1px;
height: 1px;
opacity: 0;
}
/* Flash */
.flash {
border: 1px solid rgba(226, 232, 240, .95);
background: #fff;
padding: 10px 12px;
border-radius: 14px;
margin-bottom: 12px;
box-shadow: 0 8px 18px rgba(15, 23, 42, .05);
font-size: 14px;
/* 13→14 */
font-weight: 700;
}
.flash.ok {
border-color: rgba(34, 197, 94, .25);
background: rgba(34, 197, 94, .06);
color: #116c2e;
}
.flash.err {
border-color: rgba(239, 68, 68, .25);
background: rgba(239, 68, 68, .06);
color: #8a1f1f;
}
/* Footer */
.footer {
border-top: 1px solid rgba(226, 232, 240, .95);
padding: 30px 0 48px;
background: linear-gradient(#fff, rgba(241, 245, 249, .55));
}
.footerGrid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
align-items: center;
}
.footBrand {
display: flex;
align-items: center;
gap: 10px;
}
.footTitle {
font-weight: 900;
font-size: 16px;
}
.footSub {
color: var(--muted2);
font-size: 13px;
}
.footLinks {
display: flex;
gap: 10px;
flex-wrap: wrap;
justify-content: flex-end;
}
.footLinks a {
font-size: 13px;
font-weight: 700;
color: var(--muted);
padding: 9px 12px;
border-radius: 12px;
border: 1px solid rgba(226, 232, 240, .95);
background: #fff;
}
/* Responsive */
@media (max-width: 980px) {
.menu {
display: none;
}
.heroGrid {
grid-template-columns: 1fr;
}
.grid3 {
grid-template-columns: 1fr;
}
.split {
grid-template-columns: 1fr;
}
.imageGrid {
grid-template-columns: 1fr;
}
.gallery {
grid-template-columns: 1fr;
}
.pricing {
grid-template-columns: 1fr;
}
.formGrid {
grid-template-columns: 1fr;
}
.row2 {
grid-template-columns: 1fr;
}
.hero h1 {
font-size: 36px;
}
.lead {
font-size: 17px;
}
.sectionHead h2 {
font-size: 28px;
}
}
/* Modal */
.modal {
position: fixed;
inset: 0;
display: none;
z-index: 100;
}
.modal.show {
display: block;
}
.modalOverlay {
position: absolute;
inset: 0;
background: rgba(15, 23, 42, .35);
backdrop-filter: blur(3px);
}
.modalCard {
position: relative;
width: min(720px, calc(100% - 24px));
margin: 50px auto;
background: #fff;
border-radius: 20px;
border: 1px solid rgba(226, 232, 240, .95);
box-shadow: var(--shadow);
overflow: hidden;
}
.modalHead {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 10px;
padding: 14px 14px;
border-bottom: 1px solid rgba(226, 232, 240, .95);
background: linear-gradient(135deg, rgba(37, 99, 235, .06), rgba(96, 165, 250, .10));
}
.modalTitle {
font-weight: 900;
font-size: 16px;
}
.modalSub {
color: var(--muted2);
font-size: 13px;
margin-top: 2px;
}
.x {
border: 1px solid rgba(226, 232, 240, .95);
background: #fff;
width: 36px;
height: 36px;
border-radius: 14px;
cursor: pointer;
font-size: 18px;
}
.modalBody {
padding: 14px;
display: grid;
gap: 10px;
}
.modalLabel span {
font-size: 13px;
color: var(--muted2);
display: block;
margin-bottom: 6px;
font-weight: 700;
}
.modalLabel input {
width: 100%;
padding: 12px 12px;
border-radius: 14px;
border: 1px solid rgba(226, 232, 240, .95);
outline: none;
font-size: 15px;
}
.aiOut {
border: 1px solid rgba(226, 232, 240, .95);
border-radius: 16px;
background: linear-gradient(180deg, rgba(239, 246, 255, .75), #fff);
padding: 12px;
min-height: 120px;
}
.aiOutHint {
color: var(--muted2);
font-size: 14px;
}
/* =========================
LP Spacing Patch (Add to bottom)
- More whitespace
- Bigger headings
- Better rhythm
========================= */
:root {
--max: 1160px;
/* 少し広げて窮屈感を減らす */
}
/* 全体のリズム（余白） */
.container {
padding: 0 24px;
}
.section {
padding: 92px 0;
}
/* 62→92 */
.section.soft {
padding: 96px 0;
}
.hero {
padding: 72px 0 34px;
}
/* 50→72 */
.heroGrid {
gap: 44px;
}
/* 26→44 */
.sectionHead {
margin-bottom: 26px;
}
.sectionHead h2 {
font-size: 36px;
line-height: 1.25;
}
.sectionHead p {
font-size: 18px;
line-height: 1.9;
margin-top: 12px;
}
/* ヒーローの見出しを“LPの顔”にする */
.hero h1 {
font-size: 52px;
/* 46→52 */
line-height: 1.12;
margin: 18px 0 14px;
letter-spacing: -0.01em;
}
.lead {
font-size: 19px;
line-height: 1.95;
margin-top: 6px;
max-width: 62ch;
}
/* CTAまわりを広げる */
.heroActions {
margin-top: 22px;
gap: 12px;
}
.btn {
padding: 13px 18px;
border-radius: 16px;
}
.btn.sm {
padding: 11px 14px;
}
/* “詰まり”の原因：カードが小さい → カードを大きくして余白を増やす */
.card {
padding: 22px 22px;
/* 18→22 */
border-radius: 20px;
}
.card h3 {
font-size: 19px;
margin-bottom: 10px;
}
.card p {
font-size: 16px;
line-height: 1.95;
}
.grid3 {
gap: 18px;
margin-top: 26px;
}
/* 14→18 */
/* パネル・フォームも余白追加 */
.panel {
padding: 22px;
border-radius: 28px;
}
.promptBox {
padding: 16px;
border-radius: 18px;
}
.formGrid {
gap: 22px;
}
.form input,
.form textarea,
.form select {
padding: 14px 14px;
border-radius: 16px;
font-size: 16px;
}
/* “AIレポート例”はLPでは見せ場なので余白と視線誘導を強化 */
.heroCard {
padding: 18px;
}
.aiReport {
padding: 14px;
}
.aiLine {
padding: 10px 0;
}
/* 7→10 */
.aiLine {
grid-template-columns: 88px 1fr;
}
.aiLine .k,
.aiLine .v {
font-size: 14px;
}
.aiShot {
border-radius: 18px;
}
.aiShot img {
display: block;
}
/* 画像枠は大きくして“伝える” */
.imgSlot img {
height: 220px;
}
/* 190→220 */
.imgFallback {
height: 220px;
}
.gItem {
height: 220px;
}
/* 190→220 */
.imgBox {
height: 150px;
}
/* 130→150 */
.imgBox.big {
height: 280px;
}
/* 240→280 */
/* ナビのメニューも詰まるので、余白を広げる */
.menu a {
padding: 10px 12px;
}
/* 文字が詰まって見える原因：行間＋カード内の境界線 → “薄く/広く” */
.badge {
padding: 14px 14px;
}
.bSub {
line-height: 1.7;
}
/* 視線の休憩：段落間隔 */
p {
margin: 0.65em 0;
}
ul {
margin: 0.8em 0;
}
/* SP（スマホ）でも余白のリズムを維持 */
@media (max-width: 980px) {
.hero {
padding: 60px 0 24px;
}
.section {
padding: 76px 0;
}
.hero h1 {
font-size: 40px;
}
.sectionHead h2 {
font-size: 28px;
}
.lead {
font-size: 17px;
}
.grid3 {
gap: 14px;
}
}
/* AIレポートをLP用に「1ストーリー化」 */
.aiFocus {
padding: 22px;
}
.aiReport.big {
margin-top: 16px;
padding: 18px;
}
.aiBlock {
padding: 14px 0;
}
.aiBlock+.aiBlock {
border-top: 1px dashed rgba(226, 232, 240, .9);
}
.aiLabel {
font-weight: 900;
font-size: 14px;
color: #0b3aa7;
margin-bottom: 6px;
}
.aiText {
font-size: 15.5px;
line-height: 1.9;
color: var(--text);
}
.aiBlock.highlight {
background: rgba(37, 99, 235, .04);
border-radius: 14px;
padding: 16px;
margin-top: 10px;
}
/* ✅ ファイル名: /assets/style.css（末尾に追記） */
/* ===== Trial Page (Simple) ===== */
.trialBody {
background: #f6f8fb;
}
.trialHeader {
position: sticky;
top: 0;
z-index: 50;
background: rgba(255, 255, 255, .92);
backdrop-filter: blur(10px);
border-bottom: 1px solid rgba(226, 232, 240, .95);
}
.trialHeaderInner {
display: flex;
align-items: center;
justify-content: center;
padding: 16px 0;
}
.trialBrand {
display: flex;
align-items: center;
gap: 10px;
}
.trialBrandText strong {
font-size: 16px;
letter-spacing: .6px;
}
.trialBrandText span {
display: block;
font-size: 12px;
color: var(--muted2);
margin-top: 2px;
}
.trialMain {
padding: 34px 0 70px;
}
.trialWrap {
max-width: 860px;
margin: 0 auto;
display: grid;
gap: 16px;
}
.trialIntro {
text-align: center;
padding: 24px 12px 6px;
}
.trialIntro h1 {
margin: 0 0 14px;
font-size: 34px;
line-height: 1.25;
letter-spacing: -0.01em;
}
.trialList {
margin: 0 auto;
padding: 0;
list-style: none;
display: grid;
gap: 10px;
max-width: 520px;
}
.trialList li {
position: relative;
padding-left: 26px;
text-align: left;
color: var(--text);
font-size: 16px;
line-height: 1.8;
}
.trialList li:before {
content: "✓";
position: absolute;
left: 0;
top: 0;
color: var(--primary);
font-weight: 900;
}
.trialNote {
margin: 14px 0 0;
color: var(--muted);
font-size: 13px;
line-height: 1.8;
}
.trialCard {
border: 1px solid rgba(226, 232, 240, .95);
background: #fff;
border-radius: 22px;
box-shadow: var(--shadow);
padding: 22px;
max-width: 720px;
margin: 0 auto;
}
.trialCard h2 {
margin: 2px 0 14px;
text-align: center;
font-size: 22px;
}
.trialForm {
display: grid;
gap: 14px;
}
.trialLabel span {
display: flex;
align-items: center;
gap: 6px;
font-size: 13px;
color: var(--muted2);
margin-bottom: 6px;
}
.trialLabel small {
display: block;
margin-top: 7px;
font-size: 12px;
color: var(--muted2);
}
.req {
color: #ef4444;
font-weight: 900;
}
.trialAgree {
display: flex;
align-items: center;
gap: 10px;
padding: 12px 12px;
border: 1px solid rgba(226, 232, 240, .95);
border-radius: 16px;
background: rgba(241, 245, 249, .55);
font-size: 14px;
}
.trialBtn {
padding: 14px 18px;
font-size: 15px;
border-radius: 16px;
}
.trialFoot {
margin: 0;
text-align: center;
font-size: 12px;
color: var(--muted2);
}
.trialLinks {
margin-top: 12px;
text-align: center;
font-size: 12px;
color: var(--muted2);
}
.trialLinks a {
color: var(--primary);
}
.trialLinks .sep {
margin: 0 8px;
color: var(--muted2);
}
@media (max-width: 720px) {
.trialIntro h1 {
font-size: 26px;
}
.trialCard {
padding: 18px;
}
}
/* =========================
Trial Page – BIG & SIMPLE
========================= */
.trialMain {
padding: 56px 0 96px;
}
.trialIntro {
text-align: center;
padding: 20px 12px 12px;
}
.trialIntro h1 {
font-size: 42px;
line-height: 1.25;
margin-bottom: 18px;
letter-spacing: -0.01em;
}
.trialList {
margin: 0 auto 20px;
max-width: 620px;
}
.trialList li {
font-size: 18px;
line-height: 1.9;
}
.trialNote {
font-size: 14px;
margin-top: 16px;
}
/* ===== フォームを主役に ===== */
.trialCard {
margin-top: 24px;
padding: 36px 36px 40px;
max-width: 820px;
/* 横幅を広げる */
}
.trialCard h2 {
font-size: 26px;
margin-bottom: 22px;
}
/* メール入力を“一杯に大きく” */
.trialLabel input[type="email"] {
font-size: 22px;
padding: 22px 20px;
border-radius: 20px;
width: 100%;
}
/* 補足テキストも読みやすく */
.trialLabel small {
font-size: 14px;
margin-top: 10px;
}
/* 同意チェックも押しやすく */
.trialAgree {
margin-top: 18px;
padding: 16px 18px;
font-size: 16px;
}
/* CTAを“巨大ボタン”に */
.trialBtn {
margin-top: 20px;
padding: 22px 18px;
font-size: 20px;
border-radius: 20px;
box-shadow: 0 18px 40px rgba(37, 99, 235, .28);
}
/* フッタ文言 */
.trialFoot {
margin-top: 16px;
font-size: 14px;
}
/* スマホ最適化 */
@media (max-width: 720px) {
.trialIntro h1 {
font-size: 30px;
}
.trialList li {
font-size: 16px;
}
.trialCard {
padding: 26px 20px 28px;
}
.trialLabel input[type="email"] {
font-size: 18px;
padding: 18px 16px;
}
.trialBtn {
font-size: 18px;
padding: 18px 16px;
}
}