/* トップページ専用(日本語 / と英語 /en/)。固定の1画面。見本: _proposals/hp-design-i.html */
:root{--bg:#fff;--ink:#1d1d1f;--sub:#8a8a8f;--line:#ebebed;--soft:#f5f5f7;--pad:48px;--spring:cubic-bezier(.3,1.6,.5,1)}
@media (prefers-color-scheme:dark){:root{--bg:#111112;--ink:#f2f2f3;--sub:#8e8e93;--line:#2a2a2d;--soft:#1c1c1e;color-scheme:dark}}
*{box-sizing:border-box;margin:0;padding:0}
body{background:var(--bg);color:var(--ink);font:400 15px/1.9 "Zen Kaku Gothic New",sans-serif;-webkit-font-smoothing:antialiased}
html[lang=en] body{font-family:"Hanken Grotesk","Zen Kaku Gothic New",sans-serif}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px}

/* 固定の1画面。スクロールしない */
.js body{position:fixed;inset:0;overflow:hidden}
.wm{position:fixed;left:var(--pad);top:var(--pad);font:800 16px/1 "Hanken Grotesk",sans-serif;letter-spacing:.16em}
.base{position:fixed;right:var(--pad);bottom:var(--pad);text-align:right;font-size:12px;line-height:1.8;color:var(--sub)}
.base b{display:block;font-size:13px;font-weight:500;color:var(--ink)}

/* アイコン */
.dock{position:fixed;left:calc(var(--pad) - 14px);bottom:calc(var(--pad) - 6px);display:flex;gap:10px}
.dock :is(button,a){width:72px;padding:8px 0 4px;display:grid;justify-items:center;gap:5px;color:var(--ink);font-size:11px;line-height:1.4;transition:color .2s,transform .5s var(--spring)}
.dock svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.dock:has(button[aria-expanded=true]) :is(button,a):not([aria-expanded=true]){color:var(--sub)}
.dock :is(button,a):hover,.dock:has(button[aria-expanded=true]) :is(button,a):hover{color:var(--ink);transform:translateY(-4px)}
.dock :is(button,a)[aria-expanded=true]{color:var(--ink);font-weight:700}
.dock :is(button,a)::after{content:"";width:4px;height:4px;border-radius:50%;background:var(--ink);transform:scale(0);transition:transform .5s var(--spring)}
.dock :is(button,a)[aria-expanded=true]::after{transform:scale(1)}

/* 余白に出る中身 */
.stage{position:fixed;left:var(--pad);right:var(--pad);top:calc(var(--pad) + 56px);bottom:calc(var(--pad) + 76px)}
.panel{position:absolute;inset:0;display:flex;flex-direction:column;overflow:auto;
  opacity:0;visibility:hidden;transform:translateY(10px);transition:opacity .22s,transform .55s var(--spring),visibility 0s .22s}
.panel.on{opacity:1;visibility:visible;transform:none;transition:opacity .22s,transform .55s var(--spring)}
.panel>div{width:min(520px,100%);margin-top:auto}
#about>div,#clients>div{width:min(640px,100%)}
.nb{display:inline-block}  /* 中身はアイコンのすぐ上に出す */
.panel h2{font-size:12px;font-weight:400;color:var(--sub);margin-bottom:14px}
/* アイコンの名前と同じ見出しは画面に出さない(読み上げとJSなしの表示には残す)。プライバシーポリシーはアイコンが無いので出す */
.js :is(#about,#biz,#clients,#recruit,#contact) h2{position:absolute;width:1px;height:1px;margin:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

.rows div{display:grid;gap:2px;padding:16px 0;border-top:1px solid var(--line)}
.rows div:last-child{border-bottom:1px solid var(--line)}
.rows b{font-size:20px;font-weight:700;line-height:1.5}
.rows b small{font-size:11px;font-weight:400;color:var(--sub);margin-left:10px}
.rows span{font-size:13px;color:var(--sub);line-height:1.6}

.names{list-style:none;font-size:20px;font-weight:700;line-height:2}
.names li.etc,#recruit .names li:last-child{font-size:13px;font-weight:400;color:var(--sub)}
.groups{display:grid;grid-template-columns:auto auto;justify-content:start;gap:8px 64px}
.groups h3{font-size:12px;font-weight:400;color:var(--sub);margin-bottom:2px}
.more{display:inline-block;margin-top:16px;font-size:13px;font-weight:700;border-bottom:1.5px solid var(--ink);line-height:1.6;transition:transform .5s var(--spring)}
.more:hover{transform:translateX(4px)}
.more+.more{margin-left:22px}

.reach{font-size:20px;font-weight:700;line-height:1.8}
.reply{font-size:12px;color:var(--sub);margin-top:2px}
.form{display:grid;gap:8px;margin-top:14px}
.form select,.form input,.form textarea{font:inherit;font-size:14px;color:var(--ink);background:var(--soft);border:0;border-radius:8px;padding:10px 12px;width:100%}
.form textarea{height:84px;resize:none}
.form ::placeholder{color:var(--sub)}
.form .hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.form .note{font-size:11px;line-height:1.7;color:var(--sub)}
.form .note a{border-bottom:1px solid var(--line)}
.fmsg{font-size:12px;line-height:1.7;color:#d6453d}
.fmsg:empty{display:none}
.send{justify-self:start;background:var(--ink);color:var(--bg);font-size:13px;font-weight:700;padding:9px 24px;border-radius:99px;margin-top:4px;transition:transform .5s var(--spring)}
.send:hover{transform:scale(1.05)}
.send:disabled{opacity:.5;cursor:default;transform:none}
.done{display:none;margin-top:14px}
.done b{display:block;font-size:20px;font-weight:700;line-height:1.8}
.done p{font-size:13px;color:var(--sub);line-height:1.7}
.sent .form{display:none}.sent .done{display:block}

dl{display:grid;grid-template-columns:9.5em 1fr;font-size:14px}
html[lang=en] dl{grid-template-columns:9.5em 1fr}
dt,dd{padding:10px 0;border-top:1px solid var(--line)}
dt{color:var(--sub);font-size:12px;line-height:2.2}
dl>:nth-last-child(-n+2){border-bottom:1px solid var(--line)}

.memo{position:fixed;right:var(--pad);top:var(--pad);font-size:11px;line-height:1;color:var(--sub);transition:color .2s}
.memo:hover{color:var(--ink)}

@media (max-width:760px){
  :root{--pad:22px}
  .base{left:var(--pad);right:auto;text-align:left;bottom:calc(var(--pad) + 76px)}
  .dock{left:calc(var(--pad) - 8px);right:calc(var(--pad) - 8px);bottom:calc(var(--pad) - 4px);justify-content:space-between;gap:0}
  .dock :is(button,a){width:auto;flex:1}
  .stage{top:calc(var(--pad) + 56px);bottom:calc(var(--pad) + 136px)}  /* 隅の住所が2行になった分だけ下げた(2026-11-11) */
  .rows b{font-size:18px}.names,.reach{font-size:18px}
  html[lang=ja] dl{grid-template-columns:max-content 1fr;font-size:13px}html[lang=ja] dt{padding-right:14px}
  .groups{grid-template-columns:1fr;gap:14px}.groups .names{line-height:1.8}
}
/* スクリプトが動かない場合は中身が縦に並ぶ(検索とAIはこの形で読む) */
html:not(.js) .wm,html:not(.js) .base,html:not(.js) .dock,html:not(.js) .stage,html:not(.js) .panel{position:static;opacity:1;visibility:visible;transform:none}
html:not(.js) body{padding:var(--pad);display:grid;gap:32px}
html:not(.js) .dock{display:none}
/* 開いた直後の動き: ロゴと住所はふわっと出て、アイコンは左から順に1回だけ跳ねる(空白の画面を「表示されていない」と思わせないため) */
@keyframes appear{from{opacity:0}}
@keyframes hop{0%{opacity:0;transform:translateY(16px)}55%{opacity:1;transform:translateY(-7px)}100%{opacity:1;transform:none}}
.js .wm,.js .memo{animation:appear .9s both}
.js .base{animation:appear .9s .25s both}
.js .dock :is(button,a){animation:hop .7s cubic-bezier(.3,1.2,.5,1) backwards}
.js .dock :is(button,a):nth-child(1){animation-delay:.35s}.js .dock :is(button,a):nth-child(2){animation-delay:.43s}.js .dock :is(button,a):nth-child(3){animation-delay:.51s}
.js .dock :is(button,a):nth-child(4){animation-delay:.59s}.js .dock :is(button,a):nth-child(5){animation-delay:.67s}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* プライバシーポリシー(問い合わせの下のリンクから開く。長いので板の中だけスクロールする) */
#privacy>div{width:min(640px,100%);padding:8px 0 4px}
.panel{scrollbar-width:none}.panel::-webkit-scrollbar{display:none}  /* スクロールバーは出さない(上下の端の透かしで続きを示す) */
.doc{font-size:13px;line-height:1.9}
.doc h3{font-size:13px;font-weight:700;margin-top:18px}
.doc p{margin-top:6px}
.doc .date{color:var(--sub);font-size:12px;margin-top:12px}
.doc a:not(.more),.form .note a{text-decoration:underline;text-underline-offset:3px}

/* 背景の写真(2026-11-11)。写真の上では文字を白にする。macOSのダークモードには追従しない */
/* 背景が無地になったので配色はOSの設定に従う(2026-11-12)。ライトは白地に黒、ダークは写真のころと同じ黒地に白。
   --bd は板の線の色、--under は文字の後ろに敷く板の色(どちらも r,g,b)、--ts は文字の影 */
:root{--bg:#fff;--ink:#1d1d1f;--sub:rgba(29,29,31,.64);--line:rgba(29,29,31,.18);--soft:rgba(29,29,31,.06);--bd:29,29,31;--under:255,255,255;--ts:none;color-scheme:light}
@media (prefers-color-scheme:dark){:root{--bg:#111;--ink:#fff;--sub:rgba(255,255,255,.76);--line:rgba(255,255,255,.26);--soft:rgba(255,255,255,.15);--bd:255,255,255;--under:17,17,17;--ts:0 1px 14px rgba(0,0,0,.4);color-scheme:dark}}
body{background:var(--bg)}
#ph{position:fixed;inset:0;z-index:-1;background:#111;overflow:hidden;transition:filter .6s,transform .6s}
#ph i{position:absolute;inset:0;background:center/cover no-repeat;opacity:0;transition:opacity 2s ease}
#ph i.on{opacity:1}
#ph i.z{animation:kb 10s linear both}
@keyframes kb{from{transform:scale(1)}to{transform:scale(1.05)}}
#ph::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.42),rgba(0,0,0,.1) 24%,rgba(0,0,0,.1) 52%,rgba(0,0,0,.66))}  /* 文字が読めるように上と下を暗くする */
body:has(.panel.on) #ph{filter:blur(16px) brightness(.45);transform:scale(1.08)}  /* 中身を開いている間は写真をぼかして暗くする */
.wm,.base,.memo,.dock :is(button,a){text-shadow:var(--ts)}
html:not(.js) #ph{display:none}
@media (prefers-reduced-motion:reduce){#ph i{transition:none;animation:none}}

/* 中身が長くてスクロールする板は、上下の端をくっきり切らずに徐々に透かす。
   --ft と --fb は top.js がスクロールの位置から決める(先頭では上を、末尾では下を透かさない) */
@property --ft{syntax:"<length>";inherits:false;initial-value:0px}
@property --fb{syntax:"<length>";inherits:false;initial-value:0px}
.panel{-webkit-mask-image:linear-gradient(to bottom,transparent,#000 var(--ft),#000 calc(100% - var(--fb)),transparent);mask-image:linear-gradient(to bottom,transparent,#000 var(--ft),#000 calc(100% - var(--fb)),transparent);
  transition:opacity .22s,transform .55s var(--spring),visibility 0s .22s,--ft .3s,--fb .3s}
.panel.on{transition:opacity .22s,transform .55s var(--spring),--ft .3s,--fb .3s}
html:not(.js) .panel{-webkit-mask-image:none;mask-image:none}

/* 入力中の枠は内側に引く(板の端で枠が切れないようにする) */
.form :is(input,select,textarea):focus-visible{outline:2px solid var(--ink);outline-offset:-2px}
.send:focus-visible,.more:focus-visible,.dock :is(button,a):focus-visible{outline:2px solid var(--ink);outline-offset:3px}

/* 送信後は完了の文だけを出す(メール・電話・返信の目安は消す) */
.sent .reach,.sent .reply{display:none}
.sent .done{margin-top:0}

/* ページを移ってきたとき(html.warm)は出だしの動きを出さない。写真も最初から出ている */
.warm .wm,.warm .memo,.warm .base,.warm .dock :is(button,a){animation:none}

/* 使いやすさ(2026-11-11): 小さなリンクの押せる範囲を見た目より広げる。フォーカスを移した板には枠を出さない */
.more,.memo{position:relative}
.memo{position:fixed}
.more::after,.memo::after{content:"";position:absolute;inset:-12px -10px}
.panel:focus{outline:none}

/* 板の下に12pxの余白を持たせる(リンクの押せる範囲が板の外にはみ出して、下の端の透かしが常に出るのを防ぐ)。その分だけ舞台の下端を下げてある */
.panel>div{padding-bottom:12px}

/* iPhone は文字が16px未満の入力欄を押すと画面を拡大する。指で操作する端末では入力欄の文字を16pxにして拡大させない */
@media (pointer:coarse){.form select,.form input,.form textarea{font-size:16px}}

/* ロゴの下の小さな1行(事業の名前)。住所と同じ大きさと色にする */
.tag{position:fixed;left:var(--pad);top:calc(var(--pad) + 28px);font-size:12px;line-height:1.6;color:var(--sub);text-shadow:var(--ts)}
.js .tag{animation:appear .9s .12s both}
.warm .tag{animation:none}
html:not(.js) .tag{position:static}
/* PCではロゴの右に置く(ロゴの幅は約100px)。スマホは幅が足りないのでロゴの下のまま */
@media (min-width:761px){.js .tag{left:calc(var(--pad) + 116px);top:calc(var(--pad) - 1px);line-height:16px}}

/* 訪問者全員が線を描ける板(2026-11-11)。背景の写真のかわりに <canvas id="bd"> を全画面に敷く。仕組みは board.js。
   お取引ガイドと404は板が常に開いているので、トップでパネルを開いたときと同じ薄さ(.16)になる */
#bd{position:fixed;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none;transition:filter .6s,opacity .6s,transform .6s}
/* 中身を開いている間は、写真のときと同じように背景の線をぼかす。線は細いので、ぼかしを強くすると見えなくなる(3pxが目安) */
body:has(.panel.on) #bd{filter:blur(3px);opacity:.8;transform:scale(1.08)}  /* 開くと少し拡大し、閉じると元の大きさに戻る(写真のときと同じ1.08倍) */
html:not(.js) #bd{display:none}
/* 描けるあいだ(html.bdon: つながっていて、インクが残っている)だけ、指で動かしても画面が動かず、カーソルは線の太さの点にする。
   何もない所のカーソルは、描き始めの線と同じ太さ(1.3px)の白い丸にし、見失わないように薄い輪(直径18px)で囲む */
.bdon body{touch-action:none}
.bdon .panel{touch-action:pan-y}
.bdon body,.bdon .stage{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Ccircle cx='12' cy='12' r='9' fill='none' stroke='%231d1d1f' stroke-opacity='.35'/%3E%3Ccircle cx='12' cy='12' r='.65' fill='%231d1d1f'/%3E%3C/svg%3E") 12 12,crosshair}
@media (prefers-color-scheme:dark){.bdon body,.bdon .stage{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24'%3E%3Ccircle cx='12' cy='12' r='9' fill='none' stroke='white' stroke-opacity='.35'/%3E%3Ccircle cx='12' cy='12' r='.65' fill='white'/%3E%3C/svg%3E") 12 12,crosshair}}
.bdon .panel>div,.bdon .base,.bdon .tag{cursor:auto}
.bdon body:has(.panel.on),.bdon body:has(.panel.on) .stage{cursor:auto}
html.drawing,html.drawing *{user-select:none;-webkit-user-select:none}
/* 文字とアイコンの下だけ線を薄くする。ぼかした暗い板を文字のすぐ後ろに敷く */
.wm::before,.tag::before,.base::before,.dock::before,.memo::before{content:"";position:absolute;inset:-10px -18px;background:rgba(var(--under),.82);filter:blur(9px);z-index:-1;pointer-events:none}
html:not(.js) :is(.wm,.tag,.base,.dock,.memo)::before{display:none}