/* =========================================================
   EPOCH-NET 公式サイト（リニューアル試作） / styles.css
   準拠: universal_design/WebUD規約_v1.0_AIコーディング向け.md
   2026-11-09 レビュー後に整理（追記で重複していた規則を統合、死んだ規則を削除）
   2026-11-10 規約の修正（AA達成基準との突き合わせ）に合わせて見直し
   ========================================================= */

/* ---- UD-COL-01/02: コントラスト計算済みトークン ---- */
:root{
  --ink:#1b1b1b;            /* 白比17.2:1 */
  --ink-2:#4d4d4d;          /* 白比8.5:1 / #f2f5f8比7.8:1 / 各tint比7.3〜7.5 */
  --bg:#ffffff; --bg-alt:#f2f5f8;
  --link-visited:#7030a0;   /* 白9:1 / tint比7以上 */
  --footer:#0d2438; --footer-ink:#dfe7ee; --footer-link:#a8d3ff; /* #dfe7ee 12.7:1 / #a8d3ff 10.6:1 */
  --focus-dark:#ffd166;     /* ダーク面（各header比7.6以上） */
  --accent:#b45309;         /* 枠線のみ（#fff7e6比4.7:1） */
  --accent-bg:#fff7e6; --accent-text:#5f4400; /* 8.5:1 */
  --success-text:#145a33;   /* 白8.4:1 / #f2f5f8 7.6:1 */
  --error:#b3261e; --error-text:#8a1e17; --error-bg:#fdeceb; /* #8a1e17 on #fdeceb 8.0:1 */
  --line:#c7d3de;           /* 装飾の枠線のみ（コントラスト対象外） */
  --nav-h:3.75rem;          /* スティッキーナビの実高（UD-LAY-05） */
}

/* ---- テーマカラー（業界ごとに切り替え。body[data-theme]で指定）----
   ロゴの紺 #1B1464・水色 #29ABE2・橙 #E65B29 を基調にする。
   水色・橙は白地で4.5:1未満のため装飾だけに使う。
   コントラスト（2026-11-09計算）: 白文字/primary、primary/tint、白文字/header、金リング/header
     brand   #1f4fb4 7.4 / 6.6 / #1B1464 15.8 / 10.9
     ishikai #0b6b5d 6.4 / 5.7 / #08453c 10.9 / 7.6
     houkan  #b23a5b 5.8 / 5.0 / #6e1f37 11.0 / 7.6
     gakkai  #4b3f9e 8.4 / 7.3 / #2a2366 13.7 / 9.5
     hoshu   #1f5f8b 6.8 / 6.0 / #123a55 11.9 / 8.3 */
