/* 高知みらい創産 トップページ。値は 組みの設計.md の表からだけ取る */
:root {
  --ground: #FEFFF4;
  --navy: #13365E;
  --mid: #245082;
  --mid2: #3C6DA6;
  --yellow: #E4C84C;
  --ink: #191919;
  --rule: #D5DCE6;
  /* 淡い青：中間色① #3C6DA6 を白に約12%混ぜた色。brand-colors.md では淡い背景色は「未確定」（brand-color-rules.md 4章）。決まったら置き換える */
  --tint: #E7EDF4;
  --tint-end: #F6F8F5;
  --wrap: 1120px;
  --gutter: 32px;
  --gap: 128px;
  --radius: 16px;
  --f-gothic: "Zen Kaku Gothic New", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  --f-mincho: "Shippori Mincho", "Hiragino Mincho ProN", "Yu Mincho", serif;
  --fs-d: 48px;
  --fs-h: 48px;
  --fs-b: 36px;
  --fs-t: 23px;
  --fs-p: 18px;
  --fs-s: 16px;
  --fs-n: 64px;
  --fs-k: 28px;
}
@media (max-width: 767px) {
  :root {
    --gutter: 20px;
    --gap: 80px;
    --fs-d: 30px;
    --fs-h: 32px;
    --fs-b: 26px;
    --fs-t: 20px;
    --fs-p: 17px;
    --fs-s: 15px;
    --fs-n: 44px;
    --fs-k: 24px;
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 88px; overflow-x: clip; }
body { overflow-x: clip; }
body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--f-gothic);
  font-size: var(--fs-p);
  line-height: 1.9;
  letter-spacing: 0.04em;
  -webkit-font-smoothing: antialiased;
}
p, h1, h2, h3, h4, dd, li, td, th, label, a, span {
  word-break: auto-phrase;
  line-break: strict;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
ul, ol, dl, dd { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4 { margin: 0; }
p { margin: 0 0 1em; }
.wrap { max-width: calc(var(--wrap) + var(--gutter) * 2); margin: 0 auto; padding: 0 var(--gutter); }
.section { padding: var(--gap) 0 0; }
.pc { display: inline; }
@media (max-width: 767px) { .pc { display: none; } }

/* 見出し：ゴシックの太字で目立たせる（2026-11-01 土田） */
.sec-title {
  font-family: var(--f-gothic);
  font-weight: 700;
  font-size: var(--fs-h);
  line-height: 1.35;
  letter-spacing: 0.08em;
  color: var(--navy);
  margin-bottom: 40px;
}
.sec-title::after {
  content: "";
  display: block;
  width: 48px;
  height: 3px;
  background: var(--yellow);
  margin-top: 16px;
}
.sub-title {
  font-weight: 700;
  font-size: var(--fs-s);
  letter-spacing: 0.1em;
  color: var(--mid);
  margin: 24px 0 8px;
}
.sub-title.big { font-size: var(--fs-t); color: var(--navy); margin: 0 0 12px; letter-spacing: 0.06em; }
.illust { width: 100%; height: auto; }
.photo { border-radius: var(--radius); object-fit: cover; width: 100%; }

/* ボタン */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 999px; text-decoration: none; font-weight: 700;
  letter-spacing: 0.08em; transition: opacity .2s;
}
.btn:hover { opacity: .85; }
.btn-outline { border: 1.5px solid var(--navy); color: var(--navy); padding: 12px 28px; font-size: var(--fs-s); }
.btn-outline::after { content: "↗"; margin-left: 10px; }
.company-table a { color: var(--navy); }

/* ヘッダー */
/* ヘッダー：最初は写真の上に透明で重ね（白の文字）、写真を過ぎたら白地に紺の文字（2026-11-01 土田「紺のヘッダーは AI っぽい」） */
.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  background: transparent; transition: background .3s, box-shadow .3s;
}
.site-header.scrolled { background: var(--ground); box-shadow: 0 1px 0 var(--rule); }
.logo .on-ground { display: none; }
.site-header.scrolled .logo .on-photo { display: none; }
.site-header.scrolled .logo .on-ground { display: block; }
.header-inner {
  max-width: 1440px; margin: 0 auto; padding: 14px 64px 14px 24px; /* 右は 11/5 土田「ヘッダーの右側、もうちょい余白」で 24→64px */
  display: flex; align-items: center; gap: 28px;
}
.logo { display: flex; align-items: center; gap: 10px; text-decoration: none; margin-right: auto; }
.logo-mark { width: 48px; height: 48px; }
.logo-type { height: 38px; width: auto; }
.global-nav ul { display: flex; gap: 28px; }
.global-nav a { text-decoration: none; font-size: var(--fs-s); font-weight: 700; color: #fff; text-shadow: 0 1px 8px rgba(10,30,55,.35); transition: color .3s; }
.site-header.scrolled .global-nav a { color: var(--navy); text-shadow: none; }
.global-nav a:hover { opacity: .75; }
.menu-toggle { display: none; }
@media (max-width: 960px) {
  .header-inner { padding: 10px var(--gutter); gap: 12px; }
  .logo-mark { width: 36px; height: 36px; }
  .logo-type { height: 30px; }
  .menu-toggle {
    display: inline-flex; flex-direction: column; justify-content: center; gap: 5px;
    width: 40px; height: 40px; border: 0; background: none; padding: 8px; cursor: pointer;
  }
  .menu-toggle span { display: block; height: 2px; background: #fff; }
  .site-header.scrolled .menu-toggle span { background: var(--navy); }
  .global-nav {
    position: fixed; inset: 64px 0 auto 0; background: var(--ground);
    border-top: 1px solid var(--rule); box-shadow: 0 12px 24px rgba(19,54,94,.12);
    display: none;
  }
  .global-nav.open { display: block; }
  .global-nav ul { flex-direction: column; gap: 0; padding: 8px var(--gutter) 16px; }
  .global-nav a, .site-header .global-nav a { display: block; padding: 14px 0; font-size: var(--fs-p); border-bottom: 1px solid var(--rule); color: var(--navy); text-shadow: none; }
}
@media (max-width: 400px) { .logo-type { height: 24px; } .logo-mark { width: 30px; height: 30px; } }

/* 1画面目 */
/* 1画面目：写真・一言・添え文・事業の入口までを最初の画面に収める（2026-11-01 土田「最初の画面と三つのボタンが見えないと意味がない」） */
/* --hl・--hr は事業の入口の左右の空き（添え文の左端も --hl）。PC・タブレットでは、入口の白枠が右下の丸（右から28px・直径112px）に
   掛からないよう、右に最低156pxを空ける（11/5 土田「白のところとお問い合わせが被るんじゃなくて、白のところを狭く」）。
   画面が広い時は左右とも本文の幅にそろう。--hlv・--hrv は字の大きさの計算用に同じ値を画面幅で持つ */
.hero {
  padding: 0; display: grid;
  --hl: max(var(--gutter), calc((100% - var(--wrap)) / 2)); --hr: max(156px, calc((100% - var(--wrap)) / 2));
  --hlv: max(var(--gutter), calc((100vw - var(--wrap)) / 2)); --hrv: max(156px, calc((100vw - var(--wrap)) / 2));
}
.hero-frame { grid-area: 1 / 1; }
.hero-sub { grid-area: 1 / 1; }
/* 事業の入口は写真の上に載せる（2026-11-01 土田「三つのボタンも写真の上に乗っけちゃっていい」） */
.entries { grid-area: 1 / 1; align-self: end; z-index: 2; }
.hero-frame {
  position: relative; width: 100%; margin: 0;
  height: 100svh; min-height: 640px; overflow: hidden;
}
.hero-photo { width: 100%; height: 100%; object-fit: cover; object-position: 50% 35%; }
.hero picture { display: block; height: 100%; }
.hero-frame::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 180px; z-index: 1; pointer-events: none;
  background: linear-gradient(to bottom, rgba(10, 30, 55, .5), rgba(10, 30, 55, 0));
}
.hero-frame::after {
  content: ""; position: absolute; inset: auto 0 0 0; height: 40%;
  background: linear-gradient(to top, rgba(10, 30, 55, .45), rgba(10, 30, 55, 0));
}
/* 一言は、ヘッダー（約76px）と事業の入口（下から約108px）の間の中央に置く。字の大きさは、その間に上下40pxずつ空けて収まる大きさまで
   （一言の縦の長さは字の約13.5倍）。11/5 土田「中央の文章と下の白枠が近すぎる」。ノートPCの高さ（720〜768px）では重なっていた */
.hero-copy {
  position: absolute; top: calc(50% - 16px); left: 50%; transform: translate(-50%, -50%);
  writing-mode: vertical-rl; margin: 0; white-space: nowrap; z-index: 1;
  font-family: var(--f-mincho); font-weight: 500; font-size: min(var(--fs-d), calc((max(100svh, 640px) - 264px) / 13.5));
  letter-spacing: 0.12em; color: #fff; text-shadow: 0 1px 12px rgba(10,30,55,.35);
}
.hero-sub {
  position: relative; align-self: end; justify-self: start; z-index: 2;
  margin: 0 0 140px var(--hl); max-width: min(520px, calc(50% - var(--hl) - 56px));
  color: #fff; font-size: min(21px, calc((50vw - var(--hlv) - 56px) / 19)); font-weight: 700; line-height: 1.8; text-shadow: 0 1px 10px rgba(10,30,55,.4);
}
.entries {
  width: calc(100% - var(--hl) - var(--hr)); margin: 0 0 36px var(--hl);
  box-shadow: 0 12px 32px rgba(10, 30, 55, .25);
  display: grid; grid-template-columns: repeat(3, 1fr);
  border: 1.5px solid var(--navy); border-radius: 14px; background: #fff;
}
.entries a {
  position: relative; padding: 16px 16px; text-align: center; text-decoration: none; /* 11/5 土田「白枠もうちょい狭く」で上下 22→16px */
  font-weight: 700; font-size: 20px; color: var(--navy); letter-spacing: 0.06em;
}
.entries a + a { border-left: 1px solid var(--rule); }
.entries a:first-child { border-radius: 14px 0 0 14px; }
.entries a:last-child { border-radius: 0 14px 14px 0; }
.entries a::after { content: "›"; margin-left: 14px; color: var(--mid2); }
.entries a:hover { background: rgba(60,109,166,.06); }
/* 入口が狭い幅では、一番長い「DX・AI導入の伴走支援 ›」（字の約13.4倍＋左右の余白46px）が1行に収まるまで字を小さくする（16〜20px） */
@media (min-width: 961px) { .entries a { font-size: min(20px, max(16px, calc(((100vw - var(--hlv) - var(--hrv)) / 3 - 46px) / 13.4))); padding-left: 12px; padding-right: 12px; } }
/* タブレット（768〜960px）は、入口を左に寄せて右だけ丸の分を空ける。入口の事業名が2行に折れて白枠が高くなるので、添え文を上げる */
@media (min-width: 768px) and (max-width: 960px) {
  .entries a { font-size: 16px; padding-left: 12px; padding-right: 12px; }
  .hero-sub { margin-bottom: 180px; }
  /* 白枠が高い（下から約146px）ので、一言の置き場所と字の大きさの計算もそれに合わせる */
  .hero-copy { top: calc(50% - 35px); font-size: min(var(--fs-d), calc((max(100svh, 640px) - 302px) / 13.5)); }
}
@media (max-width: 767px) {
  .hero { --hl: var(--gutter); --hr: var(--gutter); --hlv: var(--gutter); --hrv: var(--gutter); }
  .hero-frame { height: 100svh; min-height: 560px; }
  /* 一言は、ヘッダー（約64px）と事業の入口（約184px）の間の中央に置く。背の低い画面では字を小さくして収める */
  .hero-copy { top: calc(50% - 60px); font-size: min(var(--fs-d), calc((100svh - 280px) / 13.5)); }
  .entries { margin-bottom: 20px; }
  .entries a:first-child { border-radius: 14px 14px 0 0; }
  .entries a:last-child { border-radius: 0 0 14px 14px; }
  .hero-sub { grid-area: 2 / 1; align-self: start; color: var(--navy); margin: 24px var(--gutter) 0; max-width: none; font-size: 17px; text-shadow: none; }
  .entries a { padding: 14px 16px; font-size: 17px; line-height: 1.5; }
  .hero-frame::after { display: none; }
  .hero-copy { letter-spacing: 0.1em; }
  .entries { grid-template-columns: 1fr; margin-top: 20px; }
  .entries a + a { border-left: 0; border-top: 1px solid var(--rule); }
}

/* 私たちについて */
.about-grid {
  display: grid; grid-template-columns: minmax(0, 1fr) 50vw; gap: 64px; align-items: start;
  max-width: none; padding-right: 0; padding-left: max(var(--gutter), calc((100vw - var(--wrap)) / 2));
}
.about-illust { width: 340px; margin-top: 24px; }
.about-photo { aspect-ratio: 4 / 3; border-radius: var(--radius) 0 0 var(--radius); }
@media (max-width: 767px) {
  .about-grid { grid-template-columns: 1fr; gap: 24px; padding: 0; }
  .about-text { padding: 0 var(--gutter); }
  .about-photo { border-radius: 0; }
  .about-illust { width: 240px; margin: 16px auto 0; }
}

/* 欄の背景の塗り分け（2026-11-01 土田「事業・流れ・強みの切れ目が分かりづらい。バックの色を変えて」）。切れ目は波の形 */
.bg-tint { background: var(--tint); }
.bg-tint-grad { background: linear-gradient(180deg, var(--tint) 0%, var(--tint-end) 100%); }
.bg-navy { background: var(--navy); color: var(--ground); }
.section.bg-tint, .section.bg-tint-grad, .section.bg-navy { padding: calc(var(--gap) * 0.55) 0 calc(var(--gap) * 0.75); }
.wave { line-height: 0; margin-top: var(--gap); }
.wave svg { display: block; width: 100%; height: 56px; }
.wave.from-tint, .wave.from-navy, .wave.from-tintend { margin-top: 0; }
.wave.from-tint { background: var(--tint); }
.wave.from-navy { background: var(--navy); }
.wave.from-tintend { background: var(--tint-end); }
.wave.to-tint path { fill: var(--tint); }
.wave.to-navy path { fill: var(--navy); }
.wave.to-ground path { fill: var(--ground); }
.wave + .section.bg-tint, .wave + .section.bg-tint-grad, .wave + .section.bg-navy { margin-top: -1px; }
/* 紺の面の上の文字 */
.bg-navy .sec-title { color: var(--ground); }
.bg-navy .members .mem { border-color: rgba(254,255,244,.25); }
.bg-navy .members .role { color: var(--yellow); }
.bg-navy .members .name { color: var(--ground); }
.bg-navy .members dd { color: var(--ground); }

/* 事業：3つは同じ組み。違いはイラストの左右だけ */
.business { padding-top: var(--gap); }
.biz {
  display: grid; grid-template-columns: 380px 1fr; gap: 64px; align-items: start;
  padding: 56px 0; border-top: 1px solid var(--rule);
}
.biz:first-of-type { border-top: 0; padding-top: 0; }
.biz-rev { grid-template-columns: 1fr 380px; }
.biz-rev .biz-illust { order: 2; }
.biz-illust { max-width: 380px; margin-top: 8px; }
.biz-title {
  font-weight: 700; font-size: var(--fs-b); line-height: 1.4; color: var(--navy);
  letter-spacing: 0.06em; padding-left: 18px; border-left: 6px solid var(--yellow);
  margin-bottom: 16px;
}
.biz-lead { font-size: 20px; font-weight: 500; line-height: 1.8; }
.services { display: flex; flex-wrap: wrap; gap: 8px; }
.services li {
  padding: 7px 16px; border: 1px solid var(--mid2); border-radius: 999px;
  font-size: var(--fs-s); color: var(--navy); line-height: 1.6;
}
.works li {
  display: grid; grid-template-columns: 56px 7em 1fr; gap: 16px; align-items: center;
  padding: 12px 0; border-bottom: 1px solid var(--rule);
}
.works li:first-child { border-top: 1px solid var(--rule); }
.works img { width: 56px; height: 56px; }
.works .ind { font-size: var(--fs-s); font-weight: 700; color: var(--mid); }
.works .what { font-weight: 500; line-height: 1.6; font-size: 18px; }
.works .effect {
  display: inline-block; margin-left: 12px; color: var(--navy); font-weight: 700; white-space: nowrap;
}
/* 数字は大きく、助数詞は本文の大きさ。基準線はそろえる（過去の指摘24） */
.works .effect b { font-size: var(--fs-k); line-height: 1; vertical-align: baseline; margin: 0 1px; }
@media (max-width: 960px) {
  .biz, .biz-rev { grid-template-columns: 1fr; gap: 24px; }
  .biz-rev .biz-illust { order: 0; }
  .biz-illust { max-width: 300px; margin: 0 auto; }
}
@media (max-width: 767px) {
  .biz { padding: 40px 0; }
  .works li { grid-template-columns: 48px 1fr; gap: 2px 12px; }
  .works img { width: 48px; height: 48px; grid-row: span 2; }
  .works .what { font-size: 17px; }
  .works .effect { display: block; margin-left: 0; }
}

/* ご相談の流れ */
.flow-grid { display: grid; grid-template-columns: 340px 1fr; gap: 40px; }
.flow-grid .sec-title { white-space: nowrap; }
.steps { position: relative; counter-reset: s; }
.step {
  display: grid; grid-template-columns: 72px 220px 1fr; gap: 28px; align-items: center;
  padding: 20px 0;
}
.step + .step { border-top: 1px dashed #B9C8DA; }
.step-no { font-family: var(--f-mincho); font-weight: 400; font-size: var(--fs-n); color: var(--navy); line-height: 1; text-align: center; }
.step-illust { width: 220px; }
.step-title { font-size: var(--fs-t); font-weight: 700; color: var(--navy); margin-bottom: 4px; letter-spacing: 0.06em; }
.step-body p { margin: 0; }
@media (max-width: 960px) {
  .flow-grid { grid-template-columns: 1fr; gap: 0; }
}
@media (max-width: 767px) {
  .step { grid-template-columns: 48px 1fr; gap: 8px 16px; }
  .step-illust { grid-column: 2; width: 180px; }
  .step-no { grid-row: span 2; align-self: start; padding-top: 8px; }
}

/* 私たちの強み */
.str { display: grid; grid-template-columns: 360px 1fr; gap: 56px; align-items: center; padding: 24px 0; }
.str-rev { grid-template-columns: 1fr 520px; }
.str-rev .str-illust { order: 2; }
.str-body p { margin: 0; }
@media (max-width: 960px) {
  .str, .str-rev { grid-template-columns: 1fr; gap: 16px; }
  .str-rev .str-illust { order: 0; }
  .str-illust { max-width: 320px; margin: 0 auto; }
}

/* メンバー */
.members .mem {
  display: grid; grid-template-columns: 320px 1fr; gap: 32px; align-items: center;
  padding: 24px 0; border-bottom: 1px solid var(--rule);
}
.members .mem:first-child { border-top: 1px solid var(--rule); }
.members dt { display: flex; flex-direction: column; gap: 2px; }
.members .role { font-size: var(--fs-s); font-weight: 700; color: var(--mid); }
.members .name { font-size: 30px; font-weight: 700; color: var(--navy); letter-spacing: 0.12em; }
@media (max-width: 767px) {
  .members .mem { grid-template-columns: 1fr; gap: 8px; }
}

/* お問い合わせ */
.contact-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; }
.contact-illust { width: 220px; }
.form {
  margin-top: 32px; display: grid; grid-template-columns: 1fr 1fr; gap: 20px 32px;
  background: #fff; border: 1px solid var(--rule); border-radius: var(--radius); padding: 40px;
}
.f { display: flex; flex-direction: column; gap: 6px; font-size: var(--fs-s); font-weight: 700; color: var(--navy); }
.f em { font-style: normal; font-size: 13px; color: #fff; background: var(--mid); border-radius: 4px; padding: 0 6px; margin-left: 8px; }
.f-wide { grid-column: 1 / -1; }
.f input, .f select, .f textarea {
  font: inherit; font-weight: 400; font-size: var(--fs-p); color: var(--ink);
  border: 1px solid #B9C4D3; border-radius: 6px; padding: 10px 12px; background: #fff; width: 100%;
}
.f input:focus, .f select:focus, .f textarea:focus { outline: 2px solid var(--mid2); outline-offset: 1px; }
.agree { grid-column: 1 / -1; font-size: var(--fs-s); display: flex; align-items: center; gap: 8px; }
.btn-submit {
  grid-column: 1 / -1; justify-self: center; border: 0; cursor: pointer;
  background: var(--navy); color: var(--ground); font: inherit; font-weight: 700; font-size: var(--fs-p);
  padding: 14px 72px;
}
.mail-note { text-align: center; margin-top: 20px; font-size: var(--fs-s); }
@media (max-width: 767px) {
  .contact-head { flex-direction: column; align-items: flex-start; }
  .contact-illust { width: 160px; align-self: flex-end; margin-top: -8px; }
  .form { grid-template-columns: 1fr; padding: 24px 20px; }
  .btn-submit { width: 100%; padding: 14px; }
}

/* 会社概要・高知の事業として */
.company-table { width: 100%; border-collapse: collapse; }
.company-table th, .company-table td { padding: 14px 16px; border-bottom: 1px solid var(--rule); text-align: left; vertical-align: top; }
.company-table tr:first-child th, .company-table tr:first-child td { border-top: 1px solid var(--rule); }
.company-table th { width: 9em; font-size: var(--fs-s); font-weight: 700; color: var(--mid); white-space: nowrap; }
.kochi { margin-top: var(--gap); }
.kochi .btn-outline { margin-top: 8px; }
.kochi-photo { width: 100vw; max-width: none; margin: 32px 0 0 calc(50% - 50vw); border-radius: 0; aspect-ratio: 16 / 6; object-position: 50% 55%; }
@media (max-width: 767px) {
  .company-table th, .company-table td { display: block; width: auto; border: 0; padding: 0; }
  .company-table tr { display: block; padding: 12px 0; border-bottom: 1px solid var(--rule); }
  .company-table tr:first-child { border-top: 1px solid var(--rule); }
  .kochi-photo { aspect-ratio: 4 / 3; }
}

/* フッター */
.site-footer { margin-top: var(--gap); color: var(--ground); }
.site-footer .footer-wave { background: var(--ground); }
.footer-wave { display: block; width: 100%; height: 40px; }
.footer-wave path { fill: var(--navy); }
.footer-inner {
  background: var(--navy); padding: 32px var(--gutter) 48px;
  display: flex; flex-wrap: wrap; align-items: center; gap: 24px 40px;
}
.footer-inner .logo { margin-right: 0; }
.footer-nav { display: flex; flex-wrap: wrap; gap: 8px 24px; flex: 1; justify-content: center; }
.footer-nav a { text-decoration: none; font-size: var(--fs-s); }
.footer-nav a:hover { text-decoration: underline; }
.copy { margin: 0; font-size: 14px; opacity: .9; }
/* 右下の丸（右から28px・直径112px）の下に © が隠れていた（11/5 土田）。© はロゴとメニューの下の行に左寄せで置き、
   PC・タブレットではメニューの右にも丸の分を空ける（メニューの最後の「瀬戸内みらい創産」も丸に掛かっていた） */
.copy { flex-basis: 100%; }
@media (min-width: 768px) { .footer-inner { padding-right: 168px; } }
@media (max-width: 767px) {
  .footer-inner { flex-direction: column; align-items: flex-start; }
  .footer-nav { justify-content: flex-start; display: grid; grid-template-columns: 1fr 1fr; width: 100%; }
}

/* 追従のお問い合わせボタン：PC・スマートフォンとも常に右下。6秒ごとに弾む（2026-11-01 土田）。
   周りの黄色い破線の輪は 11/5 に外した（土田「黄色い枠の部分はいらない」）。ヘッダー右上のお問い合わせボタンも同日に外し、問い合わせの入口はこのボタンだけにした */
.float-contact {
  position: fixed; right: 28px; bottom: 28px; z-index: 40;
  width: 112px; height: 112px; border-radius: 50%;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  background: var(--navy); color: var(--ground); text-decoration: none; font-weight: 700;
  font-size: 15px; line-height: 1.3; letter-spacing: 0.06em; text-align: center;
  box-shadow: 0 10px 28px rgba(19,54,94,.32);
  animation: fc-bounce 6s ease-in-out infinite;
}
.float-contact svg { width: 30px; height: 30px; }
.float-contact:hover { background: var(--mid); }
@keyframes fc-bounce {
  0%, 84%, 100% { transform: translateY(0) rotate(0); }
  88% { transform: translateY(-10px) rotate(-6deg); }
  92% { transform: translateY(0) rotate(5deg); }
  96% { transform: translateY(-4px) rotate(0); }
}
@media (max-width: 767px) {
  .float-contact { right: 12px; bottom: 12px; width: 64px; height: 64px; font-size: 12px; line-height: 1.2; gap: 1px; }
  .float-contact svg { width: 18px; height: 18px; }
}

/* 本文の中の改行は PC の幅に合わせて入れているので、スマートフォンでは外して画面の幅で折り返す。
   入れたままだと「合わせて」だけの行などが出る（11/5 に土田が画面で入れた改行で確認）。最上部の一言は改行を残す */
@media (max-width: 767px) {
  .section p br { display: none; }
}

/* 欄が画面に入る時に下からふわっと出す（JS が有る時だけ） */
.js .reveal { opacity: 0; transform: translateY(28px); transition: opacity .8s ease, transform .8s ease; }
.js .reveal.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .float-contact { animation: none; }
  .js .reveal { opacity: 1; transform: none; transition: none; }
}