/* CKPR ホームページの見た目（CSS）
2026-10-29、index.html から切り出した。HTMLは public/index.html。
見た目を直すときは、このファイルだけを読めば足ります。
色の正本はこのファイルの :root です。 */
/* 目次（行番号は 2026-10-29 時点。ずれたら grep で探してください）
37 ナビ
113 スマホ・タブレット用メニュー
171 セクションのリズム（背景の濃淡・余白の強弱）
201 ヒーロー
435 ヒーローの登場モーション
457 Brand (CKPR)
555 ロゴのフェードインモーション
590 Troubles（お悩み）
624 見出し共通
644 Philosophy
653 マーケティング診断（入口商品として独立）
699 Services
701 AI4段階フロー
812 Approach
832 Why / Process
889 Archive（思考の記録）
961 About（会社概要）
989 FAQ
1009 Price
1054 Profile
1139 Declaration
1171 Cafe Produce
1192 Works
1204 Contact
1207 奥行き（2026-10-28）光は左上から。影は右下へ、少し青みのあるグレーで
1291 CTAボタン（共通）
1325 スマホ用 追従ご相談ボタン
*/
:root {
--ink: #242424; /* 墨色 */
--paper: #f4f4f4; /* 2026-10-26 地の色をここまで明るく（#e1e1e1→#ececec→） */
--paper-deep: #e3e3e3;
--paper-alt: #e4e4e4; /* セクション背景のリズム用 */
--accent: #7b2d3f; /* ワインカラー（ボルドー） */
--accent-deep: #5a2130;
--france: #1B3DB0; /* DIC-F38 BLEU DUR。ボタン2つに使用 */
--emerald: #14e89c; /* エメラルド。暗さを和らげる差し色（メニュー下の線など） */
--emerald-deep: #0f9e6a; /* 白抜き文字を載せる用のエメラルドグリーン（2026-09-23 #0b7d55から明るく） */
--sky: #3FA9E0; /* スカイブルー。メニューで選んだ項目のにじみ（光）に使用 */
--line: #d7d7d7; /* 細い罫線＝薄いグレー */
--muted: #575757; /* 2026-09-22 背景を濃くしたのに合わせて濃く（#848484→） */
}
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
background: var(--paper);
color: var(--ink);
font-family: 'Noto Sans JP', sans-serif;
font-weight: 400;
line-height: 2;
letter-spacing: 0.06em;
-webkit-font-smoothing: antialiased;
/* 句読点のぶら下がり組み（Safari系が対応）＋行末に1文字だけ残さない（Chrome系） */
hanging-punctuation: allow-end;
text-wrap: pretty;
}
.serif { font-family: 'Shippori Mincho', serif; }
.en { font-family: 'Cormorant Garamond', serif; letter-spacing: 0.22em; }
/* ───── ナビ ───── */
nav {
position: fixed; top: 0; left: 0; right: 0; z-index: 100;
display: flex; justify-content: space-between; align-items: center;
padding: 22px 5vw;
}
/* 背景（すりガラス）は疑似要素に持たせる。
nav 自身に backdrop-filter を付けると、中の position:fixed（メニュー）が
ナビの高さの中に閉じ込められてしまうため。 */
nav::before {
content: ""; position: absolute; inset: 0; z-index: -1;
background: color-mix(in srgb, var(--paper) 88%, transparent);
backdrop-filter: blur(8px);
transition: background .3s;
}
/* メニュー下のエメラルドの帯。下端がいちばん濃く、上へ向かってぼかしで消える */
nav::after {
content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 11.8px; /* 82%版（14.8px）のさらに80% */
/* C案「なめらか」：下はしっかり、上に向かって自然にほどける */
background: linear-gradient(to top,
var(--emerald) 0,
color-mix(in srgb, var(--emerald) 85%, transparent) 10%,
color-mix(in srgb, var(--emerald) 62%, transparent) 25%,
color-mix(in srgb, var(--emerald) 38%, transparent) 45%,
color-mix(in srgb, var(--emerald) 18%, transparent) 65%,
color-mix(in srgb, var(--emerald) 6%, transparent) 82%,
transparent 100%);
pointer-events: none;
}
/* ヒーロー（白背景）の上にいる間は、ナビも白に合わせる */
nav.at-hero::before {
background: color-mix(in srgb, #ffffff 88%, transparent);
}
/* 濃い色のセクション（診断・お約束）の上では、ナビも暗く反転させる */
nav.on-dark::before {
background: color-mix(in srgb, var(--ink) 80%, transparent);
border-bottom-color: rgba(244, 244, 244, 0.16);
}
nav.on-dark ul a { color: #c9c9c9; }
nav.on-dark ul a:hover,
nav.on-dark ul a:focus-visible,
nav.on-dark ul a:active {
color: #e3aebb;
text-shadow:
0 0 2px rgba(227, 174, 187, .55),
0 0 5px rgba(227, 174, 187, .38),
0 0 10px rgba(227, 174, 187, .20);
}
nav .logo { display: block; }
nav .logo img { height: 24px; display: block; mix-blend-mode: multiply; }
/* 反転時は白抜きロゴに差し替え（乗算合成だと白背景が箱に見えるため） */
nav .logo .logo-light { display: none; mix-blend-mode: normal; }
nav.on-dark .logo .logo-dark { display: none; }
nav.on-dark .logo .logo-light { display: block; }
nav ul { display: flex; gap: 26px; list-style: none; }
nav ul a {
font-size: 12px; letter-spacing: 0.16em; text-decoration: none;
color: var(--muted); white-space: nowrap;
transition: color .3s, text-shadow .3s;
}
/* 触れたとき・押したときはフランスブルー（読み物への案内と同じ色）。
文字のまわりにスカイブルーのにじみを出す。四角い玉ではなく
文字そのものの輪郭に沿って光らせたいので、影を三重に重ねている。 */
nav ul a:hover,
nav ul a:focus-visible,
nav ul a:active {
color: var(--france);
text-shadow:
0 0 2px rgba(63, 169, 224, .55),
0 0 5px rgba(63, 169, 224, .38),
0 0 10px rgba(63, 169, 224, .20);
}
nav ul a:focus-visible { outline: 1px solid var(--france); outline-offset: 4px; }
/* 項目が9つになったので、狭い画面ではロゴに接しないよう間隔だけ詰める */
@media (max-width: 1000px) { nav ul { gap: 18px; } }
/* ───── スマホ・タブレット用メニュー ───── */
.nav-toggle {
display: none; position: relative; z-index: 2;
width: 44px; height: 44px; padding: 0; margin-right: -10px;
background: none; border: 0; cursor: pointer;
align-items: center; justify-content: center;
}
.nav-toggle span {
position: absolute; left: 11px; width: 22px; height: 1px;
background: var(--ink); transition: transform .3s, opacity .2s, background .3s;
}
.nav-toggle span:nth-child(1) { transform: translateY(-6px); }
.nav-toggle span:nth-child(3) { transform: translateY(6px); }
nav.on-dark .nav-toggle span { background: var(--paper); }
nav.open .nav-toggle span:nth-child(1) { transform: rotate(45deg); }
nav.open .nav-toggle span:nth-child(2) { opacity: 0; }
nav.open .nav-toggle span:nth-child(3) { transform: rotate(-45deg); }
nav.open .nav-toggle span { background: var(--ink); }
.nav-backdrop {
display: none; position: fixed; inset: 0; z-index: 0;
background: rgba(36, 36, 36, 0.38);
opacity: 0; transition: opacity .35s;
}
@media (max-width: 860px) {
.nav-toggle { display: inline-flex; }
nav.open .nav-backdrop { display: block; opacity: 1; }
nav ul {
position: fixed; top: 0; right: 0; bottom: 0; z-index: 1;
width: min(80vw, 300px);
flex-direction: column; justify-content: center; gap: 6px;
padding: 40px 34px;
background: var(--paper);
border-left: 1px solid var(--line);
box-shadow: -20px 0 60px rgba(36, 36, 36, 0.12);
transform: translateX(101%);
transition: transform .38s cubic-bezier(.4, 0, .2, 1);
overflow-y: auto;
}
nav.open ul { transform: none; }
nav ul a {
display: block; padding: 13px 0; font-size: 14px;
letter-spacing: 0.22em; color: var(--ink);
}
/* 反転中でもメニューを開いたら中は生成りなので、文字色は墨に戻す */
nav.on-dark ul a { color: var(--ink); }
nav ul a:hover, nav ul a:focus-visible, nav ul a:active {
color: var(--accent); text-shadow: none;
}
}
@media (prefers-reduced-motion: reduce) {
nav ul, .nav-backdrop, .nav-toggle span { transition: none; }
}
section { padding: 110px 8vw; max-width: 1080px; margin: 0 auto; }
/* ───── セクションのリズム（背景の濃淡・余白の強弱） ───── */
.price, .about, .contact {
background: var(--paper-alt);
}
/* 「頭の中をお見せします」は濃→薄のグラデーション（上から下へ） */
.why { background: linear-gradient(to bottom, var(--paper-alt), var(--paper)); }
/* 「名に込めた想い」は白→ベージュのグラデーション（上から下へ、他セクションと逆向き） */
.brand { background: linear-gradient(to bottom, #ffffff, var(--paper-alt)); }
.brand { padding-top: 150px; padding-bottom: 150px; }
.about { padding-top: 84px; padding-bottom: 84px; }
/* 「CKPRについて」＋「名に込めた想い」のセクションは白地に（2026-09-17） */
.about { background: #ffffff; }
/* 「お気軽にご相談ください」のセクションも白地に（2026-09-17） */
.contact { background: #ffffff; }
/* 「料金の目安」のセクションは「こんなお悩みありませんか」と同じく、ページの地色のまま（2026-09-17） */
.price { background: #ffffff; } /* 2026-09-22 CHOURI指示で真っ白に */
.faq { padding-top: 90px; padding-bottom: 90px; }
.faq { background: #eeeeee; } /* 2026-09-22 ページの地色（#e1e1e1）より5%明るく */
/* 色をつけたセクションは、背景だけブラウザの端まで敷く（中身の位置は他セクションと揃える） */
.brand, .price, .why, .about, .contact, .diagnosis, .archive, .faq {
max-width: none;
padding-left: 0;
padding-right: 0;
}
.bleed-inner {
width: 100%; max-width: 1080px; margin: 0 auto;
padding: 0 8vw; box-sizing: border-box;
}
/* ───── ヒーロー ───── */
.hero {
/* 見出しの実サイズ。ビジュアルの天端合わせに使うので変数にしている */
--h1-size: clamp(42px, 4.4vw, 56px);
/* 見出し行の「行送りの上半分＋字面までの余白」＝ 0.461em（実測値）。
en-label(26px)＋その下余白(34px)＝60px を足すと、
コピー列の先頭から見出しの字面天端までの距離になる */
--h1-face-top: calc(60px + var(--h1-size) * 0.461);
min-height: 92vh;
max-width: none;
padding-left: 0; padding-right: 0;
display: flex; flex-direction: column; justify-content: center;
padding-top: 140px;
background: #ffffff;
}
.hero-inner {
width: 100%;
max-width: 1180px;
margin: 0 auto;
padding: 0 6vw;
box-sizing: border-box;
display: grid;
grid-template-columns: minmax(0, 1.15fr) minmax(340px, 0.85fr);
gap: clamp(54px, 7vw, 110px);
align-items: start;
}
.hero-copy { position: relative; z-index: 2; }
.hero-visual {
position: relative;
width: 100%;
max-width: 440px;
aspect-ratio: 4 / 5;
justify-self: end;
overflow: hidden;
/* 見出し「その魅力、」の字面天端に、パネルの上端をそろえる */
margin-top: var(--h1-face-top);
/* 逆光：右上に光源を置き、手前に向かって深く落とす */
background:
radial-gradient(
ellipse 58% 40% at 69% 33%,
rgba(250, 250, 250, 0.34) 0%,
rgba(248, 248, 248, 0.14) 32%,
rgba(244, 244, 244, 0.04) 58%,
transparent 78%
),
linear-gradient(
148deg,
#574848 0%, /* DIC-F84 CACHOU（カシュー）。2026-09-17 黒から置き換え */
#5f4f4f 30%,
#736262 58%,
#978585 86%,
#b3a3a2 100%
);
box-shadow: 0 36px 90px rgba(36, 36, 36, 0.18);
opacity: 0;
transform: translateX(24px);
animation: visualEnter 1.2s 0.55s ease forwards;
}
/* CKPRマーク：全体が入るところまで引き、逆光で光源側から明るく抜けさせる */
.hero-visual::before {
content: "";
position: absolute;
inset: 0;
/* 右上の光源に近いほど明るく、遠ざかるほど闇に沈む＝逆光の当たり方。
全体はかすかに浮かぶ程度にとどめ、光源側だけわずかに抜ける */
background:
radial-gradient(
ellipse 82% 130% at 68% 26%,
rgba(252, 252, 252, 0.34) 0%,
rgba(248, 248, 248, 0.22) 30%,
rgba(244, 244, 244, 0.13) 54%,
rgba(244, 244, 244, 0.07) 76%,
rgba(244, 244, 244, 0.04) 100%
);
/* マスクは透明部分（アルファ）で切り抜くため、透過のある rose 版を使う */
-webkit-mask: url("CKPR_mark_rose.png") no-repeat 110% 62% / 74% auto;
mask: url("CKPR_mark_rose.png") no-repeat 110% 62% / 74% auto;
/* 文字の周りにごくわずかな滲み（逆光のにじみ） */
filter: drop-shadow(0 0 20px rgba(245, 245, 245, 0.10));
transform: rotate(-4deg);
}
/* 繊細な光 */
.hero-visual::after {
content: "";
position: absolute;
width: 55%;
height: 1px;
top: 28%;
right: 8%;
background: linear-gradient(
90deg,
transparent,
rgba(244, 244, 244, 0.52),
transparent
);
transform: rotate(-38deg);
transform-origin: right center;
}
.trace {
position: absolute;
display: block;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(244, 244, 244, 0.34));
transform-origin: right center;
}
.trace-01 { width: 58%; top: 42%; right: 20%; transform: rotate(16deg); }
.trace-02 { width: 46%; top: 54%; right: 20%; transform: rotate(-4deg); }
.trace-03 { width: 64%; top: 66%; right: 20%; transform: rotate(-24deg); }
/* 価値が集約される一点 */
.focus-point {
position: absolute;
width: 9px;
height: 9px;
right: calc(20% - 4px);
top: calc(54% - 4px);
border-radius: 50%;
background: #8f354c;
box-shadow:
0 0 0 7px rgba(123, 45, 63, 0.14),
0 0 28px rgba(160, 67, 91, 0.48);
}
@keyframes visualEnter {
to { opacity: 1; transform: translateX(0); }
}
/* 2カラムで最も窮屈になる帯は、ビジュアル側を少し狭めて本文に幅を渡す */
@media (min-width: 821px) and (max-width: 950px) {
.hero-inner { grid-template-columns: minmax(0, 1.15fr) minmax(260px, 0.85fr); }
}
/* 縦並びに切り替え（タブレット以下）。ビジュアルは画面幅いっぱいに広げる */
@media (max-width: 820px) {
.hero-inner {
/* minmax(0, …) にしないと、改行しない長い行に列が引っ張られて
ページが画面より広がり、スマホで横揺れする */
grid-template-columns: minmax(0, 1fr);
gap: 52px;
/* 左右の余白は本文側だけに持たせ、ビジュアルは端まで届かせる */
padding: 0;
}
.hero-copy { padding: 0 6vw; }
.hero-visual {
width: 100%;
max-width: none;
justify-self: stretch;
aspect-ratio: 16 / 9;
/* 縦積みでは天端合わせは不要 */
margin-top: 0;
}
/* 縦積みでは端まで届くので、横にずらす登場演出はやめてフェードのみにする
（横ズレのあいだ一瞬だけ横スクロールが出るのを防ぐ） */
.hero-visual {
transform: none;
animation: visualFade 1.2s 0.55s ease forwards;
}
/* 縦積みでは SCROLL の余白を詰める */
.hero .scroll { margin-top: 44px; }
.hero .scroll::after { height: 34px; }
}
@keyframes visualFade {
to { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
.hero-visual { opacity: 1; transform: none; animation: none; }
}
.hero .en-label {
font-size: 13px; color: var(--accent); letter-spacing: 0.4em;
margin-bottom: 34px;
}
.hero h1 {
font-family: 'Shippori Mincho', serif;
font-weight: 500;
font-size: var(--h1-size);
line-height: 1.75;
letter-spacing: 0.1em;
}
.hero h1 .l1, .hero h1 .l2 { display: block; white-space: nowrap; }
/* 「その魅力、」と「伝え方で変わる」の行間を75%に（2026-09-17）。
行送り1.75の行間0.75em → 0.5625em。1行目の位置はそのまま（写真パネルの天端合わせを崩さない）ため、2行目だけを引き上げる */
.hero h1 .l2 { margin-top: -0.1875em; }
/* 2カラムになったぶん、リード文は本文列に収まる大きさに */
.hero h1 .thin { display: block; font-size: 0.42em; color: var(--muted); margin-top: 26px; font-weight: 400; letter-spacing: 0.1em; }
.hero h1 .thin .tl { display: block; white-space: nowrap; }
/* スマホでは見出しを125%に（1行の折り返しは増やさない範囲）。
上限を42pxにして、この指定が切れる幅でも大きさが急に変わらないようにしている。
リード文は最長の行「事業・ブランド・Web・…整えます。」が画面に収まる 3.45vw まで
（3.9vw だと画面より長くなり横揺れの原因になっていた） */
@media (max-width: 620px) {
.hero h1 { font-size: min(8.4vw, 42px); }
.hero h1 .thin { font-size: min(3.45vw, 21.8px); letter-spacing: 0.08em; margin-top: 22px; }
.hero h1 .thin .tl { white-space: nowrap; }
}
/* 2カラムのまま幅が狭くなる範囲は、リード文がはみ出すので少し詰める */
@media (min-width: 821px) and (max-width: 1024px) {
.hero h1 .thin { font-size: 0.37em; letter-spacing: 0.05em; }
}
/* 大きい画面では見出しが上限まで育つ一方、本文列の幅は頭打ちになるため、リード文を詰める */
@media (min-width: 1025px) {
.hero h1 .thin { font-size: 0.34em; letter-spacing: 0.06em; }
}
.hero .scroll {
margin-top: 70px; font-size: 11px; letter-spacing: 0.3em; color: var(--muted);
}
.hero .scroll::after {
content: ""; display: block; width: 1px; height: 56px;
background: var(--muted); margin-top: 14px; margin-left: 2px;
}
/* ── ヒーローの登場モーション ── */
.hero .en-label,
.hero h1,
.hero h1 .thin,
.hero .scroll {
opacity: 0;
animation: heroRise 1.2s ease forwards;
}
.hero .en-label { animation-delay: .15s; }
.hero h1 { animation-delay: .45s; }
.hero h1 .thin { animation-delay: 1.05s; }
.hero .scroll { animation-delay: 1.7s; }
@keyframes heroRise {
from { opacity: 0; transform: translateY(14px); }
to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
.hero .en-label, .hero h1, .hero h1 .thin, .hero .scroll {
opacity: 1; animation: none;
}
}
/* ───── Brand (CKPR) ───── */
.brand { border-top: 1px solid var(--line); text-align: center; }
/* 主見出しの直下に置く、CKPRの目指すところ */
.brand .elevation {
font-family: 'Shippori Mincho', serif; font-weight: 500;
font-size: clamp(18px, 2.5vw, 24px); letter-spacing: 0.12em; line-height: 2;
color: var(--accent-deep);
max-width: 760px; margin: -24px auto 30px;
}
.brand .elevation .ln { white-space: nowrap; }
@media (max-width: 620px) {
.brand .elevation { font-size: 4.4vw; letter-spacing: 0.08em; margin-top: -14px; }
/* 狭い画面では折り返しを許可する（1行に収まらないため） */
.brand .elevation .ln { display: block; white-space: normal; }
}
.brand .sec-head { text-align: left; }
/* OUR APPROACH（#ckpr）のコピーはすべて左揃え（2026-09-17） */
#ckpr { text-align: left; }
#ckpr .elevation, #ckpr .flow-note, #ckpr .statement { margin-left: 0; margin-right: 0; }
.words {
display: grid; grid-template-columns: repeat(4, 1fr);
gap: 34px 20px; margin: 24px auto 72px; max-width: 860px;
}
@media (max-width: 640px) {
.words { grid-template-columns: repeat(2, 1fr); }
}
.word .en-word {
display: block; font-family: 'Cormorant Garamond', serif;
font-size: 31px; font-weight: 500; letter-spacing: 0.1em;
}
.word .init {
color: var(--accent); display: inline-block;
animation: ckprFlash 5.2s infinite;
}
.word:nth-child(1) .init { animation-delay: 0.6s; }
.word:nth-child(2) .init { animation-delay: 1.05s; }
.word:nth-child(3) .init { animation-delay: 1.5s; }
.word:nth-child(4) .init { animation-delay: 1.95s; }
/* ひかりは「近く・中く・遠く」の三重。芯を強くし、外へ向かって淡く消す。
一瞬で通り過ぎると光ったことに気づけないので、いちばん明るいところを
少しだけ（約0.25秒）保ってから、ゆっくり戻す。 */
@keyframes ckprFlash {
0%, 100% { color: var(--accent); text-shadow: none; transform: none; }
3% {
color: #d76a86; transform: scale(1.16);
text-shadow:
0 0 4px rgba(215, 106, 134, 0.85),
0 0 12px rgba(215, 106, 134, 0.65),
0 0 28px rgba(215, 106, 134, 0.45);
}
8% {
color: #d76a86; transform: scale(1.15);
text-shadow:
0 0 4px rgba(215, 106, 134, 0.80),
0 0 12px rgba(215, 106, 134, 0.60),
0 0 28px rgba(215, 106, 134, 0.40);
}
16% { color: var(--accent); text-shadow: none; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
.word .init { animation: none; }
}
.word .gloss {
display: block; font-size: 13px; color: var(--muted);
margin-top: 10px; letter-spacing: 0.22em;
}
.brand .statement {
font-family: 'Shippori Mincho', serif;
font-size: 18px; line-height: 2.5; letter-spacing: 0.12em;
max-width: 640px; margin: 0 auto;
}
.brand .statement em {
font-style: normal; color: var(--accent-deep);
font-family: 'Noto Sans JP', sans-serif; font-weight: 400; /* ゴシック体（2026-09-17）。色はそのまま */
}
.brand .statement .ln { white-space: nowrap; }
/* 4文字 → 仕事の流れ、をつなぐ一文（「CKPRならどう変えられるか」でも共用） */
.flow-note {
font-family: 'Shippori Mincho', serif;
font-size: 15px; letter-spacing: 0.1em; line-height: 2.2;
color: var(--muted); max-width: 720px; margin: 0 auto 46px;
}
.flow-note .ln { white-space: nowrap; }
@media (max-width: 560px) {
.flow-note { font-size: 3.6vw; }
.flow-note .ln { display: block; }
}
@media (max-width: 480px) {
.brand .statement { font-size: 4.3vw; }
/* 狭い画面では折り返しを許可する（1行に収まらないため） */
.brand .statement .ln { display: block; white-space: normal; }
.brand .statement .d-br { display: none; }
}
.brand-logo {
display: block; margin: 6px auto 64px;
width: min(430px, 74vw); mix-blend-mode: multiply;
}
/* ── ロゴのフェードインモーション ── */
.brand-logo-anim {
position: relative;
aspect-ratio: 1030 / 413; /* CKPR_trim.png の縦横比 */
}
.brand-logo-anim img {
position: absolute; inset: 0;
width: 100%; height: 100%;
mix-blend-mode: multiply;
opacity: 0; filter: blur(10px);
}
.brand-logo-anim.play img {
animation: ckprAppear 1.4s ease forwards;
animation-delay: var(--d, 0s);
}
@keyframes ckprAppear {
to { opacity: 1; filter: blur(0); }
}
/* タグラインはタイプライター風（左から1文字ずつ） */
.brand-logo-anim img.type {
opacity: 1; filter: none;
clip-path: inset(82.3% 100% 0 0); /* 最初は全部隠す */
}
.brand-logo-anim.play img.type {
animation: ckprType 2.4s steps(29, end) forwards;
animation-delay: var(--d, 0s);
}
@keyframes ckprType {
to { clip-path: inset(82.3% 0 0 0); }
}
@media (prefers-reduced-motion: reduce) {
.brand-logo-anim img { opacity: 1; filter: none; animation: none; }
.brand-logo-anim img.type { clip-path: inset(82.3% 0 0 0); }
}
/* ───── Troubles（お悩み） ───── */
.troubles { border-top: 1px solid var(--line); }
.troubles .head-copy {
font-family: 'Shippori Mincho', serif; font-weight: 500;
font-size: clamp(20px, 3vw, 28px); letter-spacing: 0.12em;
line-height: 1.9; margin-bottom: 54px;
}
.troubles .head-copy .mk { color: var(--accent-deep); }
.trouble-grid {
display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 18px;
}
.trouble {
background: #ffffff; border: 1px solid var(--line); /* お悩みのQの窓は白（2026-09-17） */
padding: 30px 30px; display: flex; gap: 16px; align-items: flex-start;
}
.trouble .q {
font-family: 'Cormorant Garamond', serif; font-style: italic;
font-size: 26px; color: var(--accent); line-height: 1; flex-shrink: 0;
}
.trouble p { font-size: 14.5px; line-height: 1.95; }
/* カードが細い段組みになる幅では、行の長さを揃える（行末に1文字だけ残さない） */
@media (min-width: 640px) { .trouble p { text-wrap: balance; } }
.troubles .bridge {
text-align: center; font-family: 'Shippori Mincho', serif;
font-size: clamp(16px, 2.4vw, 20px); letter-spacing: 0.12em;
line-height: 2.1; margin-top: 56px;
}
.troubles .bridge em {
font-style: normal; color: var(--accent-deep);
font-family: 'Noto Sans JP', sans-serif; font-weight: 400; /* 「人の想いを〜」と同じゴシック体（2026-09-18） */
}
/* ───── 見出し共通 ───── */
.sec-head { margin-bottom: 58px; }
.sec-head .en-label {
font-size: 12px; color: var(--accent); letter-spacing: 0.38em; display: block; margin-bottom: 16px;
}
.sec-head h2 {
font-family: 'Shippori Mincho', serif; font-weight: 500;
font-size: clamp(30px, 4.1vw, 41px); letter-spacing: 0.14em;
line-height: 1.6;
}
/* 長い見出しは、入りきらないときだけ決めた位置で折り返す（語の途中で割れない） */
.sec-head h2 .h2l { white-space: nowrap; }
/* 狭い画面（iPhone SE など 320px 幅）で横にはみ出さないようにする（2026-10-17）
見出しは決めた位置で折り返す作りなので、折り返しを許すのではなく文字を少し小さくして収める */
@media (max-width: 360px) {
.sec-head h2 { font-size: 25px; }
.nav-toggle { margin-right: 0; }
}
/* ───── Philosophy ───── */
.philosophy { border-top: 1px solid var(--line); }
.philosophy p { max-width: 640px; margin-bottom: 1.6em; }
.philosophy .lead {
font-family: 'Shippori Mincho', serif;
font-size: 19px; line-height: 2.3; letter-spacing: 0.1em;
margin-bottom: 2em;
}
/* ───── マーケティング診断（入口商品として独立） ───── */
.diagnosis {
background: #963a4f; /* C案：面で見たときに重くならないよう、ボタンのワイン色より二段明るく */
color: var(--paper);
}
.diagnosis .en-label { color: #f2cdd6; }
.diagnosis .sec-head h2 { color: var(--paper); }
.diagnosis .diag-lead {
font-family: 'Shippori Mincho', serif; font-weight: 500;
font-size: clamp(19px, 2.6vw, 24px); letter-spacing: 0.1em;
line-height: 1.9; margin-bottom: 20px;
}
.diagnosis .diag-body {
font-size: 14.5px; line-height: 2; color: #f3e2e7;
max-width: 640px; margin-bottom: 40px;
}
/* 無料の「相談」と、有料の「診断」の線引き（2026-10-21） */
.diagnosis .diag-divide {
font-size: 14px; line-height: 2; color: #f3e2e7;
max-width: 640px; margin: 0 0 36px;
padding-top: 26px; border-top: 1px solid rgba(255, 255, 255, 0.3);
}
.diagnosis .diag-divide .dd-line { display: block; }
.diagnosis .diag-divide .dd-line + .dd-line { margin-top: 10px; }
/* 語の途中で改行させない。狭い画面では読点の位置で改行する */
.diagnosis .diag-divide .dl { white-space: nowrap; }
@media (max-width: 560px) {
.diagnosis .diag-divide .dl { display: block; white-space: normal; }
}
.diagnosis .diag-cta {
display: flex; align-items: center; gap: 30px; flex-wrap: wrap;
}
.diagnosis .diag-fee {
font-family: 'Shippori Mincho', serif; font-size: 20px; letter-spacing: 0.1em;
}
/* 金額の下に小さく納期の目安（2026-10-21） */
.diagnosis .diag-fee .diag-term {
display: block; margin-top: 5px;
font-family: 'Noto Sans JP', sans-serif; font-size: 12.5px;
letter-spacing: 0.08em; color: #f3e2e7;
}
.diagnosis .cta-btn {
background: var(--paper); border-color: var(--paper); color: var(--accent-deep);
}
.diagnosis .cta-btn:hover { background: #ffffff; border-color: #ffffff; color: var(--accent-deep); }
/* ───── Services ───── */
.services { border-top: 1px solid var(--line); }
/* ───── AI4段階フロー ───── */
.flow { list-style: none; max-width: 860px; margin: 0 0 66px; }
.flow-step {
display: grid; grid-template-columns: 74px 1fr; gap: 2px 20px;
position: relative; padding-bottom: 46px;
}
.flow-step:last-child { padding-bottom: 0; }
.flow-step:not(:last-child)::before {
content: ""; position: absolute; left: 20px; top: 46px; bottom: 14px;
width: 1px; background: var(--line);
}
.flow-step .step-no {
font-family: 'Cormorant Garamond', serif; font-size: 30px; font-weight: 500;
color: var(--accent); letter-spacing: 0.08em; line-height: 1.3;
}
.flow-step h3 {
font-family: 'Shippori Mincho', serif; font-weight: 500;
font-size: 20px; letter-spacing: 0.14em; color: var(--accent-deep);
margin-bottom: 12px; line-height: 1.5;
}
.flow-step .step-q {
font-family: 'Shippori Mincho', serif; font-size: 15px;
letter-spacing: 0.08em; line-height: 1.9; margin-bottom: 12px;
}
.flow-step p { font-size: 13.5px; color: var(--muted); line-height: 2; }
.flow-step .step-out {
margin-top: 16px; padding: 16px 20px;
background: var(--paper-deep); color: var(--ink);
font-size: 13px; line-height: 2;
}
@media (max-width: 560px) {
.flow-step { grid-template-columns: 50px 1fr; gap: 2px 14px; padding-bottom: 40px; }
.flow-step:not(:last-child)::before { left: 13px; top: 38px; }
.flow-step .step-no { font-size: 24px; }
.flow-step h3 { font-size: 17px; }
.flow-step .step-q { font-size: 14px; }
}
/* デザイン制作（4段階の横に残す） */
.svc-aside { border-top: 1px solid var(--line); padding-top: 42px; max-width: 860px; }
.svc-aside h3 {
font-family: 'Shippori Mincho', serif; font-weight: 500;
font-size: 17px; letter-spacing: 0.12em; color: var(--accent-deep); margin-bottom: 14px;
}
.svc-aside p { font-size: 13.5px; color: var(--muted); line-height: 2; max-width: 760px; }
.svc-aside ul { list-style: none; margin-top: 18px; display: flex; flex-wrap: wrap; gap: 8px 24px; }
.svc-aside li { font-size: 13.5px; color: var(--ink); position: relative; padding-left: 16px; }
.svc-aside li::before { content: "—"; position: absolute; left: 0; color: var(--accent); }
/* できること：全体を一本の線として示すリード */
.svc-lead { max-width: 760px; margin: 0 0 46px; }
.svc-lead .lead-main {
display: block; font-family: 'Shippori Mincho', serif;
font-size: 23px; letter-spacing: 0.12em; line-height: 1.9;
color: var(--accent-deep); margin-bottom: 16px;
}
.svc-lead .lead-sub {
display: block; font-size: 15px; color: var(--muted);
letter-spacing: 0.06em; line-height: 2;
}
.svc-lead .ln { white-space: nowrap; }
@media (max-width: 560px) { .svc-lead .lead-main { font-size: 6.2vw; } }
.svc-grid {
display: grid; grid-template-columns: 1fr;
gap: 1px; background: var(--line); border: 1px solid var(--line);
}
@media (min-width: 640px) {
.svc-grid { grid-template-columns: repeat(2, 1fr); }
}
.svc {
background: var(--paper-deep); padding: 44px 38px; /* 2026-09-22 ふだんは濃いめ、触れると明るく（逆だったのを入れ替え） */
transition: background .4s;
}
.svc:hover { background: #f7f7f7; }
.svc .num { font-family: 'Cormorant Garamond', serif; font-size: 13px; color: var(--accent); letter-spacing: 0.2em; }
.svc-tag { /* 2026-09-23 仕事の種類がひと目で分かる名札。メニュー下の線と同じエメラルドのベタに白抜き */
/* 2026-09-23 ベタ塗り→アンダーバーに変更。線はメニュー下と同じエメラルド、文字は墨で左端揃え */
display: block; width: 100%; box-sizing: border-box; text-align: left;
font-size: 15px; letter-spacing: 0.18em;
line-height: 1.25; font-weight: 500;
color: var(--ink); background: none;
padding: 0 0 8px; margin-bottom: 16px;
border-bottom: 5.5px solid var(--emerald); /* 元の帯（27.8px）の約1/5の太さ */
}
@media (max-width: 560px) { .svc-tag { font-size: 13px; letter-spacing: 0.14em; border-bottom-width: 5px; } }
@media (max-width: 380px) { .svc-tag { font-size: 11.5px; letter-spacing: 0.1em; } }
.svc h3 {
font-family: 'Shippori Mincho', serif; font-weight: 500;
font-size: 21px; margin: 0 0 16px; letter-spacing: 0.12em;
line-height: 1.6; color: var(--accent-deep);
}
.svc h3 + .svc-sub {
font-size: 15.5px; color: var(--accent); letter-spacing: 0.1em;
margin: -10px 0 18px; line-height: 1.8;
}
/* スマホは余白を詰めて、見出しに幅を渡す */
@media (max-width: 560px) {
.svc { padding: 34px 24px; }
.svc h3 { font-size: 19px; }
.svc h3 + .svc-sub { font-size: 14px; }
}
.svc p { font-size: 13.5px; color: var(--muted); line-height: 2; }
.svc ul { list-style: none; margin-top: 18px; }
.svc li {
font-size: 13.5px; color: var(--ink); line-height: 2.2;
padding-left: 18px; position: relative;
}
.svc li::before {
content: ""; position: absolute; left: 0; top: 1em;
width: 5px; height: 5px; border-radius: 50%;
background: var(--accent); opacity: .6;
}
/* ───── Approach ───── */
.approach { border-top: 1px solid var(--line); }
.steps { display: flex; flex-direction: column; gap: 0; max-width: 720px; }
.step {
display: grid; grid-template-columns: 90px 1fr; gap: 28px;
padding: 38px 0; border-bottom: 1px solid var(--line);
}
.step:first-child { border-top: 1px solid var(--line); }
.step .no { font-family: 'Cormorant Garamond', serif; font-size: 30px; color: var(--accent); line-height: 1.4; }
.step h3 { font-family: 'Shippori Mincho', serif; font-weight: 500; font-size: 21px; letter-spacing: 0.14em; margin-bottom: 12px; line-height: 1.6; }
.step p { font-size: 14px; color: var(--muted); }
.step h3 .stl { white-space: nowrap; }
/* スマホでは番号の列を詰めて、本文に幅を渡す */
@media (max-width: 560px) {
/* スマホは番号を上に置き、見出しに横幅をすべて渡す */
.step { grid-template-columns: 1fr; gap: 2px; padding: 30px 0; }
.step .no { font-size: 24px; }
.step h3 { font-size: 20px; letter-spacing: 0.08em; }
}
/* ───── Why / Process ───── */
.why { border-top: 1px solid var(--line); }
.pm-cases { display: grid; gap: 40px; margin-top: 38px; }
.pm-case { border-top: 1px solid var(--line); padding-top: 26px; }
.pm-case-label { display: block; font-size: 11px; letter-spacing: 0.3em; color: var(--accent); margin-bottom: 10px; }
.pm-case h4 {
font-family: 'Shippori Mincho', serif; font-weight: 500;
font-size: 19px; letter-spacing: 0.1em; margin: 0 0 18px; color: var(--accent-deep);
}
.pm-case dl { display: grid; gap: 14px; margin: 0; max-width: 720px; }
.pm-case dl > div { display: grid; grid-template-columns: 76px 1fr; gap: 14px; }
@media (max-width: 560px) { .pm-case dl > div { grid-template-columns: 1fr; gap: 4px; } }
.pm-case dt { font-size: 12.5px; letter-spacing: 0.16em; color: var(--muted); padding-top: 0.35em; }
.pm-case dd { margin: 0; font-size: 14px; line-height: 2; }
.pm-close {
margin-top: 40px; font-family: 'Shippori Mincho', serif;
font-size: 16px; letter-spacing: 0.1em; color: var(--accent-deep);
}
.process-more { /* 2026-09-23 「頭の中をお見せします」を PROCESS の締めくくりに組み込み */
margin-top: 70px; padding-top: 54px; border-top: 1px solid var(--line);
}
.process-more .pm-title {
font-family: 'Shippori Mincho', serif; font-weight: 500;
font-size: clamp(22px, 3vw, 28px); letter-spacing: 0.1em;
line-height: 1.7; margin: 0 0 26px; color: var(--accent-deep);
}
.process-more .pm-title .h2l { display: inline; }
@media (max-width: 560px) { .process-more .pm-title .h2l { display: block; } }
.why .lead2, .process-more .lead2 {
font-family: 'Shippori Mincho', serif;
font-size: 17px; line-height: 2.4; letter-spacing: 0.1em;
max-width: 640px; margin-bottom: 26px;
}
.why .note2, .process-more .note2 { max-width: 640px; font-size: 14px; color: var(--muted); margin-bottom: 64px; }
.case {
border: 1px solid var(--line); background: var(--paper);
padding: 46px 42px 36px; margin-bottom: 26px;
}
.case .tag { font-family: 'Cormorant Garamond', serif; font-size: 13px; color: var(--accent); letter-spacing: 0.32em; }
.case h3 {
font-family: 'Shippori Mincho', serif; font-weight: 500;
font-size: 19px; letter-spacing: 0.12em; margin: 12px 0 26px;
}
.case .row {
display: grid; grid-template-columns: 96px 1fr; gap: 20px;
padding: 16px 0; border-top: 1px solid var(--line);
}
.case .row .k {
font-family: 'Shippori Mincho', serif; font-size: 13.5px;
color: var(--accent-deep); letter-spacing: 0.22em; padding-top: 3px;
}
.case .row .v { font-size: 14px; line-height: 2.1; }
@media (max-width: 560px) {
.case { padding: 34px 26px 26px; }
.case .row { grid-template-columns: 1fr; gap: 6px; }
}
/* ───── Archive（思考の記録） ───── */
/* 「思考の記録」も「頭の中をお見せします」と同じ、濃→薄のグラデーション（上から下へ）2026-09-17 */
.archive { background: var(--paper); }
.archive-lead {
font-family: 'Shippori Mincho', serif;
font-size: clamp(15px, 2vw, 17px); line-height: 2.3; letter-spacing: 0.1em;
max-width: 720px; margin-bottom: 56px;
}
.archive .case {
display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
gap: 38px; align-items: start;
padding: 38px; margin-bottom: 30px;
}
.archive .case-visual {
background: #ffffff; border: 1px solid var(--line); padding: 12px;
}
/* 2026-10-28 奥行き③ 面を重ねる。白い台の上に、図面が少しはみ出して浮く */
@media (min-width: 861px) {
/* 2026-10-28 白い板はそのまま。はみ出しはCHOURIの指示で取りやめ、板の中に収めた */
.archive .case {
background: #ffffff; box-shadow: var(--lift-1);
padding: 44px;
}
}
.archive .case-visual img { display: block; width: 100%; height: auto; }
.archive .case h3 { font-size: 21px; line-height: 1.7; margin: 10px 0 22px; }
.archive .case h3 .h3l { white-space: nowrap; }
.archive .case .row:first-of-type { border-top: none; padding-top: 0; }
/* 2件目以降は「画像＋見出し＋着眼点」だけに絞り、詳細は works.html へ */
.case-brief-grid {
display: grid; grid-template-columns: repeat(2, 1fr); gap: 26px;
margin-top: 30px;
}
.case-brief {
display: block; text-decoration: none; color: inherit;
border: 1px solid var(--line); background: var(--paper);
padding: 26px 26px 30px;
transition: border-color .3s, transform .3s;
}
.case-brief:hover { border-color: var(--accent); transform: translateY(-2px); }
.case-brief:focus-visible { outline: 1px solid var(--france); outline-offset: 4px; }
.case-brief-visual {
background: #ffffff; border: 1px solid var(--line); padding: 10px; margin-bottom: 20px;
}
.case-brief-visual img { display: block; width: 100%; height: auto; }
.case-brief h3 {
font-family: 'Shippori Mincho', serif; font-weight: 500;
font-size: 18px; letter-spacing: 0.1em; line-height: 1.7; margin: 8px 0 12px;
}
.case-brief p { font-size: 13.5px; color: var(--muted); line-height: 2; }
.archive-cta { margin-top: 40px; }
@media (max-width: 700px) {
.case-brief-grid { grid-template-columns: 1fr; gap: 20px; }
}
@media (max-width: 860px) {
.archive .case { grid-template-columns: 1fr; gap: 26px; padding: 30px 26px; }
.archive .case h3 .h3l { white-space: normal; }
}
.why .closing {
font-family: 'Shippori Mincho', serif;
font-size: 16px; letter-spacing: 0.12em; line-height: 2.3;
margin-top: 54px; max-width: 640px;
}
.why .closing a { color: var(--accent-deep); text-underline-offset: 6px; }
.profile .belief-lead {
font-family: 'Shippori Mincho', serif; font-weight: 500;
font-size: clamp(18px, 2.2vw, 22px); line-height: 1.9; letter-spacing: 0.1em;
color: var(--accent-deep); margin: 6px 0 26px;
}
@media (max-width: 560px) { .profile .belief-lead br { display: none; } }
/* ───── About（会社概要） ───── */
.about { border-top: 1px solid var(--line); }
.about-list { max-width: 760px; }
.about-row {
display: grid; grid-template-columns: 110px 1fr; gap: 24px;
padding: 20px 2px; border-bottom: 1px solid var(--line);
}
.about-row:first-child { border-top: 1px solid var(--line); }
.about-row dt {
font-family: 'Shippori Mincho', serif; font-size: 14.5px;
color: var(--accent-deep); letter-spacing: 0.16em;
}
.about-row dd { font-size: 14.5px; line-height: 2; }
.about-row dd .sub { font-size: 12.5px; color: var(--muted); }
@media (max-width: 560px) {
.about-row { grid-template-columns: 1fr; gap: 6px; padding: 18px 2px; }
}
/* 「名に込めた想い」を会社概要に統合 */
.ckpr-recap {
text-align: center; border-top: 1px solid var(--line);
margin-top: 56px; padding-top: 56px;
}
.ckpr-recap-title {
font-family: 'Shippori Mincho', serif; font-weight: 500;
font-size: clamp(19px, 2.4vw, 24px); letter-spacing: 0.14em;
margin: 0 0 40px;
}
/* ───── FAQ ───── */
.faq { border-top: 1px solid var(--line); }
.faq-list { max-width: 800px; }
.faq-item { padding: 26px 0; border-bottom: 1px solid var(--line); }
.faq-item:first-child { border-top: 1px solid var(--line); }
.faq-item h3 {
font-family: 'Shippori Mincho', serif; font-weight: 500;
font-size: 17px; letter-spacing: 0.08em; line-height: 1.8;
margin-bottom: 12px; display: grid; grid-template-columns: 30px 1fr; gap: 4px;
}
.faq-item h3 .q { color: var(--accent); font-size: 17px; line-height: 1.8; }
.faq-item p {
font-size: 14px; color: var(--muted); line-height: 2.1;
padding-left: 34px;
}
@media (max-width: 560px) {
.faq-item h3 { font-size: 16px; grid-template-columns: 26px 1fr; }
.faq-item p { padding-left: 30px; font-size: 13.5px; }
}
/* ───── Price ───── */
.price { border-top: 1px solid var(--line); }
.price-table { max-width: 720px; }
.price-row {
display: flex; justify-content: space-between; align-items: center;
gap: 20px; padding: 24px 4px; border-bottom: 1px solid var(--line);
}
.price-cat {
font-family: 'Shippori Mincho', serif; font-size: 15px; letter-spacing: 0.16em;
color: var(--accent); margin: 34px 0 0; padding-bottom: 10px;
}
.price-cat:first-child { margin-top: 0; }
.price-cat + .price-row { border-top: 1px solid var(--line); }
.price-row .item { font-family: 'Shippori Mincho', serif; font-size: 16px; letter-spacing: 0.1em; }
.price-row .item small {
display: block; font-family: 'Noto Sans JP', sans-serif;
font-size: 12.5px; color: var(--muted); letter-spacing: 0.06em; margin-top: 4px;
}
.price-row .fee {
font-family: 'Shippori Mincho', serif; font-size: 18px;
color: var(--accent-deep); white-space: nowrap;
}
/* スマホは項目と金額を縦に並べる（横並びだと説明文が細くなりすぎる） */
@media (max-width: 560px) {
.price-row { flex-direction: column; align-items: flex-start; gap: 10px; padding: 20px 2px; }
.price-row .fee { font-size: 17px; }
.price-cat { margin-top: 30px; }
}
/* 料金を隠して、見たい人だけ開く */
.price-lead { font-size: 15.5px; color: var(--muted); max-width: 720px; margin-bottom: 26px; letter-spacing: 0.08em; line-height: 1.95; }
.price-reveal { max-width: 720px; }
.price-reveal > summary {
list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 12px;
font-family: 'Shippori Mincho', serif; font-size: 15px; letter-spacing: 0.18em;
color: var(--france); border: 1px solid var(--france); border-radius: 4px;
padding: 9px 44px; line-height: 1.2; transition: all .35s;
}
.price-reveal > summary::-webkit-details-marker { display: none; }
.price-reveal > summary::after { content: "▾"; font-size: 11px; transition: transform .3s; }
.price-reveal[open] > summary::after { transform: rotate(180deg); }
.price-reveal > summary:hover { background: var(--france); color: var(--paper); }
.price-reveal .price-inner { margin-top: 34px; animation: priceFade .45s ease; }
@keyframes priceFade { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.price-note { margin-top: 28px; font-size: 13px; color: var(--muted); max-width: 720px; }
/* ───── Profile ───── */
.leaf-filter { position: absolute; width: 0; height: 0; overflow: hidden; }
.profile { border-top: 1px solid var(--line); position: relative; overflow: hidden; }
/* 2026-10-28 CHOURI指定：上辺・左右の外側は断ち切り、内側と下端のみ溶かす */
.profile .leaf-shadow {
position: absolute;
width: clamp(170px, 24%, 340px);
background-repeat: no-repeat; background-size: contain;
mix-blend-mode: multiply; opacity: 1;
filter: url(#leafDeep);
pointer-events: none; z-index: 0;
-webkit-mask-composite: source-in;
mask-composite: intersect;
}
.profile .pf-a {
top: 0; left: 0; aspect-ratio: 424 / 534;
background-image: url("contact-leaf-left.png"); background-position: left top;
-webkit-mask-image: linear-gradient(to right, #000 0%, rgba(0,0,0,.9) 55%, rgba(0,0,0,.3) 85%, transparent 100%),
linear-gradient(to bottom, #000 0%, #000 76%, transparent 100%);
mask-image: linear-gradient(to right, #000 0%, rgba(0,0,0,.9) 55%, rgba(0,0,0,.3) 85%, transparent 100%),
linear-gradient(to bottom, #000 0%, #000 76%, transparent 100%);
}
.profile .pf-c {
transform: scale(1.7); transform-origin: right top;
filter: url(#leafTip) blur(clamp(0.8px, 0.14vw, 1.8px));
right: 0; aspect-ratio: 2 / 3;
background-image: url("profile-leaf-monstera-tip.png"); background-position: right top;
-webkit-mask-image: linear-gradient(to left, transparent 0%, #000 6%, #000 90%, transparent 100%),
linear-gradient(to bottom, transparent 0%, #000 6%, #000 80%, transparent 100%);
mask-image: linear-gradient(to left, transparent 0%, #000 6%, #000 90%, transparent 100%),
linear-gradient(to bottom, transparent 0%, #000 6%, #000 80%, transparent 100%);
}
.profile .pf-c { top: 0; } /* CHOURI追加依頼：右上にもモンステラの影 */
/* CHOURI提供画像をもとに加工した、奥行きのある丸葉の影 */
.profile .pf-d {
bottom: 0; left: 0; aspect-ratio: 2 / 3;
transform: scale(1.8); transform-origin: left bottom;
background-image: url("profile-leaf-eucalyptus-depth.png"); background-position: left bottom;
opacity: .24;
-webkit-mask-image: linear-gradient(to right, #000 0%, #000 55%, transparent 100%),
linear-gradient(to bottom, transparent 0%, #000 18%, #000 85%, transparent 100%);
mask-image: linear-gradient(to right, #000 0%, #000 55%, transparent 100%),
linear-gradient(to bottom, transparent 0%, #000 18%, #000 85%, transparent 100%);
}
/* CHOURIの描き込み位置：上中央の丸葉と椰子の影 */
.profile .pf-top {
top: -2px; left: 18%; width: 56%; aspect-ratio: 3 / 1;
background-image: url("profile-leaf-top-sprigs.png"); background-position: center top;
filter: grayscale(1) blur(clamp(0.7px, 0.12vw, 1.5px)); opacity: .32;
-webkit-mask-image: linear-gradient(to right, transparent, #000 5%, #000 95%, transparent);
mask-image: linear-gradient(to right, transparent, #000 5%, #000 95%, transparent);
}
.profile .profile-wrap { position: relative; z-index: 1; }
@media (max-width: 760px) {
.profile .leaf-shadow { width: 40%; }
.profile .pf-top { left: 22%; width: 50%; }
}
.profile-wrap {
display: grid; grid-template-columns: 188px 1fr;
gap: 52px; align-items: start; max-width: 980px;
}
@media (max-width: 720px) {
.profile-wrap { grid-template-columns: 1fr; }
.profile-img { max-width: 184px; margin: 0 auto; }
}
.profile-img { border: 1px solid var(--line); padding: 10px; background: var(--paper); }
.profile-img img { display: block; width: 100%; height: auto; }
.profile .name { font-family: 'Shippori Mincho', serif; font-size: 20px; letter-spacing: 0.16em; margin-bottom: 4px; }
.profile .name-title { font-size: 13px; letter-spacing: 0.08em; margin-left: 18px; margin-right: 6px; font-weight: 500; color: var(--muted); }
.profile .name-real { font-size: 20px; color: var(--accent-deep); letter-spacing: 0.1em; font-weight: 500; }
@media (max-width: 480px) {
.profile .name-real { display: block; margin-left: 0; margin-top: 6px; white-space: nowrap; }
}
.profile .name-role { font-size: 14px; letter-spacing: 0.1em; font-weight: 500; color: var(--muted); white-space: nowrap; }
@media (max-width: 480px) { .profile .name-role { display: block; margin-top: 2px; } .profile .name-bar { display: none; } }
.profile .sns-name { font-size: 13px; color: var(--muted); letter-spacing: 0.06em; margin-bottom: 18px; }
.profile .bio { margin-bottom: 26px; }
.profile .sns-name .nw, .profile .bio .nw { display: inline-block; }
.profile .name-en { display: block; font-size: 12px; color: var(--muted); letter-spacing: 0.24em; margin-bottom: 26px; }
.profile p { font-size: 14.5px; margin-bottom: 1.5em; max-width: 560px; }
.profile .belief { font-family: 'Noto Sans JP', sans-serif; font-weight: 400; color: var(--accent-deep); } /* ゴシック体（2026-09-17）。色はそのまま */
.profile .pitch {
font-family: 'Shippori Mincho', serif; font-weight: 500;
font-size: 16px; letter-spacing: 0.1em; line-height: 1.9;
color: var(--ink); margin: -8px 0 26px; padding-left: 14px;
border-left: 2px solid var(--accent-deep); max-width: 560px;
}
.profile .pitch .pl { display: block; white-space: nowrap; }
@media (max-width: 440px) { .profile .pitch { font-size: 15px; letter-spacing: 0.06em; } .profile .pitch .pg { display: block; } }
.profile .cred {
font-size: 13px; color: var(--muted); letter-spacing: 0.08em;
margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--line); max-width: 560px;
}
/* ───── Declaration ───── */
.declare {
background: var(--ink); max-width: none;
padding: 130px 8vw; text-align: center;
}
.declare .en-label {
font-size: 12px; color: #c79aa5; letter-spacing: 0.38em;
display: block; margin-bottom: 34px;
}
.declare .line {
font-family: 'Shippori Mincho', serif; font-weight: 500;
color: var(--paper);
font-size: clamp(19px, 3.2vw, 30px);
letter-spacing: 0.14em; line-height: 2.2;
}
.declare .line em { font-style: normal; color: #c79aa5; }
/* 狭い画面で意図しない位置に折り返さないよう、余白と字送りを詰める */
@media (max-width: 430px) {
.declare { padding: 100px 6vw; }
.declare .line { font-size: 17px; letter-spacing: 0.1em; line-height: 2.1; }
}
@media (max-width: 360px) {
.declare .line { font-size: 15px; }
}
.declare .sign-logo {
/* 2026-09-22 大きさ70%（元の幅 clamp(120px,16vw,168px)）、ロゴの中心を元のロゴの高さの半分だけ下げる
ロゴの縦横比 287/998。中心を合わせるため、縮んだ分の半分も足している */
--w0: clamp(120px, 16vw, 168px);
display: block; margin: calc(48px + var(--w0) * 0.1869) auto 0;
width: calc(var(--w0) * 0.7);
}
/* ───── Cafe Produce ───── */
.cafe {
background: var(--ink); color: var(--paper);
max-width: none; padding: 130px 8vw;
}
.cafe-inner { max-width: 1080px; margin: 0 auto; }
.cafe .en-label { font-size: 12px; color: #c79aa5; letter-spacing: 0.38em; display: block; margin-bottom: 16px; }
.cafe h2 {
font-family: 'Shippori Mincho', serif; font-weight: 500;
font-size: clamp(24px, 3.6vw, 36px); letter-spacing: 0.12em;
line-height: 1.9; margin-bottom: 40px;
}
.cafe .desc { max-width: 620px; color: #c9c9c9; font-size: 15px; margin-bottom: 56px; }
.cafe-flow { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.cafe-flow .node {
border: 1px solid #525252; padding: 14px 26px;
font-family: 'Shippori Mincho', serif; font-size: 14px; letter-spacing: 0.16em;
}
.cafe-flow .arrow { color: #767676; font-size: 13px; }
.cafe .note { margin-top: 46px; font-size: 12.5px; color: #858585; letter-spacing: 0.12em; }
/* ───── Works ───── */
.works { border-top: 1px solid var(--line); }
.works-grid {
display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 26px;
}
.work {
aspect-ratio: 4 / 3; background: var(--paper-deep);
border: 1px solid var(--line);
display: flex; align-items: center; justify-content: center;
color: var(--muted); font-size: 12px; letter-spacing: 0.24em;
}
/* ───── Contact ───── */
.contact { border-top: 1px solid var(--line); text-align: center; padding-bottom: 140px; position: relative; overflow: hidden; }
/* 2026-10-28 木漏れ日の影。葉そのものではなく、白い壁に落ちた陰だけを置く */
/* ───── 奥行き（2026-10-28）光は左上から。影は右下へ、少し青みのあるグレーで ───── */
:root {
--lift-1: 0 2px 4px rgba(42, 46, 54, 0.045), 0 8px 20px rgba(42, 46, 54, 0.055);
--lift-2: 0 3px 8px rgba(42, 46, 54, 0.06), 0 16px 38px rgba(42, 46, 54, 0.085);
}
.svc { box-shadow: var(--lift-1); }
.svc:hover { box-shadow: var(--lift-2); }
.archive .case-visual { box-shadow: var(--lift-2); }
.case-brief { box-shadow: var(--lift-1); }
.case-brief:hover { box-shadow: var(--lift-2); }
.profile-img { box-shadow: var(--lift-2); }
.troubles .q-card, .troubles .q { box-shadow: var(--lift-1); }
.price-reveal > summary { box-shadow: var(--lift-1); }
@media (prefers-reduced-motion: no-preference) {
.svc, .case-brief { transition: box-shadow .4s, background .4s, border-color .3s, transform .3s; }
}
.contact > .bleed-inner { position: relative; z-index: 1; }
.contact p { max-width: 560px; margin: 0 auto 44px; }
.contact .btn {
display: inline-block; text-decoration: none;
border: 1px solid var(--accent); background: var(--accent); color: var(--paper);
padding: 10px 64px; font-size: 13px; letter-spacing: 0.3em; line-height: 1.2;
transition: all .35s;
}
.contact .btn:hover { background: var(--accent-deep); border-color: var(--accent-deep); color: var(--paper); }
.cform { max-width: 560px; margin: 0 auto; text-align: left; }
.cform .cf-row { margin-bottom: 24px; }
.cform label {
display: block; font-size: 13px; letter-spacing: 0.14em; margin-bottom: 8px;
}
.cform label .req {
color: var(--accent); font-size: 10.5px; border: 1px solid var(--accent);
padding: 1px 7px; margin-left: 10px; letter-spacing: 0.1em; vertical-align: 1px;
}
.cform input[type="text"], .cform input[type="email"], .cform textarea {
width: 100%; background: #fdfdfd; border: 1px solid var(--line);
padding: 13px 15px; font: inherit; font-size: 14.5px; color: var(--ink);
letter-spacing: 0.04em; border-radius: 0; -webkit-appearance: none;
}
.cform input:focus, .cform textarea:focus { outline: none; border-color: var(--accent); }
.cform textarea { resize: vertical; }
.cform .hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.cform .btn {
display: block; width: 100%; cursor: pointer;
border: 1px solid var(--accent); background: var(--accent); color: var(--paper);
padding: 10px; font-size: 13px; letter-spacing: 0.3em; line-height: 1.2;
font-family: 'Cormorant Garamond', serif; transition: all 0.35s;
}
.cform .btn:hover { background: var(--accent-deep); border-color: var(--accent-deep); color: var(--paper); }
.cform .btn:disabled { opacity: 0.5; cursor: default; }
/* 送信ボタン上のプライバシーポリシー案内（別タブで開き、入力中の内容を消さない） */
.contact .cform .cf-privacy {
max-width: none; margin: 0 0 14px; text-align: center;
font-size: 12.5px; color: var(--muted); letter-spacing: 0.08em; line-height: 1.8;
}
.cform .cf-privacy a {
color: var(--accent); text-decoration: underline;
text-decoration-thickness: 1px; text-underline-offset: 3px;
}
.cform .cf-privacy a:hover { color: var(--accent-deep); }
.cf-status {
margin-top: 18px; font-size: 13.5px; color: var(--accent-deep);
text-align: center; min-height: 1.6em; letter-spacing: 0.06em;
}
/* 無料の相談と、制作から進める場合の案内（2026-10-21） */
.contact .contact-terms { margin-bottom: 26px; }
/* フォームのすぐ上に置く、返信の目安（2026-10-21） */
.contact .reply-note {
max-width: 560px; margin: 0 auto 34px;
padding-top: 22px; border-top: 1px solid var(--line);
font-size: 13px; color: var(--muted);
letter-spacing: 0.08em; line-height: 1.95;
}
.contact .reply-note .rn-day { color: var(--ink); }
/* 語の途中で改行させない。狭い画面では読点の位置で改行する */
.contact .contact-terms .ct-l, .contact .reply-note .rn-l { white-space: nowrap; }
@media (max-width: 560px) {
.contact .contact-terms .ct-l, .contact .reply-note .rn-l { display: block; white-space: normal; }
}
.contact .mail-note {
margin: 26px auto 0; font-size: 13px; color: var(--muted); letter-spacing: 0.14em;
}
/* ───── CTAボタン（共通） ───── */
.cta-btn {
display: inline-block; text-decoration: none;
border: 1px solid var(--accent); background: var(--accent); color: var(--paper);
padding: 10px 46px; font-size: 13px; letter-spacing: 0.22em; line-height: 1.2;
font-family: 'Shippori Mincho', serif;
transition: all .35s;
}
.cta-btn:hover { background: var(--accent-deep); border-color: var(--accent-deep); color: var(--paper); }
/* 読み物への案内（サブ導線）は細枠のまま残す */
.cta-btn.ghost { background: none; border-color: var(--france); color: var(--france); }
.cta-btn.ghost:hover { background: var(--france); border-color: var(--france); color: var(--paper); }
/* タッチ端末（スマホ・タブレット）では指で押しやすいよう高さ44pxを確保 */
@media (hover: none) {
.cta-btn, .cform .btn, .contact .btn { padding-top: 13px; padding-bottom: 13px; }
.price-reveal > summary { padding-top: 12px; padding-bottom: 12px; }
}
.hero .cta-note {
margin-top: 46px; align-self: flex-start;
font-size: 13.5px; color: var(--muted); letter-spacing: 0.08em; line-height: 1.9;
opacity: 0; animation: heroRise 1.2s ease forwards; animation-delay: 1.35s;
}
/* 狭い画面では読点の位置で必ず改行させる（語の途中で割れないように） */
.hero .cta-note .nl { display: inline; }
@media (max-width: 540px) { .hero .cta-note .nl { display: block; } }
.hero .cta-btn {
margin-top: 14px; align-self: flex-start;
opacity: 0; animation: heroRise 1.2s ease forwards; animation-delay: 1.55s;
}
@media (prefers-reduced-motion: reduce) {
.hero .cta-note, .hero .cta-btn { opacity: 1; animation: none; }
}
.price .cta-wrap { margin-top: 40px; }
/* ───── スマホ用 追従ご相談ボタン ───── */
.float-cta {
display: none;
position: fixed; right: 16px; bottom: 18px; z-index: 90;
background: var(--accent-deep); color: var(--paper);
text-decoration: none;
font-family: 'Shippori Mincho', serif;
font-size: 13px; letter-spacing: 0.16em;
padding: 13px 22px; border-radius: 999px;
box-shadow: 0 6px 18px rgba(36, 36, 36, 0.28);
transition: opacity .3s, visibility .3s;
}
@media (max-width: 860px) {
.float-cta { display: inline-block; }
.float-cta.hide { opacity: 0; visibility: hidden; }
}
footer {
border-top: 1px solid var(--line);
padding: 30px 5vw; display: flex; justify-content: space-between;
font-size: 11px; color: var(--muted); letter-spacing: 0.2em;
}
footer .foot-right { display: flex; align-items: center; gap: 28px; }
footer a { color: var(--muted); text-decoration: none; letter-spacing: 0.14em; transition: color .3s; }
footer a:hover { color: var(--accent-deep); }
footer .foot-right a { white-space: nowrap; }
/* 狭い画面では2段に分け、リンクが途中で折れないようにする */
@media (max-width: 560px) {
footer { flex-direction: column; gap: 8px; }
footer .foot-right { justify-content: space-between; }
}
/* 写真パネル：左はそのまま、右へ向かって透けていく（右端は12%残して「R」がかすかに読める）2026-09-17 */
.hero-visual{
-webkit-mask-image:linear-gradient(to right,#000 0%,#000 22%,rgba(0,0,0,0) 100%);
mask-image:linear-gradient(to right,#000 0%,#000 22%,rgba(0,0,0,0) 100%);
box-shadow:none}
/* 写真パネル：ロゴをできるだけ左へ寄せ、右端は完全に消える（2026-09-17）。
ロゴは幅74%・左端6%の位置へ（旧：左端28.6%→22.6%左へ）。
赤い点と細い線もロゴとの位置関係を保つため、同じだけ左へ移動 */
.hero-visual::before{ -webkit-mask-position: 23% 62%; mask-position: 23% 62%; }
.hero-visual::after{ right: 30.6%; }
.trace-01, .trace-02, .trace-03{ right: 42.6%; }
.focus-point{ right: calc(42.6% - 4px); }
/* ───── 本文の左右幅をそろえる（2026-10-29 CHOURI指示「コピーワイドを揃える」） ─────
スマホでは、本文の右端を画面の端から31px（＝他のセクションと同じ 8vw）に統一する。
枠（カード）の中の文字は、枠の余白ぶんだけ内側に入るので、枠の余白も26pxに揃える。 */
@media (max-width: 760px) {
.hero-copy { padding-left: 8vw; padding-right: 8vw; } /* 6vw → 8vw */
.declare { padding-left: 8vw; padding-right: 8vw; } /* 6vw → 8vw */
.about-row { padding-left: 0; padding-right: 0; } /* 2px → 0 */
.svc { padding-left: 26px; padding-right: 26px; } /* 24px → 26px（思考の記録の枠と同じに） */
.trouble { padding-left: 26px; padding-right: 26px; } /* 30px → 26px（お悩みの窓も同じ内寸に） */
}
/* ───── 読みやすさ優先の折り返し（2026-10-29 CHOURI指示） ─────
字間は触らない。行末は「意味のかたまり（文節）」で折る。
対応していないブラウザでは、これまでどおりの折り返しになる（崩れない）。 */
.trouble p,
.svc p, .svc li,
.step p,
.archive .case .v,
.case-brief p,
.pm-case dd,
.about-row dd,
.faq-item p,
.profile p,
.price-note,
.archive-lead,
.contact p {
word-break: auto-phrase; /* 文節で折る（対応ブラウザのみ） */
line-break: strict; /* 句読点・小さい文字の禁則を厳しめに */
}
/* ───── 手で決めた改行を、スマホでもそのまま出す（2026-10-29 CHOURI指示） ─────
「CKPRならどう変えられるか」の文は、改行位置を人が決めている。
スマホでは幅が足りず途中で折れていたので、1行が収まる大きさにする。
字間は変えない。文字サイズだけを画面幅に合わせる。 */
@media (max-width: 760px) {
#ckpr .statement .ln { display: block; white-space: nowrap; font-size: 3.45vw; }
#ckpr .elevation .ln { display: block; white-space: nowrap; font-size: 4.0vw; }
}
/* 思考の記録の見出しも、手で決めた改行位置のまま1行に収める（2026-10-29） */
@media (max-width: 860px) {
.archive .case h3 .h3l { display: block; white-space: nowrap; font-size: min(21px, 5.0vw); }
}