:root,[data-theme="brand"]{--primary:#1f4fb4;--primary-dark:#183f91;--link:#1f4fb4;--focus:#1f4fb4;--header:#1B1464;--header-hover:#2c2585;--primary-tint:#eaf3fb;--deco:#29ABE2}
[data-theme="ishikai"]{--primary:#0b6b5d;--primary-dark:#085247;--link:#0b6b5d;--focus:#0b6b5d;--header:#08453c;--header-hover:#0e5a4f;--primary-tint:#e6f4f1;--deco:#3fb6a0}
[data-theme="houkan"]{--primary:#b23a5b;--primary-dark:#8f2d48;--link:#a8324f;--focus:#b23a5b;--header:#6e1f37;--header-hover:#86294a;--primary-tint:#fcecf0;--deco:#e98aa4}
[data-theme="gakkai"]{--primary:#4b3f9e;--primary-dark:#3a3080;--link:#4b3f9e;--focus:#4b3f9e;--header:#2a2366;--header-hover:#3a3287;--primary-tint:#efedf9;--deco:#9a8fe0}
[data-theme="hoshu"]{--primary:#1f5f8b;--primary-dark:#184b6e;--link:#1f5f8b;--focus:#1f5f8b;--header:#123a55;--header-hover:#1a4c6e;--primary-tint:#e8f1f7;--deco:#E65B29}

*,*::before,*::after{box-sizing:border-box}

/* UD-TYP-01: ルートは%指定。UD-LAY-05: スティッキーナビがフォーカスを隠さない */
html{font-size:100%;scroll-padding-top:calc(var(--nav-h) + 14px)}
html[data-fontsize="large"]{font-size:125%} /* UD-TYP-08 */

body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:"BIZ UDPGothic","Hiragino Sans","Noto Sans JP","Yu Gothic",system-ui,sans-serif; /* UD-TYP-07 */
  font-size:1rem;line-height:1.8; /* UD-TYP-03 */
  overflow-wrap:anywhere;          /* UD-LAY-01 */
}
img,svg{max-width:100%;height:auto}
h1,h2,h3,h4{line-height:1.45;margin-block:1.2em .6em}
h2{font-size:clamp(1.4rem,1.2rem + .8vw,1.8rem)} /* UD-TYP-01 vwはclamp内のみ */
h3{font-size:1.2rem}
p{margin-block:.9em}
main p:not([class]),main li{max-width:44rem} /* UD-TYP-04 行長 */
main .cards > li,main .steps > li,main .stats > li,main .plan-cards > li,main .channels > li,main .gallery > li,main .case-cards > li,main .tech > li{max-width:none}
a{color:var(--link);text-underline-offset:.2em} /* UD-COL-03 リンク=色+下線 */
a:visited{color:var(--link-visited)}
a:hover{text-decoration-thickness:2px}
strong{font-weight:700}
small{font-size:.875rem} /* UD-TYP-02 最小14px（既定の smaller だと注記の中で14px未満になる） */
.ib{display:inline-block} /* 語句の途中で改行させない */

/* UD-OPN-02 フォーカス可視 */
:focus-visible{outline:3px solid var(--focus);outline-offset:2px;border-radius:.15em}
.on-dark :focus-visible,.mainnav :focus-visible,.site-footer :focus-visible{outline-color:var(--focus-dark)}
#main:focus{outline:none}

.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.skip-link{position:absolute;left:-9999px;top:0;z-index:200;background:#fff;color:var(--link);font-weight:700;padding:.8em 1.4em;border:3px solid var(--link)} /* UD-NAV-01 */
.skip-link:focus{left:8px;top:8px}

.container{width:min(68rem,100% - 2rem);margin-inline:auto}
.section{padding-block:3rem}
.section--alt{background:var(--bg-alt)}
.section > .container > h2:first-child{margin-block-start:0}
.section-lead{font-size:1.05rem;max-width:44rem}

/* ---------- ヘッダー ---------- */
.utility{border-bottom:1px solid var(--line);background:#fff}
.utility__in{display:flex;align-items:center;gap:.4rem 1rem;flex-wrap:wrap;padding-block:.2rem}
.fontsize{display:flex;align-items:center;gap:.35rem}
.fontsize[hidden]{display:none} /* JS無効時は出さない（UD-TEC-04） */
.fontsize__label{margin:0;font-size:.875rem;color:var(--ink-2)} /* UD-TYP-02 最小14px */
.fontsize__btn{min-height:44px;padding:.2em .9em;border:2px solid var(--primary);background:#fff;color:var(--link);border-radius:.35em;font:inherit;font-size:.875rem;cursor:pointer} /* UD-LAY-04 */
.fontsize__btn[aria-pressed="true"]{background:var(--primary);color:#fff}
.utility__links{display:flex;flex-wrap:wrap;gap:.1rem 1rem;margin:0 0 0 auto;padding:0;list-style:none}
.utility__links a{display:inline-flex;align-items:center;min-height:44px;font-size:.875rem}

.brand{display:flex;align-items:center;justify-content:space-between;gap:.8rem 1.4rem;padding-block:.9rem 1rem;flex-wrap:wrap}
.logo{display:inline-flex;align-items:center;gap:.6em;color:var(--ink);text-decoration:none}
.logo:visited{color:var(--ink)}
.logo img{display:block;width:auto;height:3rem} /* ロゴタイプは画像可（UD-TYP-06 例外） */
.logo:hover .logo__tag{text-decoration:underline}
.logo__tag{display:block;margin-top:.15rem;font-size:.875rem;color:var(--ink-2);line-height:1.4}
/* UD-NAV-06 ヘルプ導線: 全ページ同じ位置・同じ表示 */
.helpline{display:flex;align-items:center;gap:.6rem 1rem;flex-wrap:wrap}
.helpline__tel{margin:0;line-height:1.35}
.helpline__tel a{font-weight:700;font-size:1.2rem;color:var(--link);display:inline-flex;align-items:center;min-height:44px}
.tel-num{white-space:nowrap} /* 電話番号は途中で折り返さない */ /* 下線＋色（UD-COL-03） */
.helpline__tel small{display:block;font-size:.875rem;color:var(--ink-2)}

/* スティッキーナビ（幅960px以上。header の外に置く。UD-LAY-05） */
.mainnav{position:sticky;top:0;z-index:100;background:var(--header);box-shadow:0 2px 6px rgba(13,36,56,.25)}
.mainnav__in{display:flex;align-items:center;flex-wrap:wrap}
/* メニューボタン（幅959px以下。ロゴの右に置く。アイコン＋文字: UD-IMG-05、48px: UD-LAY-04） */
.menu-toggle{display:inline-flex;align-items:center;justify-content:center;gap:.35em;min-height:48px;min-width:7.2em;margin-left:auto;padding:.2em .6em;background:#fff;color:var(--link);border:2px solid var(--primary);border-radius:.4em;font:inherit;font-weight:700;line-height:1.3;cursor:pointer}
.menu-toggle[hidden]{display:none}
.menu-toggle svg{flex:none;width:1.5rem;height:1.5rem}
.menu-toggle__icon--close,.menu-toggle[aria-expanded="true"] .menu-toggle__icon--open{display:none}
.menu-toggle[aria-expanded="true"] .menu-toggle__icon--close{display:block}
.menu-toggle[aria-expanded="true"]{background:var(--primary);color:#fff}
/* メニューを開いたときだけ出す「文字の大きさ」（スマホでは JS がここへ移す） */
.menu-tools{background:var(--bg-alt);border-bottom:1px solid var(--line)}
.menu-tools[hidden]{display:none}
.menu-tools .fontsize{padding-block:.5rem}
.mainnav__list{display:flex;list-style:none;margin:0;padding:0;width:100%;flex-wrap:wrap}
.mainnav__list[hidden]{display:none}
.mainnav__list a{display:inline-flex;align-items:center;min-height:48px;padding-inline:.85em;color:#fff;text-decoration:none;border-bottom:4px solid transparent} /* UD-LAY-04 */
.mainnav__list a:hover{background:var(--header-hover);text-decoration:underline;text-underline-offset:.3em}
.mainnav__list a[aria-current="page"]{border-bottom-color:var(--focus-dark);font-weight:700;text-decoration:underline;text-underline-offset:.3em} /* UD-NAV-07 */
@media (max-width:959px){
  /* ヘッダーは2段: ロゴ＋メニューボタン／電話＋相談ボタン。ナビは固定しない */
  .utility{display:none} /* 同じリンクはフッターにある（UD-NAV-04）。文字の大きさはメニューの中 */
  .site-header{border-bottom:1px solid var(--line)}
  .brand{padding-block:.6rem .7rem;gap:.6rem 1rem}
  .helpline{width:100%;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,9.8rem),1fr));gap:.5rem;align-items:stretch} /* 同じ幅で2列。入らない幅（320pxや文字「大きく」）では縦に並ぶ。UD-NAV-06 全ページ同じ位置 */
  .helpline__tel{display:flex}
  .helpline__tel a{flex:1;justify-content:center;min-height:48px;padding:.15em .3em;border:2px solid var(--primary);border-radius:.4em;background:#fff;font-size:.9375rem;line-height:1.3;text-align:center;text-decoration:none} /* ボタンの形 */
  .helpline__tel small{display:none} /* 営業時間はCTA帯・フッターに記載 */
  .helpline .btn{min-height:48px;padding-inline:.5em;font-size:.9375rem}
  .mainnav{position:static;box-shadow:none}
  .mainnav__list{flex-direction:column;padding-block:.3rem .5rem}
  .mainnav__list a{width:100%;border-bottom:0;border-left:4px solid transparent}
  .mainnav__list a[aria-current="page"]{border-left-color:var(--focus-dark)}
}
/* 画面の高さが小さいときはナビを固定しない。本文の表示域を確保する（UD-LAY-01） */
@media (max-height:26rem){
  .mainnav{position:static}
}
@media (min-width:960px){
  .menu-toggle,.menu-tools{display:none}
  .mainnav__list{display:flex!important}
}
/* スマホではロゴを小さくし、キャッチコピーを隠す（最初の画面に本文の見出しが入るようにする） */
@media (max-width:599px){
  .logo img{height:2.4rem}
  .logo__tag{display:none}
}
@media (max-width:359px){.logo img{height:2.1rem}} /* 320pxでもロゴとメニューボタンを1段に収める */

.breadcrumbs ol{display:flex;flex-wrap:wrap;gap:.2rem;list-style:none;margin:0;padding:.2rem 0;font-size:.875rem;color:var(--ink-2)}
.breadcrumbs li{display:inline-flex;align-items:center;min-height:44px}
.breadcrumbs li:not(:first-child)::before{content:"›";margin-right:.5em}
@media (max-width:599px){.breadcrumbs li{min-height:2rem}} /* 文中リンク相当。最小24pxは満たす（UD-LAY-04） */

/* ---------- ヒーロー ---------- */
.hero{padding-block:3rem 2.6rem;background:linear-gradient(180deg,var(--primary-tint),#fff 85%);border-bottom:1px solid var(--line)}
.hero__eyebrow{margin:0 0 .6rem;font-weight:700;color:var(--ink-2);font-size:.95rem}
.hero h1{font-size:clamp(1.7rem,1.25rem + 2vw,2.6rem);margin-block:0 .5em}
.hero .lead{max-width:40em;font-size:1.1rem;margin-block:.6rem 0}
.page-hero{padding-block:2.4rem 2rem;background:var(--primary-tint);border-bottom:1px solid var(--line)}
.page-hero h1{font-size:clamp(1.6rem,1.25rem + 1.6vw,2.3rem);margin-block:0 .4em}
.page-hero .lead{max-width:44rem;font-size:1.05rem;margin-block:.6rem 0}
.hero,.page-hero{position:relative;overflow:hidden}
.hero__grid,.page-hero__grid{display:grid;gap:2rem;align-items:center}
@media (min-width:900px){.hero__grid{grid-template-columns:1fr 1.15fr}.page-hero__grid{grid-template-columns:1fr 1.1fr}}
@media (max-width:599px){.hero{padding-block:1.8rem 2rem}.page-hero{padding-block:1.6rem 1.6rem}}
.actions{display:flex;gap:.8rem;flex-wrap:wrap;margin-block:1.6rem 0}
.theme-chip{display:inline-block;font-size:.875rem;font-weight:700;color:var(--ink-2)}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;min-height:48px;min-width:48px;padding:.5em 1.4em;border-radius:.4em;font:inherit;font-weight:700;line-height:1.4;cursor:pointer;text-decoration:none;border:2px solid transparent;text-align:center} /* UD-LAY-04 */
.btn--primary,.btn--primary:visited{background:var(--primary);color:#fff}
.btn--primary:hover{background:var(--primary-dark)}
.btn--secondary,.btn--secondary:visited{background:#fff;color:var(--link);border-color:var(--primary)}
.btn--secondary:hover{background:var(--primary-tint)}
.btn--small{min-height:44px;padding:.3em 1em;font-size:.95rem}

/* ---------- 郵送物を受け取った方への案内 ---------- */
.notice{border:2px solid var(--accent);background:var(--accent-bg);color:var(--ink);border-radius:.6em;padding:1rem 1.3rem;margin-block:1.8rem 0}
.notice h2{font-size:1.1rem;margin:0 0 .3em;color:var(--accent-text)}
.notice p{margin:.3em 0;max-width:none}
.notice-inline{margin:.8rem 0 0;font-size:.95rem;color:var(--ink)}
.notice-inline::before{content:"※ "}

/* ---------- カード ---------- */
.cards{display:grid;gap:1.25rem;grid-template-columns:repeat(auto-fit,minmax(min(16rem,100%),1fr));list-style:none;margin:1.6rem 0 0;padding:0}
@media (min-width:900px){.cards--3{grid-template-columns:repeat(3,1fr)}}
.card{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:.6em;padding:1.3rem 1.4rem;background:#fff}
.card h3{margin-block:0 .4em;font-size:1.2rem}
.card p{margin-block:.4em}
.card__more{margin-top:auto;padding-top:.6rem}
.card__more a{display:inline-flex;align-items:center;min-height:44px;font-weight:700}
.card--feature h3{border-block-end:3px solid var(--primary);display:inline-block;align-self:flex-start;padding-block-end:.15em}
.card[data-theme] h3{color:var(--header)}

/* 数字 */
.stats{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(min(12rem,100%),1fr));list-style:none;margin:1.6rem 0 0;padding:0}
.stat{background:#fff;border:1px solid var(--line);border-radius:.6em;padding:.8rem 1.1rem}
.stat__num{display:block;font-size:2rem;font-weight:700;line-height:1.3;color:var(--ink)}
.stat__num small{font-size:1rem;margin-inline-start:.15em}
.stat__label{display:block;font-size:.95rem}

/* 手順（UD-TXT-03 番号リスト） */
.steps{list-style:none;counter-reset:step;display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(min(13rem,100%),1fr));margin:1.6rem 0 0;padding:0}
.steps li{counter-increment:step;border:1px solid var(--line);border-radius:.6em;padding:1rem 1.2rem;background:#fff}
.steps li::before{content:"STEP " counter(step);display:block;font-weight:700;font-size:.875rem;color:var(--link);margin-bottom:.2em}
.steps h3{margin:0 0 .3em;font-size:1.1rem}
.steps p{margin:0}

/* 要点（記号＋文言で伝える: UD-COL-03） */
.points{list-style:none;padding:0;margin:.6rem 0 0}
.points li{position:relative;padding-left:1.7em;margin-block:.45rem}
.points li::before{content:"✓";position:absolute;left:0;top:0;font-weight:700;color:var(--primary)}
ol.points{counter-reset:pt}
ol.points li::before{counter-increment:pt;content:counter(pt);display:inline-grid;place-items:center;width:1.35em;height:1.35em;border-radius:50%;background:var(--primary);color:#fff;font-size:.875em;top:.2em} /* UD-TYP-02 */

/* 担当者 */
.person{display:grid;gap:1rem 1.6rem;align-items:center;border:1px solid var(--line);border-radius:.6em;padding:1.4rem;background:#fff}
@media (min-width:720px){.person{grid-template-columns:auto 1fr}}
.person__photo{width:7.5rem;height:7.5rem;border-radius:1rem;object-fit:cover;border:1px solid var(--line)}
.page-hero__grid--person{grid-template-columns:1fr auto;align-items:center}
@media (max-width:599px){.page-hero__grid--person{grid-template-columns:1fr}}
.person-card{margin:0;display:flex;align-items:center;gap:1rem}
.person-card img{width:5.5rem;height:5.5rem;border-radius:50%;object-fit:cover;border:1px solid var(--line);flex:none}
.person-card figcaption{font-weight:700;line-height:1.5}
.person-card small{display:block;font-weight:400;font-size:.875rem;color:var(--ink-2)}
.person h3{margin:0 0 .2em}
.person p{margin:.3em 0}

/* 写真を背景にした帯（UD-IMG-03: 意味は本文で伝え、写真は装飾。文字は不透明なカードに載せる） */
.page-hero--photo{background-color:var(--header);background-size:cover;background-position:center;padding-block:3.5rem 1.2rem}
.page-hero--kyoto-field{background-image:url(../img/kyoto_field.webp)} /* 画像の指定はCSS側（URLはスタイルシート基準） */
.page-hero--photo .photo-card{background:rgba(255,255,255,.94);border-radius:.8em;padding:1.6rem 1.8rem;max-width:40rem}
.page-hero--photo .photo-card .lead{margin-block:.6rem 0}
.section--photo{background-color:var(--bg-alt);background-size:cover;background-position:center}
.section--kyoto-moss{background-image:linear-gradient(rgba(242,245,248,.86),rgba(242,245,248,.86)),url(../img/kyoto_moss.webp)}
.section--photo .stat{background:rgba(255,255,255,.96)}
.photo-credit{font-size:.875rem;color:var(--ink-2);margin:.8rem 0 0}
.page-hero--photo .photo-credit{display:inline-block;background:#1b1b1b;color:#fff;border-radius:.3em;padding:.1em .8em;margin-top:1.4rem} /* UD-COL-01: 写真の上の文字は不透明の地に載せる（白/#1b1b1b 17.2:1） */
.photo{margin:0}
.photo img{display:block;width:100%;height:auto;border-radius:.8em;aspect-ratio:4/3;object-fit:cover}
.greeting__grid{display:grid;gap:2rem;align-items:start}
@media (min-width:900px){.greeting__grid{grid-template-columns:1.2fr 1fr}.greeting__grid .photo{position:sticky;top:calc(var(--nav-h) + 1rem)}}
.photo-strip{list-style:none;margin:1.4rem 0 0;padding:0;display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(min(16rem,100%),1fr))}
.photo-strip li{max-width:none}
.photo-strip img{display:block;width:100%;height:auto;border-radius:.6em;aspect-ratio:4/3;object-fit:cover}
@media (prefers-reduced-motion: reduce){.page-hero--photo,.section--photo{background-attachment:scroll}}

/* ごあいさつ */
.greeting__body{max-width:44rem}
.greeting__body p{line-height:2}
.greeting__sign{text-align:right;margin-top:1.6rem;font-weight:700}

/* ---------- 表(UD-NAV-02, UD-LAY-01) ---------- */
.table-scroll{overflow-x:auto;margin-block:1rem;max-width:100%}
.table-scroll:focus-visible{outline-offset:4px}
table{border-collapse:collapse;width:100%;background:#fff}
.table--wide{min-width:32rem} /* 列の多い表だけ横スクロールさせる */
caption{text-align:start;font-weight:700;padding-block-end:.5em}
th,td{border:1px solid var(--ink-2);padding:.6rem .9em;text-align:left;vertical-align:top}
thead th{background:var(--bg-alt)}
tbody th{background:#fafbfc;font-weight:700}
td.num,th.num{text-align:right;white-space:nowrap}
.table-note{font-size:.875rem;color:var(--ink-2);margin-block:.3em}

/* 料金プラン */
.plan-cards{display:grid;gap:1.25rem;grid-template-columns:repeat(auto-fit,minmax(min(17rem,100%),1fr));list-style:none;margin:1.6rem 0 0;padding:0}
.plan{display:flex;flex-direction:column;border:2px solid var(--line);border-radius:.6em;padding:1.3rem 1.4rem;background:#fff}
.plan--recommend{border-color:var(--primary)}
.plan__badge{align-self:flex-start;background:var(--primary);color:#fff;font-size:.875rem;font-weight:700;border-radius:.3em;padding:.05em .7em;margin-bottom:.4rem}
.plan h3{margin:0 0 .3em}
.plan__price{margin:.2em 0;font-size:1.05rem}
.plan__price strong{font-size:1.5rem}
.plan ul{padding-left:1.3em;margin:.6em 0}
.plan .card__more{margin-top:auto}

/* FAQ（details は標準キーボード操作: UD-OPN-01） */
.faq details{border:1px solid var(--line);border-radius:.5em;background:#fff;margin-block:.7rem}
.faq summary{min-height:48px;display:flex;align-items:center;padding:.6rem 1.1rem;font-weight:700;cursor:pointer}
.faq summary::marker{color:var(--link)}
.faq details > div{padding:0 1.1rem 1rem}
.faq details > div p{margin:.4em 0}

/* ---------- スクリーンショット（ブラウザ枠。画面イメージは16:10に統一） ---------- */
.shot{margin:0;border:1px solid var(--line);border-radius:.6em;background:#fff;box-shadow:0 10px 28px rgba(16,30,60,.14);overflow:hidden}
.shot::before{content:"";display:block;height:1.6rem;background-color:#eef1f5;background-image:radial-gradient(circle at .9rem 50%,#ee8a66 .28rem,transparent .3rem),radial-gradient(circle at 1.8rem 50%,#f2c14e .28rem,transparent .3rem),radial-gradient(circle at 2.7rem 50%,#7cc48a .28rem,transparent .3rem);border-bottom:1px solid var(--line)} /* 装飾 */
.shot img{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;object-position:top}
.shot figcaption{font-size:.875rem;color:var(--ink-2);padding:.5rem .9rem;border-top:1px solid var(--line);background:#fff}
.shot--phone{max-width:15rem;border-radius:1.6rem;border:8px solid #1b1b1b}
.shot--phone::before{display:none}
.shot--phone img{aspect-ratio:390/800}
.shot .jstage{margin:0;border:0;border-radius:0}
.stack{position:relative}
.stack .shot--phone{position:absolute;right:-.5rem;bottom:-1.5rem;width:30%;max-width:9.5rem;border-width:5px;border-radius:1rem}
@media (max-width:899px){.stack .shot--phone{display:none}}

/* 画像と短い説明の段 */
.feature{display:grid;gap:1.4rem 2.4rem;align-items:center;padding-block:2.2rem;border-bottom:1px solid var(--line)}
.feature:last-child{border-bottom:0}
@media (min-width:860px){.feature{grid-template-columns:1fr 1.25fr}}
@media (max-width:599px){.feature{padding-block:1.6rem}}
.feature__text h3{font-size:1.35rem;margin:0 0 .5rem}
.feature__text h3 .num{display:inline-grid;place-items:center;width:2rem;height:2rem;border-radius:50%;background:var(--primary);color:#fff;font-size:1rem;margin-right:.5rem;vertical-align:.1em}
.feature__text ul{margin:.5rem 0 0;padding-left:1.2em}
.feature__text li{margin-block:.25rem}
.feature__text p{margin:.4rem 0}

/* ---------- トップの業界タブ（APG Tabs。JSなしでは全パネル表示） ---------- */
.industry-tabs [role="tablist"]{display:flex;flex-wrap:wrap;gap:0 .4rem;margin:1.4rem 0 0;border-bottom:1px solid var(--line)}
.industry-tabs [role="tab"]{min-height:48px;padding:.4em .9em;margin-bottom:-1px;border:0;border-bottom:3px solid transparent;background:none;color:var(--ink-2);font:inherit;font-weight:700;cursor:pointer}
.industry-tabs [role="tab"] .swatch{display:inline-block;width:.9em;height:.9em;border-radius:50%;margin-right:.45em;vertical-align:-.05em}
.industry-tabs [role="tab"][aria-selected="true"]{color:var(--ink);border-bottom-color:var(--tabc)}
.industry-tabs [role="tab"]:hover{color:var(--ink);border-bottom-color:var(--line)}
.industry-tabs [role="tab"][aria-selected="true"]:hover{border-bottom-color:var(--tabc)}
.panel{padding:1.8rem 0 0}
.panel[hidden]{display:none}
.panel__grid{display:grid;gap:1.6rem;align-items:center}
@media (min-width:860px){.panel__grid{grid-template-columns:1fr 1.3fr}}
.panel h3{font-size:1.4rem;margin:.4rem 0 .4rem}
html:not(.js) .industry-tabs [role="tablist"]{display:none}

/* 制作実績のギャラリー（画像は16:10に切り取り） */
.gallery{display:grid;gap:1.2rem;grid-template-columns:repeat(auto-fill,minmax(min(15rem,100%),1fr));list-style:none;margin:1.4rem 0 0;padding:0}
.gallery a{display:block;border:1px solid var(--line);border-radius:.5em;overflow:hidden;background:#fff;text-decoration:none;color:var(--ink)}
.gallery a:hover{box-shadow:0 6px 18px rgba(16,30,60,.15)}
.gallery img{display:block;width:100%;height:auto;aspect-ratio:16/10;object-fit:cover;object-position:top}
.gallery span{display:block;padding:.6rem .8rem;font-weight:700;font-size:.95rem;text-decoration:underline;text-decoration-color:var(--link);text-underline-offset:.2em}
.gallery small{display:block;padding:0 .8rem .7rem;font-size:.875rem;color:var(--ink-2)}
.gallery span + small{margin-top:-.3rem}

/* 実績カード（画面イメージ＋要点） */
.case-cards{list-style:none;margin:1.6rem 0 0;padding:0;display:grid;gap:2.4rem 2rem;grid-template-columns:repeat(auto-fit,minmax(min(26rem,100%),1fr))}
.case-cards.svc{grid-template-columns:repeat(auto-fit,minmax(min(19rem,100%),1fr))}
.case-cards .shot{margin-bottom:1rem}
.case-cards__tag{margin:0;font-size:.875rem;font-weight:700;color:var(--ink-2)}
.case-cards h3{margin:.1rem 0 .3rem;font-size:1.25rem}
.case-cards .points{margin-top:.3rem}

/* 技術の一覧 */
.tech__head{font-size:1rem;margin:1.2rem 0 .2rem;color:var(--ink-2)}
.tech{list-style:none;margin:.4rem 0 1rem;padding:0;display:flex;flex-wrap:wrap;gap:.5rem}
.tech li{border:1px solid var(--line);border-radius:99em;background:#fff;padding:.2em .9em;font-size:.95rem}

/* J-STAGE掲載代行の図（装飾。内容は見出しと箇条書きで伝える） */
.jstage{aspect-ratio:16/10;display:flex;align-items:center;justify-content:center;gap:1rem;background:var(--primary-tint);font-weight:700;font-size:1.3rem;color:var(--header)}
.jstage > span:not(.arrow){background:#fff;border:2px solid var(--primary);border-radius:.4em;padding:.6em 1em}
.jstage .arrow{font-size:1.8rem;color:var(--primary)}

/* ページ内目次（UD-TXT-06） */
.toc{display:flex;flex-wrap:wrap;gap:0 1.4rem;list-style:none;margin:0;padding:.8rem 0;border-bottom:1px solid var(--line)}
.toc a{display:inline-flex;align-items:center;min-height:44px}

/* ---------- CTA帯 ---------- */
.cta{background:var(--header);color:#fff}
.cta .container{padding-block:2.6rem}
.cta h2{margin-top:0;color:#fff}
.cta p{max-width:44rem}
.cta a:not(.btn){color:var(--footer-link)}
.cta .btn--secondary{background:transparent;color:#fff;border-color:#fff}
.cta .btn--secondary:hover{background:var(--header-hover)}
/* 主ボタンは白地。テーマ規則より後に書き、上書きされないようにする（各header色の文字は白地で10.9:1以上） */
.cta .btn--primary,.cta .btn--primary:visited,[data-theme] .cta .btn--primary{background:#fff;color:var(--header)}
.cta .btn--primary:hover,[data-theme] .cta .btn--primary:hover{background:var(--primary-tint)}
.cta__tel{font-size:1.3rem;font-weight:700}
.cta__tel a{color:#fff!important;text-decoration:underline;text-decoration-thickness:1px}

/* ---------- フォーム(UD-FRM-01〜08) ---------- */
#contact-form{max-width:40rem}
.field{margin-block:1.4rem}
.field > label,fieldset.field legend{font-weight:700}
.req,.opt{display:inline-block;font-size:.875rem;font-weight:700;border-radius:.3em;padding:.05em .6em;margin-left:.5em;vertical-align:middle}
.req{background:var(--error);color:#fff}
.opt{border:1.5px solid var(--ink-2);color:var(--ink-2)}
input:not([type="radio"]):not([type="checkbox"]),textarea{width:100%;min-height:48px;padding:.65em .75em;font:inherit;border:2px solid var(--ink-2);border-radius:.35em;background:#fff;color:var(--ink)}
textarea{min-height:10rem}
input[type="radio"],input[type="checkbox"]{width:1.25em;height:1.25em;accent-color:var(--primary);margin:.25em;flex:none}
fieldset.field{border:1px solid var(--ink-2);border-radius:.35em;padding:1rem 1.2rem}
fieldset.field label,.check{display:flex;align-items:center;gap:.45em;min-height:44px} /* UD-LAY-04 */
.hint{font-size:.875rem;color:var(--ink-2);margin-block:.3em}
.field__error{color:var(--error-text);font-weight:700;margin-block:.3em}
.field__error:empty{display:none}
input[aria-invalid="true"],textarea[aria-invalid="true"]{border-color:var(--error);background:var(--error-bg)}
#error-summary{border:2px solid var(--error);background:var(--error-bg);color:var(--ink);border-radius:.5em;padding:1rem 1.2rem;margin-block:1.4rem}
#error-summary ul{margin:.4em 0 0;padding-left:1.3em}
#error-summary a{color:var(--error-text);font-weight:700}
.confirm{border:2px solid var(--primary);border-radius:.5em;padding:1rem 1.3rem;background:var(--primary-tint);margin-block:1.4rem}
.confirm dl{display:grid;grid-template-columns:minmax(7rem,auto) 1fr;gap:.3rem 1rem;margin:.6rem 0}
.confirm dt{font-weight:700}
.confirm dd{margin:0;white-space:pre-wrap}
#form-status{min-height:1.6em;font-weight:700;color:var(--success-text)}
#form-status .form-status__error{color:var(--error-text)}
.channels{display:grid;gap:1rem;grid-template-columns:repeat(auto-fit,minmax(min(15rem,100%),1fr));list-style:none;padding:0;margin:1rem 0}
.channels li{border:1px solid var(--line);border-radius:.6em;padding:1rem 1.2rem;background:#fff}
.channels h3{margin:0 0 .3em;font-size:1.05rem}
.channels p{margin:.2em 0}

/* ---------- フッタ ---------- */
.site-footer{background:var(--footer);color:var(--footer-ink)}
.site-footer a,.site-footer a:visited{color:var(--footer-link)}
.footer-contact{padding-block:2rem 1.2rem;border-bottom:1px solid #3a5571}
.footer-contact p{margin:.2em 0}
.footer-contact__name{font-weight:700;color:#fff;font-size:1.1rem}
.footer-sitemap{display:grid;gap:1.4rem;grid-template-columns:repeat(auto-fit,minmax(min(13rem,100%),1fr));padding-block:1.8rem 1rem}
.footer-head{font-size:1rem;margin-block:0 .4em;color:#fff;border-block-end:1px solid #3a5571;padding-block-end:.4em}
.footer-sitemap ul{list-style:none;margin:0;padding:0}
.footer-sitemap a{display:inline-flex;align-items:center;min-height:44px}
.footer-note{padding-block:.8rem 2rem;font-size:.875rem;color:#b9c9d6;border-block-start:1px solid #3a5571} /* 9.3:1 */
.footer-note p{margin:.2em 0}

/* ---------- UD-OPN-10 / UD-TEC-03 ---------- */
@media (prefers-reduced-motion: no-preference){
  html{scroll-behavior:smooth}
  .btn,.fontsize__btn,.mainnav__list a{transition:background-color .15s,color .15s}
}
@media (forced-colors: active){
  :focus-visible{outline-color:Highlight;outline-width:3px}
  .btn,.fontsize__btn,.plan,.card{border-color:ButtonText}
  .plan__badge,.req{border:1px solid CanvasText}
  .industry-tabs [role="tab"][aria-selected="true"]{border-bottom-color:Highlight}
}
@media print{
  .utility,.mainnav,.menu-toggle,.menu-tools,.breadcrumbs,.cta .actions,.footer-sitemap,#form-status{display:none}
  body{font-size:11pt;line-height:1.6}
  .hero,.page-hero{background:none}
}