/* トップとお問い合わせの見た目（2026-10-06 作り直し）。
   白地に黒の文字、色はロゴの紺だけ。書体は端末に入っているものを使う（読み込まない） */
:root {
  --ink: #111;
  --ink-2: #5c5c5c;
  --ink-3: #8a8a8a;
  --line: #e8e8e8;
  --bg: #fafaf8;
  --navy-ink: #1f2d3d;
  --soft: #f6f6f5;
  --navy: #0A3057;
  --wrap: 720px;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: "Noto Sans JP", -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Yu Gothic UI", Meiryo, sans-serif;
  font-size: 16px; line-height: 1.7; letter-spacing: .01em;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 20px; }

/* 最初の一画面（2026-10-06・開発者のイメージ）：左に言葉、右に手描きの軌跡、右下に製品 */
.hero { position: relative; max-width: 1672px; margin: 0 auto; aspect-ratio: 1672 / 940; color: var(--navy-ink); }
.hero .trail { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero .copy { position: absolute; left: 8.3%; top: 10%; width: 40%; }
.hero h1 {
  font-weight: 500;
  font-size: clamp(34px, 4.2vw, 72px); line-height: 1.42; letter-spacing: .08em; margin: 0 0 .7em;
}
.hero .copy p { font-size: clamp(14px, 1.08vw, 18px); line-height: 1.85; letter-spacing: .08em; margin: 0 0 1em; word-break: auto-phrase; }
.hero .copy .nb { display: inline-block; }
.hero .copy .sign { margin-top: 1.8em; letter-spacing: .04em; }

.trail .wash { opacity: .5; }
.trail .ink, .trail .route { fill: none; stroke: var(--navy-ink); stroke-linecap: round; stroke-linejoin: round; }
.trail .route { stroke-width: 2.8; stroke-dasharray: 1; stroke-dashoffset: 1; animation: draw 3.2s cubic-bezier(.45,.05,.25,1) .2s forwards; }
.trail .ink { stroke-width: 2.4; }
.trail .ink.thin { stroke-width: 1.8; opacity: .75; }
.trail .paper { fill: var(--bg); }
.trail .dot { fill: var(--bg); }
.trail .fillink { fill: var(--navy-ink); stroke: none; }
.trail .tree path { stroke: #5b8f7f; stroke-width: 2; fill: #8fb5a5; stroke-linejoin: round; }
.trail .tree .leaf { fill: #8fb5a5; stroke: none; }
.trail .foot path { fill: #6f93a6; }
.trail .en text { font-family: "Caveat", cursive; font-size: 40px; fill: var(--navy-ink); }
.trail .ja text { font-family: "Klee One", "Hiragino Maru Gothic ProN", sans-serif; font-size: 19px; fill: var(--ink-2); letter-spacing: .12em; }
.trail .icon, .trail .foot, .trail .tree, .trail .en, .trail .ja, .trail .wash, .trail > .ink { animation: fade .8s ease .6s backwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes fade { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .trail .route { animation: none; stroke-dashoffset: 0; }
  .trail * { animation: none !important; }
}

/* 狭い画面：言葉 → 軌跡 → 製品 の順に積む */
@media (max-width: 960px) {
  .hero { aspect-ratio: auto; padding: 56px 20px 24px; }
  .hero .copy { position: static; width: auto; }
  .hero .trail { position: static; height: auto; aspect-ratio: 1672 / 780; margin: 0 -20px 8px; width: calc(100% + 40px); }
}

/* 見出し */
main > section > h2 { font-size: 14px; font-weight: 600; color: var(--ink-3); letter-spacing: .08em; margin: 0 0 12px; }
main section { padding: 32px 0; }

/* 製品 */
.products { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.products a {
  display: flex; align-items: center; gap: 18px; padding: 22px 4px;
  border-bottom: 1px solid var(--line); transition: background .15s;
}
.products a:hover { background: var(--soft); }
.products .ico {
  width: 52px; height: 52px; border-radius: 12px; overflow: hidden; flex: none;
  border: 1px solid var(--line); display: grid; place-items: center; background: #fff;
}
.products .ico img { width: 100%; height: 100%; object-fit: cover; }
.products .ico svg { width: 26px; height: 26px; fill: none; stroke: var(--navy); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.products .txt { flex: 1; min-width: 0; }
.products b { display: block; font-size: 18px; font-weight: 600; }
.products small { display: block; color: var(--ink-2); font-size: 14px; line-height: 1.6; }
.products .go { color: var(--ink-3); font-size: 18px; flex: none; }
.products a:hover .go { color: var(--ink); }

/* お知らせ */
.news { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.news li { border-bottom: 1px solid var(--line); }
.news li > a, .news li > span { display: flex; gap: 20px; padding: 14px 4px; font-size: 15px; }
.news li > a:hover { background: var(--soft); }
.news time { color: var(--ink-3); font-variant-numeric: tabular-nums; flex: none; width: 6.2em; }
@media (max-width: 560px) { .news li > a, .news li > span { flex-direction: column; gap: 0; } }

/* お問い合わせ */
.page-head { padding: 72px 0 24px; }
.page-head h1 { font-size: 32px; margin: 0 0 8px; }
.page-head p { color: var(--ink-2); margin: 0; }
.contact-form { display: grid; gap: 18px; padding-bottom: 24px; }
.contact-form .row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 560px) { .contact-form .row { grid-template-columns: 1fr; } }
.contact-form label { display: block; font-size: 14px; font-weight: 600; margin-bottom: 6px; }
.contact-form .req { color: #c0392b; }
.contact-form input, .contact-form select, .contact-form textarea {
  width: 100%; font: inherit; color: var(--ink); background: #fff;
  border: 1px solid #d6d6d6; border-radius: 8px; padding: 10px 12px;
}
.contact-form input:focus, .contact-form select:focus, .contact-form textarea:focus { outline: 2px solid var(--navy); outline-offset: -1px; border-color: transparent; }
.contact-form .hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.contact-form button {
  justify-self: start; font: inherit; font-weight: 600; color: #fff; background: var(--navy);
  border: 0; border-radius: 999px; padding: 12px 32px; cursor: pointer;
}
.contact-form button:hover { background: #072442; }
.contact-form .note { color: var(--ink-3); font-size: 13px; margin: 0; }