@charset "UTF-8";
/* ============================================================
COMPASS by OFFSEL — サステナビリティ開示ドラフトLP
offsel_compass.css
Figmaデザイン「開示Compass / 修正案」(node 30:2078) 準拠。
数値・色はFigmaの実測値です。PC専用（メディアクエリなし）。
============================================================ */
:root {
/* Figma実測カラー */
--green-l: #8fd535; /* グラデーション明 */
--green-d: #46a73c; /* グラデーション暗 */
--green-accent: #1b9e5a; /* アクセント緑（バッジ文字・番号等） */
--green-deep: #15804a; /* 濃アクセント（料金プラン名等） */
--grad: linear-gradient(161deg, #8fd535 0%, #46a73c 100%);
--ink: #0f2437; /* 見出し・強調 */
--body-c: #3d5468; /* 本文 */
--muted: #6b7e8f; /* 注記 */
--line: #e3e9ee; /* 罫線 */
--line2: #dde4ea; /* カード枠 */
--red: #c62828; /* 赤字文例・警告枠 */
--red-mark: #c0392b; /* ✗マーク */
--bg: #f3f9ee; /* 明るいセクション背景 */
--stage: #e8f1e1; /* 紙面ステージ背景 */
--th-bg: #f5f8fa; /* テーブルヘッダー */
/* Noto Sans JP をWebフォントで読み込み、全環境で同じ字形にする。
読み込み先は index.php の （Google Fonts, weight 400-900） */
--font: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", Meiryo, sans-serif;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
/* stickyヘッダー分だけアンカー位置を下げる */
[id] { scroll-margin-top: 76px; }
body {
font-family: var(--font);
color: var(--body-c);
background: #fff;
font-size: 16px;
line-height: 1.85;
-webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
.inner { max-width: 1120px; margin: 0 auto; padding: 0 24px; }
/* ---------- 共通パーツ ---------- */
.sec-title {
font-size: 38px;
font-weight: 700;
line-height: 1.45;
letter-spacing: .02em;
color: var(--ink);
text-align: center;
}
.sec-lead { margin-top: 16px; color: var(--body-c); text-align: center; line-height: 1.85; }
.accent { color: var(--green-accent); }
.accent-red { color: var(--red); }
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
font-weight: 700;
text-align: center;
border-radius: 999px;
cursor: pointer;
border: none;
font-family: inherit;
transition: opacity .2s, transform .2s;
}
.btn:hover { opacity: .88; transform: translateY(-1px); }
.btn-primary {
background: var(--grad);
color: #fff;
box-shadow: 0 8px 13px rgba(0, 0, 0, .13);
}
.btn-outline {
background: #fff;
color: var(--ink);
box-shadow: 0 8px 13px rgba(0, 0, 0, .13);
}
/* 緑グラデーションの小ピル（第n部 等） */
.sec-label {
display: inline-block;
background: var(--grad);
color: #fff;
font-size: 12px;
font-weight: 700;
padding: 3px 14px;
border-radius: 999px;
letter-spacing: .05em;
flex-shrink: 0;
}
/* 白地+緑枠のピル（納品物） */
.sec-label-outline {
display: inline-block;
background: #fff;
border: 1px solid #a8dcc0;
color: var(--green-accent);
font-size: 12.5px;
font-weight: 700;
padding: 4px 18px;
border-radius: 999px;
letter-spacing: .08em;
}
/* ---------- ヘッダー ---------- */
.header {
position: sticky;
top: 0;
z-index: 100;
background: rgba(255, 255, 255, .92);
backdrop-filter: blur(12px);
border-bottom: 1px solid var(--line);
}
.header-inner {
max-width: 1120px;
margin: 0 auto;
padding: 0 24px;
height: 70px;
display: flex;
align-items: center;
gap: 24px;
}
.logo { display: flex; align-items: center; }
.logo-img { display: block; width: 250px; height: auto; }
.gnav { display: flex; align-items: center; gap: 28px; margin-left: auto; }
.gnav a { font-size: 14px; font-weight: 600; color: var(--body-c); letter-spacing: -.01em; }
.gnav a:hover { color: var(--green-d); }
.gnav .btn-primary {
color: #fff;
padding: 11px 22px;
font-size: 14px;
box-shadow: 0 6px 5px rgba(143, 213, 53, .3);
}
/* ---------- ヒーロー ---------- */
.hero {
position: relative;
background: var(--bg) url("../img/Rectangle%201.png") center / cover no-repeat;
overflow: hidden;
padding: 84px 0 68px;
}
.hero-blob {
position: absolute;
mix-blend-mode: multiply;
pointer-events: none;
max-width: none;
}
.hero-blob-1 { right: 0; top: 0; width: 610px; } /* 右上 */
.hero-blob-2 { left: 0; top: 0; width: 234px; } /* 左上 */
.hero-blob-3 { left: 0; bottom: 0; width: 444px; } /* 左下 */
.hero-blob-4 { right: 44px; bottom: 0; width: 243px; } /* 右下（注記横） */
.hero .inner { position: relative; }
.hero-grid {
display: grid;
grid-template-columns: minmax(420px, 508px) minmax(0, 1fr);
gap: 40px;
align-items: start;
}
/* バッジ（白ピル + 人物イラスト） */
.hero-badge {
position: relative;
display: inline-flex;
align-items: center;
height: 35px;
margin-top: 21px; /* イラストがピル上にはみ出す分 */
background: #fff;
border-radius: 17.5px;
padding: 0 26px 0 87px;
}
.hero-badge-illust {
position: absolute;
left: 8px;
bottom: -1px;
width: 69px;
height: auto;
}
.hero-badge-text {
font-size: 16px;
font-weight: 700;
color: var(--green-accent);
letter-spacing: .093em;
white-space: nowrap;
}
.hero h1 {
margin-top: 24px;
color: var(--ink);
font-weight: 700;
letter-spacing: .014em;
}
.h1-line1 { display: block; font-size: clamp(17px, 1.36vw, 20px); line-height: 1.72; }
.h1-line1 b { font-size: clamp(24px, 1.9vw, 28px); font-weight: 700; }
.h1-line2 { display: block; font-size: clamp(38px, 3.13vw, 46px); line-height: 1.23; letter-spacing: .012em; margin-left: -.5em; white-space: nowrap; }
.h1-line3 { display: block; font-size: clamp(32px, 2.65vw, 39px); line-height: 1.45; letter-spacing: .015em; }
.hero-lead {
margin-top: 13px;
color: var(--ink);
font-size: 16px;
font-weight: 500;
line-height: 31.45px;
letter-spacing: -.027em;
}
.hero-btns { margin-top: 40px; display: flex; gap: 17px; flex-wrap: wrap; }
.hero-btns .btn {
height: 64px;
font-size: 16px;
letter-spacing: -.02em;
}
.hero-btns .btn-primary { width: 244px; background: linear-gradient(165deg, #8fd535 0%, #46a73c 100%); }
.hero-btns .btn-outline { width: 246px; }
/* 右側ビジュアル（書類2枚+価格サークル、SVG構成） */
.hero-visual {
position: relative;
margin-top: -5px;
min-width: 0;
max-width: 503px;
width: 100%;
aspect-ratio: 503 / 481;
margin-left: auto;
container-type: inline-size;
}
.hero-visual .hv-back {
position: absolute;
left: 14.3%;
top: -10%;
width: 95%;
opacity: .9;
}
.hero-visual .hv-front {
position: absolute;
left: -9.5%;
top: -3.7%;
width: 98.8%;
z-index: 2;
}
.hv-price {
position: absolute;
left: 65.6%;
top: 64%;
width: 34.4%;
aspect-ratio: 1;
border-radius: 50%;
background: #c3f583;
color: var(--ink);
z-index: 3;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
line-height: 1.3;
}
.hv-price-plan { font-size: 2.8cqw; font-weight: 800; letter-spacing: -.005em; }
.hv-price-unit { font-size: 2.4cqw; font-weight: 700; margin-top: .35em; }
.hv-price-num { font-size: 5.2cqw; font-weight: 800; letter-spacing: -.002em; margin-top: .1em; }
.hv-price-num b { font-size: 2.8cqw; font-weight: 800; }
.hv-price-tax { font-size: 2cqw; font-weight: 700; opacity: .7; margin-top: .3em; }
.hero-note {
margin-top: 40px;
text-align: center;
font-size: 13px;
color: var(--body-c);
line-height: 24.05px;
position: relative;
}
/* ---------- 課題セクション ---------- */
.problem {
position: relative;
padding: 104px 0;
color: #fff;
}
.problem-bg {
position: absolute;
inset: 0;
overflow: hidden;
}
.problem-bg img {
width: 100%;
height: 100%;
object-fit: cover;
}
.problem-bg::after {
content: "";
position: absolute;
inset: 0;
background: #0F243799;
}
.problem .inner { position: relative; }
.problem .sec-title { color: #fff; letter-spacing: .02em; }
.problem .sec-lead { color: #e2e2e2; }
.problem-cards {
margin-top: 56px;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
}
.p-card {
background: #fff;
color: var(--ink);
border-radius: 14px;
overflow: hidden;
padding-bottom: 40px;
text-align: center;
}
.p-card-img { height: 180px; }
.p-card-img img { width: 100%; height: 100%; object-fit: cover; }
.p-card h3 {
margin: 30px auto 0;
font-size: 18px;
font-weight: 700;
color: var(--ink);
letter-spacing: -.024em;
}
.p-card p {
margin: 10px auto 0;
max-width: 284px;
padding: 0 24px;
box-sizing: content-box;
font-size: 15px;
color: var(--body-c);
line-height: 27.75px;
letter-spacing: -.016em;
text-align: left;
}
/* ---------- 納品物セクション ---------- */
.deliver { background: var(--bg); padding: 104px 0; }
.deliver .inner { position: relative; }
/* 見出し右横の鉢植えイラスト */
.deliver-illust {
position: absolute;
top: 80px;
right: -12px;
width: 112px;
}
.deliver-head { text-align: center; }
.deliver-head .sec-title { margin-top: 18px; }
.deliver-cards {
margin-top: 56px;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
}
.d-card {
background: #fff;
border-radius: 14px;
padding: 26px 28px 30px;
box-shadow: 0 8px 24px rgba(0, 0, 0, .05);
text-align: left;
}
.d-card-head { display: flex; align-items: center; gap: 12px; }
.d-card h3 { font-size: 16.5px; font-weight: 700; color: var(--ink); }
.d-card p { margin-top: 12px; font-size: 13.5px; line-height: 23.63px; color: var(--body-c); letter-spacing: 0.11px }
/* ---------- パート見出し ---------- */
.part-heading {
display: flex;
align-items: center;
gap: 14px;
margin: 88px 0 0;
}
.part-heading::after {
content: "";
flex: 1;
height: 1px;
background: #d7e2cf;
}
.part-heading h2 { font-size: 19px; font-weight: 700; color: var(--ink); }
/* ---------- 第1部 スコアカード ---------- */
.scorecard-wrap {
margin-top: 22px;
background: #fff;
border: 1px solid var(--line2);
border-radius: 4px;
padding: 28px 30px;
box-shadow: 0 8px 24px rgba(0, 0, 0, .08);
}
.demo-banner {
background: #8a6d1d;
color: #fff;
font-size: 11.5px;
font-weight: 700;
letter-spacing: .023em;
padding: 7px 12px;
border-radius: 4px;
line-height: 1.65;
}
.score-caption {
margin-top: 16px;
padding-bottom: 9px;
border-bottom: 1px solid var(--line);
font-size: 11px;
color: var(--muted);
letter-spacing: .046em;
line-height: 1.85;
}
.score-intro {
margin-top: 16px;
font-size: 12.5px;
color: var(--body-c);
line-height: 23.75px;
}
.score-flow { margin-top: 10px; font-size: 12px; color: var(--muted); line-height: 22.8px; }
.score-flow strong { font-weight: 700; }
.badbox {
margin-top: 14px;
background: #fdf3f2;
border: 2px solid var(--red);
border-radius: 6px;
padding: 16px 20px;
}
.badbox h3 { color: var(--red); font-size: 14px; font-weight: 700; letter-spacing: -.01em; line-height: 1.85; }
.badbox ul { padding: 8px 0 6px; }
.badbox li {
font-size: 12.5px;
line-height: 22.5px;
color: var(--body-c);
padding-left: 20px;
margin-top: 6px;
}
.badbox li:first-child { margin-top: 0; }
.badbox li strong { color: var(--red); font-weight: 700; }
.badbox li strong::before { content: "✗ "; }
.score-table-title {
margin-top: 18px;
font-size: 13.5px;
font-weight: 700;
color: var(--ink);
line-height: 1.85;
}
.tbl { width: 100%; border-collapse: collapse; }
.tbl th, .tbl td {
border: 1px solid var(--line);
padding: 7px 9px;
text-align: left;
vertical-align: top;
font-size: 11.5px;
line-height: 21.3px;
}
.tbl thead th {
background: var(--th-bg);
color: var(--ink);
font-weight: 700;
}
.tbl td { color: var(--body-c); }
.scorecard-wrap .tbl { margin-top: 4px; }
.mark-warn { font-weight: 700; color: var(--body-c); }
.mark-bad { font-weight: 700; color: var(--red-mark); }
.refnum {
display: inline-block;
color: var(--body-c);
font-weight: 700;
text-decoration: underline;
margin-right: 6px;
}
.score-note { margin-top: 18px; font-size: 12px; color: var(--muted); line-height: 22.8px; }
.score-note strong { font-weight: 700; }
/* ---------- 第2部 紙面イメージ ---------- */
.paper-stage {
margin-top: 22px;
background: var(--stage);
border-radius: 24px;
padding: 64px 24px;
position: relative;
}
.paper-wrap {
position: relative;
max-width: 560px;
margin: 0 auto;
}
.paper {
background: #fff;
border: 1px solid var(--line);
box-shadow: 0 4px 6px rgba(15, 36, 55, .07), 0 18px 24px rgba(15, 36, 55, .09);
padding: 34px 38px 40px;
position: relative;
z-index: 2;
}
/* 紙の重なり（背面2枚。Figma実測: -0.4deg / -0.9deg・opacity 0.6） */
.paper-sheet {
position: absolute;
inset: 0;
background: #fff;
border: 1px solid var(--line);
border-radius: 3px;
pointer-events: none;
}
.paper-sheet-1 {
top: 5px;
left: -1px;
transform: rotate(.4deg);
z-index: 1;
}
.paper-sheet-2 {
top: 10px;
left: -2px;
transform: rotate(.9deg);
opacity: .6;
z-index: 0;
}
.paper-alert {
border-left: 4px solid #4a7fb5;
background: #eaf3fb;
color: #3d5468;
font-size: 11px;
line-height: 18.7px;
padding: 10px 14px;
margin-bottom: 16px;
letter-spacing: 0.06px;
}
/* .paper p (0-1-1) より詳細度を上げるため .paper を付ける（0-2-0） */
.paper .paper-caption {
text-align: right;
font-size: 10.5px;
font-weight: 400;
line-height: 19.42px;
color: #777777;
letter-spacing: 1.14px;
margin-bottom: 24px;
}
.paper h3 { font-size: 14.5px; font-weight: 700; color: var(--ink); margin: 28px 0 10px; }
.paper h3:first-of-type { margin-top: 0; }
.paper p { font-size: 13px; line-height: 2; color: var(--body-c); margin-bottom: 10px; }
.paper .red { color: var(--red); }
.paper .tbl { margin: 12px 0; }
.paper .tbl th, .paper .tbl td { font-size: 12px; padding: 8px 10px; }
.paper .tbl-note { font-size: 11px; color: var(--muted); }
.pref {
display: inline-flex;
align-items: center;
justify-content: center;
background: var(--red);
color: #fff;
font-size: 9.5px;
font-weight: 700;
border-radius: 999px;
padding: 1px 7px;
margin-left: 4px;
vertical-align: middle;
}
/* 側注カード */
.pnote {
position: absolute;
width: 210px;
background: #fff;
border-radius: 12px;
box-shadow: 0 8px 24px rgba(15, 36, 55, .08);
padding: 18px 20px;
font-size: 12.5px;
line-height: 1.9;
color: var(--body-c);
z-index: 3;
}
.pnote h4 {
display: flex;
align-items: center;
gap: 8px;
color: var(--green-accent);
font-size: 15px;
font-weight: 700;
margin-bottom: 8px;
}
.pnote h4 .n {
width: 20px;
height: 20px;
border-radius: 50%;
background: var(--green-accent);
color: #fff;
font-size: 14px;
font-weight: 700;
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
/* 紙面へつなぐ緑のコネクタ（線+点） */
.pnote::after {
content: "";
position: absolute;
top: 26px;
width: 56px;
height: 1.5px;
background: var(--green-accent);
}
.pnote::before {
content: "";
position: absolute;
top: 22.5px;
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--green-accent);
}
.pnote-1, .pnote-3 { left: 24px; }
.pnote-2, .pnote-4 { right: 24px; }
.pnote-1::after, .pnote-3::after { right: -56px; }
.pnote-1::before, .pnote-3::before { right: -60px; }
.pnote-2::after, .pnote-4::after { left: -56px; }
.pnote-2::before, .pnote-4::before { left: -60px; }
.pnote-1 { top: 9%; }
.pnote-2 { top: 24%; }
.pnote-3 { top: 55%; }
.pnote-4 { top: 74%; }
/* ---------- 読み方 ---------- */
.legend {
max-width: 760px;
margin: 48px auto 0;
background: #fff;
border-radius: 12px;
padding: 24px 30px;
text-align: center;
box-shadow: 0 8px 24px rgba(0, 0, 0, .05);
}
.legend h3 { font-size: 14.5px; font-weight: 700; color: var(--ink); margin-bottom: 10px; }
.legend p { font-size: 13.5px; margin: 4px 0; }
.legend strong { color: var(--ink); }
.chip { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 6px; }
.chip.black { background: var(--ink); }
.chip.red { background: var(--red); }
/* ---------- 第3部 出典・免責 ---------- */
.part3-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 28px;
align-items: stretch;
}
.part3-grid > div { display: flex; flex-direction: column; }
.part3-grid .part-heading { margin: 88px 0 0; }
.src-card {
margin-top: 22px;
flex: 1;
background: #fff;
border-radius: 0;
padding: 26px 28px;
box-shadow: 0 8px 24px rgba(0, 0, 0, .05);
font-size: 12.5px;
line-height: 1.9;
}
.src-card .cap {
color: var(--muted);
font-size: 11px;
letter-spacing: .046em;
border-bottom: 1px solid var(--line);
padding-bottom: 8px;
margin-bottom: 14px;
}
.src-card .tbl { margin-top: 12px; }
.src-card .tbl th, .src-card .tbl td { font-size: 11.5px; }
/* 文書・URL列は折り返さない。取得日列のみ折り返し可 */
.src-card .tbl th:nth-child(-n+2),
.src-card .tbl td:nth-child(-n+2) { white-space: nowrap; }
.src-card .tbl td:nth-child(3) { word-break: break-all; }
.src-card ol { counter-reset: d; }
.src-card ol li {
counter-increment: d;
margin-bottom: 10px;
font-size: 12.5px;
}
.src-card ol li::before { content: counter(d) ". "; font-weight: 400; }
.src-card ol li.em { font-weight: 700; color: var(--ink); }
.src-card ol li u { text-decoration: underline; }
/* ---------- 5ステップ ---------- */
.steps { position: relative; padding: 104px 0; color: #fff; }
.steps-bg { position: absolute; inset: 0; overflow: hidden; }
.steps-bg img { width: 100%; height: 100%; object-fit: cover; }
.steps-bg::after { content: ""; position: absolute; inset: 0; background: rgba(15, 36, 55, 0.6);
; }
.steps .inner { position: relative; }
.steps .sec-title { color: #fff; }
.steps .sec-lead { color: rgba(255, 255, 255, .92); }
.step-row {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
margin-top: 56px;
}
.step-row.second {
grid-template-columns: repeat(2, 1fr);
max-width: 706px;
margin: 24px auto 0;
}
.s-card {
position: relative;
background: rgba(255, 255, 255, .16);
backdrop-filter: blur(10px);
border-radius: 14px;
overflow: visible;
padding-bottom: 10px;
}
/* カード間の白い山括弧（Figma実測: 12x38・1px線・#FFFFFF・上下中央） */
.step-row .s-card + .s-card::after {
content: "";
position: absolute;
left: -18px; /* gap 24px の中央に 12px 幅を配置 */
top: 50%;
width: 12px;
height: 38px;
transform: translateY(-50%);
background: url('data:image/svg+xml;utf8,') center / contain no-repeat;
}
.s-card-img {
height: 187px;
border-radius: 14px 14px 0 0;
overflow: hidden;
}
.s-card-img img { width: 100%; height: 100%; object-fit: cover; }
.s-num {
width: 38px;
height: 38px;
margin: -17px auto 0;
position: relative;
z-index: 2;
background: #fff;
color: var(--green-accent);
font-weight: 700;
font-size: 17px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 4px 10px rgba(0, 0, 0, .18);
}
.s-card h3 { font-size: 18px; font-weight: 700; color: #fff; text-align: center; margin-top: 16px; }
.s-card p {
font-size: 14px;
color: rgba(255, 255, 255, .92);
line-height: 1.95;
padding: 10px 28px 0;
margin-bottom: 15px;
}
/* ---------- 必要書類 ---------- */
.needs { background: var(--bg); padding: 104px 0; }
.needs-table-wrap {
margin-top: 56px;
background: #fff;
}
.needs .tbl th, .needs .tbl td { font-size: 13.5px; padding: 18px 18px; line-height: 25.9px; vertical-align: middle; letter-spacing: -0.15px }
.needs .tbl thead th { background: var(--th-bg); }
/* 列幅: #/項目/効果/入手先/優先 */
.needs .tbl th:nth-child(1) { width: 5%; }
.needs .tbl th:nth-child(2) { width: 26%; }
.needs .tbl th:nth-child(3) { width: 42%; }
.needs .tbl th:nth-child(4) { width: 17%; }
.needs .tbl th:nth-child(5) { width: 8%; }
.needs .tbl td.item { color: var(--body-c); }
.needs .tbl td:nth-child(4) { color: var(--muted); }
.needs .no { color: var(--red); font-weight: 700; }
.stars { color: var(--red-mark); letter-spacing: .12em; white-space: nowrap; }
/* ---------- コンサルCTA ---------- */
.consult {
margin-top: 56px;
position: relative;
border-radius: 14px;
overflow: hidden;
color: #fff;
min-height: 420px;
background: linear-gradient(160deg, #123a28 8.49%, #0f2437 91.51%);
}
.consult-bg { position: absolute; inset: 0; }
.consult-bg img {
position: absolute;
left: 150px; /* 写真を右に寄せる（左の余白はグラデーションが覆う） */
width: 100%;
height: 100%;
object-fit: cover;
}
.consult-bg::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(90deg, #0f2e21 30.18%, rgba(15, 46, 33, .870714) 39.91%, rgba(15, 46, 33, .772391) 49.49%, rgba(15, 46, 33, 0) 80.88%);
}
.consult-body { position: relative; padding: 56px 46px 56px 84px; max-width: 720px; }
.consult-tag { font-size: 13px; font-weight: 700; color: var(--green-l); letter-spacing: .12em; }
.consult-tag::before { content: "● "; font-size: 13px; letter-spacing: .3em; }
.consult h3 { margin-top: 14px; font-size: 24px; font-weight: 700; line-height: 1.65; }
.consult p { margin-top: 18px; font-size: 15px; color: rgba(255, 255, 255, .9); line-height: 2.05; }
.consult p strong { color: #fff; font-weight: 700; }
.consult .accent-red { color: #f3b0a8; }
.consult .btn {
margin-top: 26px;
width: 269px;
height: 62px;
padding: 16px 32px;
font-size: 15px;
}
/* ---------- 料金 ---------- */
.pricing {
position: relative;
overflow: hidden;
padding: 104px 0;
color: #fff;
background: linear-gradient(160deg, #8cd336 0%, #77c637 30%, #59b53a 65%, #46a73c 100%);
}
.bg-blob {
position: absolute;
pointer-events: none;
max-width: none;
}
/* 背景ブロブ: Figma実測（フレーム幅1470px基準）
右上・左下の大型ブロブ(777.2x539.7)はフレーム外へはみ出す配置のため、
可視部分だけを書き出したPNG（直線エッジ入り）を角に直付けする。
※ opacity 0.6 はPNG書き出し時に焼き込み済みのためCSSでは指定しない */
.pricing .blob-tr { width: 522px; top: 0; right: 0; } /* 直角＝右上角 */
.pricing .blob-bl { width: 584px; bottom: 0; left: 0; } /* 直角＝左下角 */
.pricing .blob-sm { width: 243px; }
.pricing .blob-tl { top: 27px; left: -58px; }
.pricing .blob-br { bottom: 24px; right: 68px; }
.pricing .inner { position: relative; }
.pricing .sec-title { color: #fff; }
.pricing .sec-lead { color: rgba(255, 255, 255, .95); }
.price-card {
position: relative;
max-width: 516px;
margin: 56px auto 0;
background: #fff;
color: var(--ink);
border-radius: 18px;
box-shadow: 0 24px 60px rgba(15, 60, 20, .25);
padding: 44px 48px;
text-align: center;
}
.price-card .plan {
font-size: 14px;
font-weight: 700;
color: var(--green-deep);
letter-spacing: .1em;
}
.price-card .amount {
margin-top: 10px;
font-size: 58px;
font-weight: 800;
color: var(--ink);
line-height: 1.25;
letter-spacing: .01em;
}
.price-card .amount span { font-size: 22px; font-weight: 800; }
.price-card .unit { margin-top: 4px; font-size: 12.5px; color: var(--muted); }
.price-card ul {
margin-top: 28px;
border-top: 1px solid #e9eef2;
padding-top: 26px;
text-align: left;
}
.price-card li {
position: relative;
font-size: 14px;
color: var(--body-c);
margin-bottom: 16px;
letter-spacing: -0.23px;
padding-left: 28px;
line-height: 1.75;
}
.price-card li::before {
content: "✓";
position: absolute;
left: 4px;
color: var(--green-accent);
font-weight: 700;
}
.price-card li b { color: var(--ink); font-weight: 700; }
.price-card .card-cta {
display: block;
border-top: 1px solid #e9eef2;
padding-top: 30px;
margin-top: 10px;
}
.price-card .btn { padding: 15px 40px; font-size: 16px; }
.price-card .fine {
margin-top: 26px;
text-align: left;
font-size: 12.5px;
color: var(--muted);
line-height: 1.95;
}
.price-card .fine b { color: var(--body-c); font-weight: 700; }
.price-illust {
position: absolute;
right: -110px;
bottom: -6px;
width: 126px;
}
/* ---------- フォーム ---------- */
.contact { background: var(--bg); padding: 104px 0; }
.contact .sec-lead strong { font-weight: 700; }
.form-card {
max-width: 640px;
margin: 56px auto 0;
background: #fff;
border-radius: 16px;
box-shadow: 0 8px 24px rgba(0, 0, 0, .05);
padding: 44px 40px;
}
.f-row { margin-bottom: 26px; }
.f-label { display: block; font-size: 14px; font-weight: 700; color: var(--ink); margin-bottom: 10px; }
.req { color: var(--red); font-size: 12px; font-weight: 700; margin-left: 8px; }
.f-input, .f-textarea {
width: 100%;
border: 1px solid var(--line2);
border-radius: 8px;
padding: 13px 15px;
font-size: 14px;
font-family: inherit;
color: var(--ink);
background: #f8fafc;
}
.f-input::placeholder, .f-textarea::placeholder { color: #9aa9b5; }
.f-input:focus, .f-textarea:focus {
outline: 2px solid rgba(70, 167, 60, .35);
border-color: var(--green-d);
background: #fff;
}
.f-textarea { min-height: 118px; resize: vertical; }
.f-radio { display: flex; flex-direction: column; gap: 10px; font-size: 14px; color: var(--ink); }
.f-radio label { display: flex; align-items: flex-start; gap: 9px; cursor: pointer; line-height: 1.7; }
.f-radio input { margin-top: 5px; }
.f-error { margin-top: 6px; font-size: 12.5px; font-weight: 700; color: var(--red); }
.form-card .btn { width: 100%; padding: 15px 0; font-size: 15px; margin-top: 6px; }
.form-note { margin-top: 20px; font-size: 12px; color: var(--muted); line-height: 1.95; }
.form-note a { color: var(--muted); text-decoration: underline; }
/* ---------- 出発点セクション ---------- */
.next {
position: relative;
overflow: hidden;
/* 上は見出し上の空き(padding+グリッド内の余白)で約150pxに見えるため、下も150pxで揃える */
padding: 104px 0 150px;
color: #fff;
background: linear-gradient(120deg, #8cd336 0%, #79c737 35%, #5db73a 70%, #46a73c 100%);
}
/* 背景ブロブ: Figma実測（フレーム幅1470px基準）
大型ブロブ(777x540, angle:-180deg)はフレーム外へはみ出す配置のため、
可視部分に相当する切り出しPNG（直線エッジ入り）を左右反転して角に直付けする。
右上小: top 11033.31 / left 1052 → top 33px / right 175px */
.next .blob-tl { width: 522px; top: 0; left: 0; transform: scaleX(-1); } /* 直角＝左上角 */
.next .blob-sm { width: 243px; }
.next .blob-tr { top: 33px; right: 175px; }
.next .blob-br { width: 584px; bottom: 0; right: 0; transform: scaleX(-1); } /* 直角＝右下角 */
.next .inner { position: relative; }
/* 下のカード群(.next-cards, 848px)と左右端を揃える */
.next-grid {
display: grid;
/* 画像列は、見出し(約427px)が折り返さない範囲で最大の394px */
grid-template-columns: 1fr minmax(300px, 394px);
gap: 24px;
align-items: center;
max-width: 848px;
margin: 0 auto;
}
.next h2 { font-size: 38px; font-weight: 700; line-height: 1.5; letter-spacing: .02em; }
.next-lead { margin-top: 20px; font-size: 15px; line-height: 2.1; color: #fff; font-weight: 700; }
.brand-chip {
display: inline-flex;
align-items: center;
background: #fff;
border-radius: 6px;
padding: 4px 10px;
vertical-align: middle;
margin-right: 6px;
}
.brand-chip img { height: 18px; width: auto; }
.next-visual { min-width: 0; }
/* margin-right: SVG内部の右余白(36/503px≒7%)を相殺し、見た目の右端をカードに揃える */
.next-visual img { width: 100%; max-width: 410px; margin-left: auto; margin-right: -28px; }
.next-cards {
max-width: 848px;
margin: 12px auto 0;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 24px;
}
.n-card {
background: #fff;
color: var(--ink);
border-radius: 14px;
padding: 28px 30px;
}
.n-brand img { height: 27px; width: auto; display: block; }
.n-card h3 { margin-top: 16px; font-size: 15.5px; font-weight: 700; color: var(--ink); }
.n-card p { margin-top: 8px; font-size: 13.5px; color: var(--body-c); line-height: 1.95; }
.n-card a {
display: inline-block;
margin-top: 14px;
color: var(--green-accent);
font-size: 13.5px;
font-weight: 700;
}
/* 外部リンクアイコン（四角+矢印、--green-accent と同色） */
.n-card a::after {
content: "";
display: inline-block;
width: 13px;
height: 13px;
margin-left: 6px;
vertical-align: -1px;
background: url('data:image/svg+xml;utf8,') center / contain no-repeat;
}
/* ---------- フッター ---------- */
.footer { background: var(--ink); color: #c6d2dc; padding: 52px 0 40px; }
.footer-inner {
max-width: 1120px;
margin: 0 auto;
padding: 0 24px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 24px;
}
.footer-logo-chip {
display: inline-flex;
align-items: center;
background: #fff;
border-radius: 8px;
padding: 9px 16px;
}
.footer-logo-chip img { height: 22px; width: auto; }
.f-nav { display: flex; gap: 30px; flex-wrap: wrap; }
.f-nav a { font-size: 13px; color: #c6d2dc; }
.f-nav a:hover { color: #fff; }
.copyright {
max-width: 1120px;
margin: 40px auto 0;
padding: 0 24px;
font-size: 12px;
color: #8296a5;
}
/* ----------------------------------------------------------
狭めのPC幅（〜1120px）への追従。
コンテンツ幅が縮み、紙面の側注が本体と重なるのを防ぐ。
---------------------------------------------------------- */
@media (max-width: 1120px) {
.pnote {
position: static;
width: auto;
max-width: 560px;
margin: 0 auto 20px;
}
.pnote::before, .pnote::after { display: none; }
.paper-stage { padding: 40px 24px; }
.consult-body { max-width: 52%; }
}
/* ----------------------------------------------------------
モバイル用スタイルは未実装です。
モバイル版デザイン支給後に @media ブロックとして追加してください。
---------------------------------------------------------- */