@import url("/assets/shared/css/service-footer.css");

.home-page { --home-width:1160px; }
.counter-tool { margin-top:24px; }
.home-header { padding-inline:max(var(--sp-6), calc((100% - var(--home-width)) / 2)); height:80px; border-bottom:0; }
.home-header .brand { font-size:23px; font-weight:650; letter-spacing:-.04em; gap:var(--sp-3); }
.home-mark { display:block; width:32px; height:32px; background:url('/assets/shared/img/favicon.svg') center / contain no-repeat; }
.home-main { width:min(var(--home-width), calc(100% - 64px)); margin-inline:auto; }
.home-hero { display:grid; grid-template-columns:1.35fr 1fr; align-items:end; gap:var(--sp-7); padding-block:var(--sp-8) 76px; }
.home-hero .eyebrow { letter-spacing:.08em; font-size:12px; margin-bottom:var(--sp-5); }
.home-hero h1 { font-size:clamp(32px, 3.5vw, 48px); font-weight:650; line-height:1.48; letter-spacing:-.055em; }
.hero-note { justify-self:end; padding-bottom:var(--sp-2); }
.hero-note p { color:var(--ink2); line-height:2; font-size:14px; }
.hero-link { display:inline-flex; align-items:center; gap:var(--sp-5); color:var(--ink); text-decoration:none; font-size:13px; margin-top:var(--sp-5); min-height:44px; }
.hero-link:hover { text-decoration:underline; }
.home-services, .home-about { scroll-margin-top:100px; }
.section-heading { display:flex; align-items:center; justify-content:space-between; gap:var(--sp-4); margin-bottom:var(--sp-5); }
.section-heading h2 { font-size:18px; font-weight:600; }
.section-heading .eyebrow { font-weight:400; letter-spacing:.04em; }
.home-tool { display:grid; grid-template-columns:1.15fr 1fr; background:var(--bg2); border-radius:var(--r-l); overflow:hidden; }
.tool-preview { display:flex; flex-direction:column; min-width:0; padding:var(--sp-6); color:var(--ink2); text-decoration:none; }
.preview-heading { display:flex; align-items:center; justify-content:space-between; font-size:10px; letter-spacing:.16em; }
.preview-images { position:relative; flex:1; min-height:300px; margin-top:var(--sp-5); }
.preview-images img { position:absolute; height:auto; border-radius:var(--r-s); box-shadow:var(--shadow); transition:transform .2s; }
.preview-main { width:83%; top:0; left:0; transform:rotate(-4deg); }
.preview-sub { width:67%; right:0; bottom:0; transform:rotate(5deg); }
.tool-preview:hover .preview-main { transform:rotate(-2deg) translateY(-3px); }
.tool-preview:hover .preview-sub { transform:rotate(3deg) translateY(-3px); }
.preview-caption { font-size:12px; margin-top:var(--sp-5); letter-spacing:.07em; }
.tool-copy { padding:var(--sp-7); align-self:center; }
.tool-category { font-size:12px; color:var(--ink2); }
.tool-copy h2 { font-size:32px; line-height:1.45; font-weight:600; letter-spacing:-.04em; margin:var(--sp-4) 0 var(--sp-5); }
.tool-copy>p { font-size:14px; color:var(--ink2); line-height:1.9; }
.tool-details { display:flex; flex-wrap:wrap; gap:var(--sp-2) var(--sp-4); padding:0; list-style:none; font-size:11px; color:var(--ink2); margin:var(--sp-5) 0; }
.tool-details li { white-space:nowrap; }
.tool-details li+li { padding-left:var(--sp-4); border-left:1px solid var(--line); }
.tool-open { gap:var(--sp-5); min-height:48px; }
.home-about { display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-7); padding-block:var(--sp-8); margin-top:var(--sp-6); }
.home-about .eyebrow { letter-spacing:.04em; font-weight:400; }
.home-about h2 { font-size:30px; font-weight:550; line-height:1.5; margin-top:var(--sp-5); }
.about-copy { align-self:center; color:var(--ink2); font-size:14px; line-height:2; }
.about-copy p+p { margin-top:var(--sp-5); }
@media(max-width:960px) {
  .home-hero { grid-template-columns:1fr; gap:var(--sp-5); padding-block:var(--sp-7); }
  .hero-note { justify-self:start; }
  .hero-note p br { display:none; }
  .home-tool { grid-template-columns:1fr 1fr; }
  .tool-copy { padding:var(--sp-6); }
  .preview-images { min-height:250px; }
  .tool-details { flex-direction:column; }
  .tool-details li+li { border:0; padding:0; }
}
@media(max-width:640px) {
  .home-header { height:64px; padding-inline:var(--sp-5); }
  .home-header .brand { font-size:21px; }
  .home-header .home-mark { width:28px; height:28px; }
  .home-main { width:calc(100% - 40px); }
  .home-hero { padding-block:var(--sp-6) var(--sp-7); gap:var(--sp-5); }
  .home-hero .eyebrow { font-size:11px; margin-bottom:var(--sp-4); }
  .home-hero h1 { font-size:clamp(27px, 7.5vw, 40px); }
  .hero-note p { font-size:13px; max-width:32ch; }
  .hero-link { margin-top:var(--sp-3); }
  .section-heading { align-items:flex-start; margin-bottom:var(--sp-4); }
  .section-heading h2 { font-size:16px; }
  .section-heading .eyebrow { display:none; }
  .home-tool { grid-template-columns:1fr; }
  .tool-preview { padding:var(--sp-5); }
  .preview-images { min-height:0; aspect-ratio:1.42; }
  .preview-caption { margin-top:var(--sp-4); }
  .tool-copy { padding:var(--sp-5) var(--sp-5) var(--sp-6); }
  .tool-copy h2 { font-size:28px; margin-top:var(--sp-3); }
  .tool-details { flex-direction:row; gap:var(--sp-2) var(--sp-3); }
  .tool-open { width:100%; }
  .home-about { grid-template-columns:1fr; gap:var(--sp-5); margin-top:0; padding-block:var(--sp-7); }
  .home-about h2 { font-size:26px; }
  .about-copy { font-size:13px; }
  .about-copy br { display:none; }
}
.editor-preview{min-height:280px;padding:36px;display:flex;flex-direction:column;justify-content:center;gap:20px;background:#f3efe7;color:#222b38;border-right:70px solid #d5ded1}.editor-preview strong{font-size:clamp(24px,3vw,44px);line-height:1.35}.editor-preview span{font-size:13px}@media(max-width:600px){.editor-preview{min-height:220px;padding:24px;border-right-width:35px}}


.home-main{padding-top:24px;padding-bottom:40px}.section-heading h1{font-size:22px;font-weight:600;margin:0}.tool-copy>.tool-open{margin-top:24px}

/* 全サービスの区切りを揃え、説明を減らしたカードの余白を補正する。 */
.home-services + .home-services{margin-top:24px}
.counter-tool{margin-top:0}
@media(max-width:640px){
 .counter-tool .tool-copy:first-child{padding-bottom:0}
 .counter-tool .tool-copy:last-child{padding-top:20px}
 .counter-tool .tool-copy>.tool-open{margin-top:0}
 .tool-open{white-space:normal;text-align:center;line-height:1.6;gap:12px}
 .tool-open svg,.tool-open>span{flex-shrink:0}
}

@media(max-width:640px){.editor-preview{padding:20px;border-right-width:24px}.editor-preview strong{font-size:clamp(20px,5.2vw,28px)}.preview-heading{gap:8px;flex-wrap:wrap}}

/* Shared service-name typography; independent of installed fonts. */
@font-face{font-family:"Noabase Brand";src:url("/assets/shared/fonts/NotoSansJP-ui.woff2") format("woff2");font-weight:600 700;font-style:normal;font-display:swap}
.home-header .brand{font-family:"Noabase Brand",sans-serif;font-size:23px;font-weight:650;line-height:1.5;letter-spacing:-.04em;font-synthesis:none}
@media(max-width:650px){.home-header .brand{font-size:18px}}

/* フォントの許諾文はトップページ下部から展開する。 */
.font-license { border-top: 1px solid var(--line, #e3e5ea); }
.font-license > summary { color: var(--ink); font-weight: 600; }
.font-license pre { white-space: pre-wrap; overflow-wrap: anywhere; font: 12px/1.7 ui-monospace, monospace; color: var(--ink2); margin: 8px 0 20px; }

.legal-page h1 { font-size: 24px; }
.legal-page p { margin-block: 24px; line-height: 1.8; }

.legal-page { max-width: 840px; padding-bottom: 64px; }
.legal-page h2 { font-size: 19px; margin: 36px 0 12px; line-height: 1.6; }
.legal-page p, .legal-page dd, .legal-page li { font-size: 15px; line-height: 1.9; overflow-wrap: anywhere; }
.legal-page dt { font-weight: 600; margin-top: 24px; }
.legal-page dd { margin: 8px 0 0; }
.legal-page dt[id], .legal-page dt [id] { scroll-margin-top: 100px; }
.legal-page dt:is(:target, :has(:target)), .legal-page dt:is(:target, :has(:target)) + dd { background: #fff7e8; box-shadow: 0 0 0 8px #fff7e8; border-radius: 2px; }
.legal-page li + li { margin-top: 8px; }
.legal-page .legal-date { font-size: 13px; color: var(--ink2); }

/* サービス一覧と同じ幅に揃えた、控えめなフッターナビゲーション。 */



.legal-page .font-license > summary { cursor: pointer; padding: 16px 4px; font-size: 15px; line-height: 1.6; }
.legal-page .font-license > summary:hover { background: #f5f6f8; }
.legal-page .font-license > summary:focus-visible { outline: 2px solid var(--ink2); outline-offset: 2px; }


.legal-page h2.license-source { font-size: 13px; font-weight: 600; line-height: 1.7; margin: 16px 0 8px; overflow-wrap: anywhere; }

.home-free-note { color: var(--ink2); font-size: 13px; margin: 8px 0 20px; }

.license-categories { display: grid; gap: 12px; margin: 28px 0 40px; }
.license-categories a { display: flex; justify-content: space-between; align-items: center; padding: 20px 24px; border: 1px solid var(--line); border-radius: 10px; color: var(--ink); text-decoration: none; font-size: 15px; }
.license-categories a:hover { background: #f5f6f8; }
.license-categories a:focus-visible { outline: 2px solid var(--ink2); outline-offset: 3px; }

/* 採用案04：横並びのサービス一覧。法務ページ(body.home-legal)は地・本文の幅・下の欄だけを共有する。 */
/* 地を白にし、カードの側に薄い面の色を持たせて「押せる面」を作る。 */
.home-catalog { background:#fff; min-height:100vh; min-height:100dvh; display:flex; flex-direction:column; color:#232c39; }
.home-catalog .home-main { width:min(1600px,calc(100% - 108px)); flex:1; margin:44px auto 23px; padding:0; }
.catalog-heading { margin-bottom:26px; }
.catalog-heading h1 { margin:0 0 10px; font-size:30px; line-height:1.5; font-weight:650; letter-spacing:-.03em; }
.catalog-heading p { margin:0; font-size:14px; color:#5f6d7e; }
/* 列の数はカードの数に合わせる(カードを足し引きしても右に空きの列が残らない)。 */
.catalog-grid { display:grid; grid-auto-flow:column; grid-auto-columns:minmax(0,1fr); gap:18px; }
.catalog-tool { display:flex; flex-direction:column; gap:18px; min-height:252px; padding:24px 20px 20px; background:#f6f9f7; border:1px solid #dde6e2; border-radius:14px; color:inherit; text-decoration:none; transition:background-color .15s, border-color .15s, box-shadow .15s, transform .15s; }
.catalog-tool:hover { background:#eff5f2; border-color:#b9cfc7; box-shadow:0 4px 14px #172b4d12; transform:translateY(-1px); }
.catalog-tool:active { transform:translateY(0); box-shadow:none; }
.catalog-tool:focus-visible { outline:2px solid #215e52; outline-offset:3px; }
.catalog-icon { display:flex; align-items:center; justify-content:center; width:48px; height:48px; border-radius:11px; background:#e3ece8; color:#215e52; flex:none; transition:background-color .15s; }
.catalog-tool:hover .catalog-icon { background:#d8e5df; }
.catalog-icon svg { width:29px; height:29px; }
.catalog-copy { flex:1; min-width:0; }
.catalog-copy h2 { font-size:22px; margin:6px 0 10px; line-height:1.45; font-weight:650; letter-spacing:-.03em; overflow-wrap:anywhere; }
.catalog-copy p { font-size:13px; line-height:1.8; color:#5f6d7e; margin:0; }
.catalog-open { display:flex; justify-content:space-between; align-items:center; color:#215e52; font-size:13px; font-weight:600; min-height:28px; }
.catalog-open-arrow { flex:none; width:20px; height:20px; }
.home-catalog .home-footer { width:min(1600px,calc(100% - 108px)); }
@media(prefers-reduced-motion:reduce) { .catalog-tool, .catalog-icon { transition:none; } .catalog-tool:hover { transform:none; } }
@media(max-width:1000px) and (min-width:701px) { .catalog-grid { grid-auto-flow:row; grid-template-columns:repeat(2,minmax(0,1fr)); } .home-catalog .home-main { margin-top:28px; } }
@media(max-width:700px) { .home-catalog .home-main { width:calc(100% - 44px); margin:16px auto; } .catalog-grid { grid-auto-flow:row; grid-template-columns:1fr; gap:14px; } .catalog-tool { min-height:0; gap:14px; padding:20px; } .catalog-copy h2 { min-height:0; font-size:20px; margin:2px 0 8px; } .catalog-heading h1 { font-size:26px; } .home-catalog .home-footer { width:calc(100% - 44px); } }

/* 規約・プライバシー・ライセンスの各ページ(body.home-legal)。見出しの帯と下の欄はトップと同じ部品
   (.noabase-service-header・.home-footer)を同じ幅で使い、ページを移っても位置が跳ばないようにする。
   本文の左端はトップの「サービス一覧」とそろえ、項目の線は 840px まで、文の行は base.css の 68ch のままにする。 */
.home-legal .legal-page { max-width:none; margin-bottom:48px; }
.home-legal .legal-page > :not(p) { max-width:840px; }
.home-legal .legal-page h1 { margin:0 0 16px; line-height:1.5; }
/* 見出しは語の途中で折り返さない(日本語の文節で折る)。 */
.legal-page :is(h1, h2, summary) { word-break:auto-phrase; }
/* 見出しと最初の項目の線をくっつけない。 */
.legal-page h1 + .font-license { margin-top:24px; }
/* /software-licenses/: ライブラリごとの見出しの下に許諾文を並べ、ファイル名は小さく添える。 */
.legal-page .license-group h2 { margin:40px 0 4px; font-size:20px; font-weight:650; }
.legal-page .license-use { margin:0 0 12px; font-size:14px; line-height:1.8; color:#5f6d7e; }
.legal-page .font-license .license-file { display:block; margin-top:2px; font:400 12px/1.6 ui-monospace, SFMono-Regular, Consolas, monospace; color:#5f6d7e; overflow-wrap:anywhere; padding-left:16px; }