/*
* index.htmlのページ固有のスタイル（custom.css・site.css の後に読み込む）。
* Tailwind のユーティリティクラス（px-4、lg:grid 等）は定義していないので、HTML に書いても効かない。
* 新しい見た目が必要なときは、このファイルにクラスを追加して HTML から使うこと。
*
* ブレークポイント: sm 640px / md 768px / lg 1024px / xl 1280px / 2xl 1536px
*/
/* ================================================================ ページ全体（body） */
.home-page { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; background-color: #ffffff; }
/* ================================================================ home-hero（バラバラな見積書を、そのまま使える完成データに） */
.home-hero { padding-bottom: 4rem; padding-top: 2rem; }
.home-hero-backdrop { position: absolute; inset: 0; opacity: 0.6; }
.home-hero-inner {
width: 100%;
position: relative;
z-index: 10;
margin-left: auto;
margin-right: auto;
padding-left: 1rem;
padding-right: 1rem;
}
.home-hero-content { margin-left: auto; margin-right: auto; max-width: 80rem; }
.home-hero-grid { display: grid; align-items: center; gap: 2rem; }
.home-hero-copy { order: 2; text-align: center; }
.home-hero-tags {
margin-bottom: 1.5rem;
display: none;
flex-wrap: wrap;
justify-content: center;
gap: 0.75rem;
}
.home-hero-title { margin-bottom: 1.25rem; display: none; line-height: 1.25; }
.home-hero-title-lead {
margin-bottom: 0.5rem;
display: block;
font-size: 1.125rem;
line-height: 1.75rem;
font-weight: 700;
color: #374151;
}
.home-hero-title-main {
display: block;
font-size: 1.875rem;
line-height: 2.25rem;
font-weight: 900;
letter-spacing: -0.025em;
color: #ffffff;
}
.home-hero-lead {
margin-bottom: 1rem;
max-width: 36rem;
font-size: 1rem;
line-height: 1.625;
color: #6b7280;
}
.home-hero-lead-emphasis { color: #111827; }
.home-hero-lead-break { display: none; }
.home-hero-stats-desktop {
margin-bottom: 2rem;
display: none;
width: 100%;
gap: 0.75rem;
}
.home-hero-stat-desktop { text-align: center; }
.home-hero-stat-value-desktop { margin-bottom: 0.25rem; font-size: 1.875rem; line-height: 2.25rem; }
.home-hero-stat-unit { color: #ffffff; }
.home-hero-stat-label { font-size: 0.75rem; line-height: 1rem; color: rgb(255 255 255 / 0.8); }
.home-hero-stats-note-desktop {
margin-top: -1.25rem;
margin-bottom: 2rem;
display: none;
font-size: 11px;
line-height: 1.625;
color: rgb(255 255 255 / 0.6);
}
.home-hero-cta {
margin-left: auto;
margin-right: auto;
display: flex;
width: 100%;
max-width: 36rem;
flex-direction: column;
gap: 0.75rem;
}
.home-hero-cta-button {
width: 100%;
padding-top: 1rem;
padding-bottom: 1rem;
font-size: 1rem;
line-height: 1.5rem;
font-weight: 700;
}
.home-hero-cta-badge {
border-radius: 9999px;
background-color: rgb(255 255 255 / 0.25);
padding-left: 0.5rem;
padding-right: 0.5rem;
padding-top: 0.125rem;
padding-bottom: 0.125rem;
font-size: 0.75rem;
line-height: 1rem;
font-weight: 800;
}
.home-hero-cta-note {
margin-top: -0.25rem;
text-align: center;
font-size: 11px;
color: rgb(255 255 255 / 0.6);
}
.home-hero-visual {
position: relative;
order: 1;
margin-left: auto;
margin-right: auto;
margin-top: 0.5rem;
display: block;
width: 100%;
max-width: 24rem;
}
.home-hero-visual-frame { position: relative; overflow: hidden; border-radius: 1.5rem; }
.home-hero-visual-image {
position: relative;
z-index: 0;
width: 100%;
border-radius: 1.5rem;
transition-property: all;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 500ms;
transform: translateX(0);
box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
}
.home-hero-visual-image:hover { transform: scale(1.05); }
.home-hero-visual-overlay {
position: absolute;
inset: 0;
z-index: 10;
background-image: linear-gradient(to top, rgb(15 23 42 / 0.7), rgb(15 23 42 / 0.2), transparent);
}
.home-hero-mobile-copy {
position: absolute;
left: 1rem;
right: 3rem;
top: 1rem;
z-index: 20;
}
.home-hero-mobile-eyebrow {
margin-bottom: 0.25rem;
display: block;
font-size: 11px;
font-weight: 600;
letter-spacing: 0.12em;
color: #374151;
}
.home-hero-mobile-title {
display: block;
font-size: 1.5rem;
font-weight: 900;
line-height: 1.25;
}
.home-hero-mobile-chips {
position: absolute;
bottom: 1rem;
left: 1rem;
right: 5rem;
z-index: 20;
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
}
.home-hero-mobile-chip {
display: inline-flex;
align-items: center;
border-radius: 9999px;
border-width: 1px;
border-color: rgb(255 255 255 / 0.35);
background-color: rgb(255 255 255 / 0.2);
padding-left: 0.75rem;
padding-right: 0.75rem;
padding-top: 0.25rem;
padding-bottom: 0.25rem;
font-size: 11px;
font-weight: 600;
color: #ffffff;
-webkit-backdrop-filter: blur(4px);
backdrop-filter: blur(4px);
}
.home-hero-bubble { display: none; }
.home-hero-stats-mobile {
margin-left: auto;
margin-right: auto;
margin-top: 1rem;
display: grid;
max-width: 28rem;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 0.75rem;
}
.home-hero-stat-mobile { text-align: center; }
.home-hero-stat-value-mobile {
margin-bottom: 0.25rem;
white-space: nowrap;
font-size: 1.5rem;
line-height: 2rem;
}
.home-hero-stats-note-mobile {
margin-top: 0.75rem;
padding-left: 1rem;
padding-right: 1rem;
text-align: center;
font-size: 10px;
line-height: 1.625;
color: rgb(255 255 255 / 0.6);
}
.home-hero-arrow-decor {
pointer-events: none;
position: absolute;
right: 0;
top: 50%;
display: none;
width: 33.333333%;
opacity: 0.03;
transform: translateY(-50%);
}
@media (min-width: 640px) {
.home-hero-inner { max-width: 640px; padding-left: 1.5rem; padding-right: 1.5rem; }
.home-hero-title-lead { font-size: 1.25rem; line-height: 1.75rem; }
.home-hero-title-main { font-size: 2.25rem; line-height: 2.5rem; }
.home-hero-lead { font-size: 1.125rem; line-height: 1.75rem; }
.home-hero-lead-break { display: block; }
.home-hero-stats-desktop { gap: 1rem; }
.home-hero-cta-button { font-size: 1.125rem; line-height: 1.75rem; }
.home-hero-visual { max-width: 28rem; }
.home-hero-mobile-copy { right: 4rem; }
.home-hero-mobile-eyebrow { font-size: 0.875rem; line-height: 1.25rem; }
.home-hero-mobile-title { font-size: 1.875rem; line-height: 2.25rem; }
.home-hero-mobile-chip { font-size: 0.75rem; line-height: 1rem; }
.home-hero-stats-mobile { gap: 1rem; }
.home-hero-stat-value-mobile { font-size: 1.875rem; line-height: 2.25rem; }
}
@media (min-width: 768px) {
.home-hero-inner { max-width: 768px; }
.home-hero-mobile-chips { display: none; }
.home-hero-bubble { display: block; }
}
@media (min-width: 1024px) {
.home-hero { padding-bottom: 8rem; padding-top: 3rem; }
.home-hero-inner { max-width: 1024px; padding-left: 2rem; padding-right: 2rem; }
.home-hero-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4rem; }
.home-hero-copy { order: 1; text-align: left; }
.home-hero-tags { display: flex; justify-content: flex-start; }
.home-hero-title { display: block; }
.home-hero-title-lead { font-size: 1.5rem; line-height: 2rem; }
.home-hero-title-main { font-size: 3rem; line-height: 1; }
.home-hero-lead { font-size: 1.25rem; line-height: 1.75rem; }
.home-hero-stats-desktop { display: grid; }
.home-hero-stat-desktop { text-align: left; }
.home-hero-stat-value-desktop { font-size: 2.25rem; line-height: 2.5rem; }
.home-hero-stats-note-desktop { display: block; }
.home-hero-cta { margin-left: 0; margin-right: 0; }
.home-hero-cta-note { text-align: left; }
.home-hero-visual {
order: 2;
margin-left: 0;
margin-right: 0;
margin-top: 0;
max-width: none;
}
.home-hero-visual-frame { overflow: visible; }
.home-hero-visual-overlay { display: none; }
.home-hero-mobile-copy { right: 7rem; display: none; }
.home-hero-mobile-eyebrow { font-size: 1rem; line-height: 1.5rem; }
.home-hero-mobile-title { font-size: 2.25rem; line-height: 2.5rem; }
.home-hero-mobile-chips { right: 7rem; }
.home-hero-stats-mobile { display: none; }
.home-hero-stats-note-mobile { display: none; }
.home-hero-arrow-decor { display: block; }
}
@media (min-width: 1280px) {
.home-hero-inner { max-width: 1280px; }
}
@media (min-width: 1536px) {
.home-hero-inner { max-width: 1536px; }
}
/* ================================================================ home-latest-news */
.home-latest-news-container {
width: 100%;
margin-left: auto;
margin-right: auto;
padding-left: 1rem;
padding-right: 1rem;
}
.home-latest-news-inner { margin-left: auto; margin-right: auto; max-width: 72rem; }
@media (min-width: 640px) {
.home-latest-news-container { max-width: 640px; padding-left: 1.5rem; padding-right: 1.5rem; }
}
@media (min-width: 768px) {
.home-latest-news-container { max-width: 768px; }
}
@media (min-width: 1024px) {
.home-latest-news-container { max-width: 1024px; padding-left: 2rem; padding-right: 2rem; }
}
@media (min-width: 1280px) {
.home-latest-news-container { max-width: 1280px; }
}
@media (min-width: 1536px) {
.home-latest-news-container { max-width: 1536px; }
}
/* ================================================================ home-logos */
.home-logos { border-bottom-width: 1px; border-color: #f3f4f6; }
.home-logos-inner {
width: 100%;
margin-left: auto;
margin-right: auto;
padding-left: 1rem;
padding-right: 1rem;
}
.home-logos-header { margin-bottom: 1.5rem; text-align: center; }
.home-logos-caption {
font-size: 0.875rem;
line-height: 1.25rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.1em;
color: #9ca3af;
}
@media (min-width: 640px) {
.home-logos-inner { max-width: 640px; padding-left: 1.5rem; padding-right: 1.5rem; }
}
@media (min-width: 768px) {
.home-logos-inner { max-width: 768px; }
}
@media (min-width: 1024px) {
.home-logos-inner { max-width: 1024px; padding-left: 2rem; padding-right: 2rem; }
}
@media (min-width: 1280px) {
.home-logos-inner { max-width: 1280px; }
}
@media (min-width: 1536px) {
.home-logos-inner { max-width: 1536px; }
}
/* ================================================================ home-pain-points（見積業務、担当者の頭とExcelに残っていませんか？） */
.home-pain-points { padding-top: 5rem; padding-bottom: 5rem; background-color: #ffffff; }
.home-pain-points-inner {
width: 100%;
margin-left: auto;
margin-right: auto;
padding-left: 1rem;
padding-right: 1rem;
}
.home-pain-points-header {
margin-left: auto;
margin-right: auto;
margin-bottom: 2.5rem;
max-width: 48rem;
text-align: center;
}
.home-pain-points-badge { margin-bottom: 1rem; }
.home-pain-points-title { margin-bottom: 1.5rem; font-weight: 700; color: #111827; }
.home-pain-points-lead { font-size: 1.125rem; line-height: 1.75rem; color: #6b7280; }
.home-pain-points-issues {
margin-left: auto;
margin-right: auto;
margin-bottom: 4rem;
max-width: 48rem;
text-align: left;
}
.home-pain-points-walls-title {
margin-left: auto;
margin-right: auto;
margin-bottom: 2rem;
max-width: 72rem;
text-align: center;
font-size: 1.125rem;
line-height: 1.75rem;
font-weight: 700;
color: #111827;
}
.home-pain-points-walls { margin-left: auto; margin-right: auto; max-width: 72rem; }
.home-pain-points-video {
margin-left: auto;
margin-right: auto;
margin-top: 4rem;
max-width: 64rem;
border-top-width: 1px;
padding-top: 2.5rem;
border-color: #f3f4f6;
}
.home-pain-points-video-header { margin-bottom: 1.5rem; text-align: center; }
.home-pain-points-video-duration {
margin-bottom: 0.25rem;
font-size: 0.875rem;
line-height: 1.25rem;
font-weight: 700;
color: #1d4ed8;
}
.home-pain-points-video-title {
margin-bottom: 0.5rem;
font-size: 1.25rem;
line-height: 1.75rem;
font-weight: 700;
color: #111827;
}
.home-pain-points-video-desc { font-size: 0.875rem; line-height: 1.25rem; color: #4b5563; }
.home-pain-points-video-button { margin-left: auto; margin-right: auto; max-width: 48rem; }
.home-pain-points-video-hint {
margin-top: 0.75rem;
text-align: center;
font-size: 0.875rem;
line-height: 1.25rem;
color: #6b7280;
}
@media (min-width: 640px) {
.home-pain-points-inner { max-width: 640px; padding-left: 1.5rem; padding-right: 1.5rem; }
}
@media (min-width: 768px) {
.home-pain-points-inner { max-width: 768px; }
}
@media (min-width: 1024px) {
.home-pain-points { padding-top: 8rem; padding-bottom: 8rem; }
.home-pain-points-inner { max-width: 1024px; padding-left: 2rem; padding-right: 2rem; }
.home-pain-points-walls-title { font-size: 1.25rem; line-height: 1.75rem; }
.home-pain-points-video-title { font-size: 1.5rem; line-height: 2rem; }
}
@media (min-width: 1280px) {
.home-pain-points-inner { max-width: 1280px; }
}
@media (min-width: 1536px) {
.home-pain-points-inner { max-width: 1536px; }
}
/* ================================================================ home-cando（見積書を置くだけ。AIが「読む・揃える・比べる・判断する・蓄） */
.home-cando {
border-bottom-width: 1px;
padding-top: 4rem;
padding-bottom: 4rem;
border-color: #f3f4f6;
background-color: #ffffff;
}
.home-cando-inner {
width: 100%;
margin-left: auto;
margin-right: auto;
padding-left: 1rem;
padding-right: 1rem;
}
.home-cando-content {
margin-left: auto;
margin-right: auto;
max-width: 80rem;
overflow: hidden;
}
.home-cando-grid { display: grid; align-items: center; gap: 2.5rem; }
.home-cando-copy { position: relative; z-index: 10; }
.home-cando-title {
margin-bottom: 1.5rem;
font-size: 1.125rem;
font-weight: 900;
line-height: 1.625;
color: #0d0d1a;
}
.home-cando-body > :not([hidden]) ~ :not([hidden]) { margin-top: 1rem; margin-bottom: 0; }
.home-cando-body { font-size: 0.75rem; line-height: 2; color: #0d0d1a; }
.home-cando-links {
margin-top: 1rem;
display: flex;
flex-wrap: wrap;
gap: 1rem;
font-size: 0.75rem;
line-height: 1rem;
font-weight: 600;
}
.home-cando-link {
text-decoration-line: underline;
text-underline-offset: 4px;
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, -webkit-text-decoration-color;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;
color: #0044cc;
}
.home-cando-link:hover { color: #0066ff; }
.home-cando-cta { margin-top: 2rem; }
.home-cando-cta-button {
display: inline-flex;
width: 100%;
max-width: 460px;
align-items: center;
justify-content: space-between;
gap: 1.25rem;
border-radius: 1rem;
padding-left: 1.5rem;
padding-right: 1.5rem;
padding-top: 1.25rem;
padding-bottom: 1.25rem;
transition-property: all;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;
background-image: linear-gradient(to right, #0066FF, #0044CC);
color: #ffffff;
box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
}
.home-cando-cta-button:hover { box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25); transform: translateY(-0.125rem); }
.home-cando-cta-text { text-align: left; line-height: 1.25; }
.home-cando-cta-lead {
display: block;
font-size: 0.875rem;
line-height: 1.25rem;
font-weight: 700;
letter-spacing: 0.02em;
}
.home-cando-cta-label {
margin-top: 0.25rem;
display: block;
font-size: 1.125rem;
line-height: 1.75rem;
font-weight: 900;
}
.home-cando-cta-icon {
height: 1.75rem;
width: 1.75rem;
flex-shrink: 0;
transition-property: transform;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 300ms;
}
.home-cando-cta-button:hover .home-cando-cta-icon { transform: translateX(0.25rem); }
.home-cando-resources {
margin-top: 1rem;
display: flex;
flex-wrap: wrap;
column-gap: 1.5rem;
row-gap: 0.5rem;
}
.home-cando-resource-link {
display: inline-flex;
align-items: center;
gap: 0.5rem;
font-size: 0.75rem;
line-height: 1rem;
font-weight: 600;
text-decoration-line: underline;
text-underline-offset: 4px;
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, -webkit-text-decoration-color;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;
color: #0044cc;
}
.home-cando-resource-link:hover { color: #0066ff; }
.home-cando-resource-icon { height: 1rem; width: 1rem; }
.home-cando-flow { margin-top: 2.5rem; }
@media (min-width: 640px) {
.home-cando-inner { max-width: 640px; padding-left: 1.5rem; padding-right: 1.5rem; }
.home-cando-title { font-size: 1.25rem; line-height: 1.75rem; }
.home-cando-body { font-size: 0.875rem; line-height: 1.25rem; }
.home-cando-links { font-size: 0.875rem; line-height: 1.25rem; }
.home-cando-cta { margin-top: 2.5rem; }
.home-cando-cta-button { width: auto; min-width: 360px; }
.home-cando-cta-lead { font-size: 1rem; line-height: 1.5rem; }
.home-cando-cta-label { font-size: 1.25rem; line-height: 1.75rem; }
.home-cando-cta-icon { height: 2rem; width: 2rem; }
.home-cando-resource-link { font-size: 0.875rem; line-height: 1.25rem; }
}
@media (min-width: 768px) {
.home-cando-inner { max-width: 768px; }
}
@media (min-width: 1024px) {
.home-cando { padding-top: 5rem; padding-bottom: 5rem; }
.home-cando-inner { max-width: 1024px; padding-left: 2rem; padding-right: 2rem; }
.home-cando-grid { gap: 3rem; }
.home-cando-title { font-size: 1.5rem; line-height: 2rem; }
.home-cando-body { font-size: 1rem; line-height: 1.5rem; }
.home-cando-flow { margin-top: 3rem; }
}
@media (min-width: 1280px) {
.home-cando-inner { max-width: 1280px; }
}
@media (min-width: 1536px) {
.home-cando-inner { max-width: 1536px; }
}
/* ================================================================ home-output-first（読み取るだけでは、見積業務は終わりません。） */
.home-output-first { padding-top: 4rem; padding-bottom: 4rem; }
.home-output-first-inner {
width: 100%;
margin-left: auto;
margin-right: auto;
padding-left: 1rem;
padding-right: 1rem;
}
.home-output-first-header {
margin-left: auto;
margin-right: auto;
margin-bottom: 3rem;
max-width: 48rem;
text-align: center;
}
.home-output-first-badge { margin-bottom: 1rem; }
.home-output-first-title { margin-bottom: 1.5rem; font-weight: 700; color: #111827; }
.home-output-first-lead { font-size: 1.125rem; line-height: 1.75rem; color: #6b7280; }
.home-output-first-compare {
margin-left: auto;
margin-right: auto;
display: grid;
max-width: 72rem;
grid-template-columns: repeat(1, minmax(0, 1fr));
align-items: center;
gap: 2rem;
}
.home-output-first-before-docs { position: relative; min-height: 240px; overflow: hidden; }
.home-output-first-pdf-doc {
position: absolute;
left: 4%;
top: 2rem;
width: 38%;
border-radius: 0.5rem;
border-width: 1px;
padding: 0.75rem;
transform: rotate(-7deg);
border-color: #cbd5e1;
background-color: #ffffff;
box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
filter: grayscale(100%);
}
.home-output-first-doc-label {
margin-bottom: 0.5rem;
font-size: 9px;
font-weight: 700;
color: #64748b;
}
.home-output-first-doc-lines > :not([hidden]) ~ :not([hidden]) { margin-top: 0.375rem; margin-bottom: 0; }
.home-output-first-pdf-line {
height: 0.375rem;
width: 100%;
border-radius: 0.25rem;
background-color: #cbd5e1;
}
.home-output-first-pdf-line-short {
height: 0.375rem;
width: 80%;
border-radius: 0.25rem;
background-color: #cbd5e1;
}
.home-output-first-doc-line-faint {
height: 0.375rem;
width: 100%;
border-radius: 0.25rem;
background-color: #e2e8f0;
}
.home-output-first-pdf-line-end {
height: 0.375rem;
width: 60%;
border-radius: 0.25rem;
background-color: #e2e8f0;
}
.home-output-first-fax-doc {
position: absolute;
left: 30%;
top: 0.25rem;
width: 38%;
border-radius: 0.5rem;
border-width: 1px;
padding: 0.75rem;
transform: rotate(4deg);
border-color: #cbd5e1;
background-color: #e2e8f0;
box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
}
.home-output-first-fax-lines > :not([hidden]) ~ :not([hidden]) { margin-top: 0.375rem; margin-bottom: 0; }
.home-output-first-fax-lines { opacity: 0.7; }
.home-output-first-fax-line-short {
height: 0.375rem;
width: 83.333333%;
border-radius: 0.25rem;
background-color: #94a3b8;
}
.home-output-first-fax-line {
height: 0.375rem;
width: 100%;
border-radius: 0.25rem;
background-color: #94a3b8;
}
.home-output-first-fax-line-faint {
height: 0.375rem;
width: 66.666667%;
border-radius: 0.25rem;
background-color: #cbd5e1;
}
.home-output-first-excel-doc {
position: absolute;
right: 3%;
top: 2.5rem;
width: 38%;
border-radius: 0.5rem;
border-width: 1px;
padding: 0.75rem;
transform: rotate(8deg);
border-color: #cbd5e1;
background-color: #ffffff;
box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
filter: grayscale(100%);
}
.home-output-first-excel-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.25rem; }
.home-output-first-excel-cell { height: 0.375rem; border-radius: 0.25rem; background-color: #cbd5e1; }
.home-output-first-excel-cell-faint { height: 0.375rem; border-radius: 0.25rem; background-color: #e2e8f0; }
.home-output-first-handwritten-doc {
position: absolute;
bottom: 0.5rem;
left: 12%;
width: 38%;
border-radius: 0.5rem;
border-width: 1px;
padding: 0.75rem;
transform: rotate(3deg);
border-color: #cbd5e1;
background-color: #fffbeb;
box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
}
.home-output-first-handwritten-scribble { height: 2rem; width: 100%; color: #94a3b8; }
.home-output-first-scan-doc {
position: absolute;
bottom: 0;
right: 14%;
width: 38%;
border-radius: 0.5rem;
border-width: 1px;
padding: 0.75rem;
transform: rotate(-4deg);
border-color: #cbd5e1;
background-color: #ffffff;
box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
filter: grayscale(100%);
}
.home-output-first-scan-line {
height: 0.375rem;
width: 75%;
border-radius: 0.25rem;
background-color: #cbd5e1;
}
.home-output-first-scan-line-faint {
height: 0.375rem;
width: 50%;
border-radius: 0.25rem;
background-color: #e2e8f0;
}
.home-output-first-before-caption {
margin-top: 0.75rem;
text-align: center;
font-size: 0.875rem;
line-height: 1.25rem;
font-weight: 700;
color: #6b7280;
}
.home-output-first-after-frame {
border-radius: 1rem;
padding: 0.5rem;
background-color: #0f172a;
box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
}
.home-output-first-after-sheet {
overflow: hidden;
border-radius: 0.75rem;
border-width: 1px;
padding: 0.75rem;
border-color: #e2e8f0;
background-color: #ffffff;
}
.home-output-first-sheet-header {
margin-bottom: 0.5rem;
display: flex;
align-items: center;
gap: 0.5rem;
}
.home-output-first-sheet-icon {
display: flex;
height: 1rem;
width: 1rem;
align-items: center;
justify-content: center;
border-radius: 0.125rem;
font-size: 9px;
font-weight: 900;
background-color: #047857;
color: #ffffff;
}
.home-output-first-sheet-filename { font-size: 10px; font-weight: 700; color: #64748b; }
.home-output-first-table { width: 100%; border-collapse: collapse; font-size: 10px; }
.home-output-first-table-head-row { background-color: #eff6ff; color: #475569; }
.home-output-first-table-head-label {
border-width: 1px;
padding-left: 0.375rem;
padding-right: 0.375rem;
padding-top: 0.25rem;
padding-bottom: 0.25rem;
text-align: left;
font-weight: 700;
border-color: #e2e8f0;
}
.home-output-first-table-head-amount {
border-width: 1px;
padding-left: 0.375rem;
padding-right: 0.375rem;
padding-top: 0.25rem;
padding-bottom: 0.25rem;
text-align: right;
font-weight: 700;
border-color: #e2e8f0;
}
.home-output-first-table-head-optional {
display: none;
border-width: 1px;
padding-left: 0.375rem;
padding-right: 0.375rem;
padding-top: 0.25rem;
padding-bottom: 0.25rem;
text-align: right;
font-weight: 700;
border-color: #e2e8f0;
}
.home-output-first-table-body { color: #334155; }
.home-output-first-table-cell-label {
border-width: 1px;
padding-left: 0.375rem;
padding-right: 0.375rem;
padding-top: 0.25rem;
padding-bottom: 0.25rem;
border-color: #e2e8f0;
}
.home-output-first-table-cell-amount {
border-width: 1px;
padding-left: 0.375rem;
padding-right: 0.375rem;
padding-top: 0.25rem;
padding-bottom: 0.25rem;
text-align: right;
border-color: #e2e8f0;
}
.home-output-first-table-cell-lowest {
border-width: 1px;
padding-left: 0.375rem;
padding-right: 0.375rem;
padding-top: 0.25rem;
padding-bottom: 0.25rem;
text-align: right;
font-weight: 700;
border-color: #e2e8f0;
background-color: #eff6ff;
color: #0044cc;
}
.home-output-first-table-cell-optional {
display: none;
border-width: 1px;
padding-left: 0.375rem;
padding-right: 0.375rem;
padding-top: 0.25rem;
padding-bottom: 0.25rem;
text-align: right;
border-color: #e2e8f0;
}
.home-output-first-table-cell-caution {
border-width: 1px;
padding-left: 0.375rem;
padding-right: 0.375rem;
padding-top: 0.25rem;
padding-bottom: 0.25rem;
border-color: #e2e8f0;
color: #b45309;
}
.home-output-first-table-cell-note {
border-width: 1px;
padding-left: 0.375rem;
padding-right: 0.375rem;
padding-top: 0.25rem;
padding-bottom: 0.25rem;
border-color: #e2e8f0;
color: #94a3b8;
}
.home-output-first-table-lowest-optional {
display: none;
border-width: 1px;
padding-left: 0.375rem;
padding-right: 0.375rem;
padding-top: 0.25rem;
padding-bottom: 0.25rem;
text-align: right;
font-weight: 700;
border-color: #e2e8f0;
background-color: #eff6ff;
color: #0044cc;
}
.home-output-first-table-cell-included {
border-width: 1px;
padding-left: 0.375rem;
padding-right: 0.375rem;
padding-top: 0.25rem;
padding-bottom: 0.25rem;
text-align: right;
font-weight: 700;
border-color: #e2e8f0;
color: #b45309;
}
.home-output-first-table-total-row { font-weight: 700; }
.home-output-first-sheet-note { margin-top: 0.5rem; font-size: 9px; color: #94a3b8; }
.home-output-first-after-caption {
margin-top: 0.75rem;
text-align: center;
font-size: 0.875rem;
line-height: 1.25rem;
font-weight: 700;
color: #0044cc;
}
.home-output-first-video {
margin-left: auto;
margin-right: auto;
margin-top: 4rem;
max-width: 64rem;
border-top-width: 1px;
padding-top: 2.5rem;
border-color: #e5e7eb;
}
.home-output-first-video-header { margin-bottom: 1.5rem; text-align: center; }
.home-output-first-video-duration {
margin-bottom: 0.25rem;
font-size: 0.875rem;
line-height: 1.25rem;
font-weight: 700;
color: #1d4ed8;
}
.home-output-first-video-title {
margin-bottom: 0.5rem;
font-size: 1.25rem;
line-height: 1.75rem;
font-weight: 700;
color: #111827;
}
.home-output-first-video-desc { font-size: 0.875rem; line-height: 1.25rem; color: #4b5563; }
.home-output-first-video-button { margin-left: auto; margin-right: auto; max-width: 48rem; }
.home-output-first-video-hint {
margin-top: 0.75rem;
text-align: center;
font-size: 0.875rem;
line-height: 1.25rem;
color: #6b7280;
}
.home-output-first-blog-cta {
margin-left: auto;
margin-right: auto;
margin-top: 2rem;
max-width: 72rem;
text-align: center;
}
.home-output-first-blog-link {
display: inline-flex;
align-items: center;
gap: 0.5rem;
font-size: 0.75rem;
line-height: 1rem;
font-weight: 600;
text-decoration-line: underline;
text-underline-offset: 4px;
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, -webkit-text-decoration-color;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;
color: #0044cc;
}
.home-output-first-blog-link:hover { color: #0066ff; }
.home-output-first-blog-link-icon { height: 1rem; width: 1rem; }
@media (min-width: 640px) {
.home-output-first-inner { max-width: 640px; padding-left: 1.5rem; padding-right: 1.5rem; }
.home-output-first-before-docs { min-height: 280px; }
.home-output-first-after-sheet { padding: 1rem; }
.home-output-first-sheet-filename { font-size: 0.75rem; line-height: 1rem; }
.home-output-first-table { font-size: 0.75rem; line-height: 1rem; }
.home-output-first-table-head-optional { display: table-cell; }
.home-output-first-table-cell-optional { display: table-cell; }
.home-output-first-table-lowest-optional { display: table-cell; }
.home-output-first-sheet-note { font-size: 10px; }
.home-output-first-blog-link { font-size: 0.875rem; line-height: 1.25rem; }
}
@media (min-width: 768px) {
.home-output-first-inner { max-width: 768px; }
}
@media (min-width: 1024px) {
.home-output-first { padding-top: 6rem; padding-bottom: 6rem; }
.home-output-first-inner { max-width: 1024px; padding-left: 2rem; padding-right: 2rem; }
.home-output-first-compare { grid-template-columns: 5fr auto 6fr; gap: 1.5rem; }
.home-output-first-video-title { font-size: 1.5rem; line-height: 2rem; }
}
@media (min-width: 1280px) {
.home-output-first-inner { max-width: 1280px; }
}
@media (min-width: 1536px) {
.home-output-first-inner { max-width: 1536px; }
}
/* ================================================================ home-results（Connected Baseの導入効果） */
.home-results {
position: relative;
overflow: hidden;
padding-top: 4rem;
padding-bottom: 4rem;
}
.home-results-inner {
width: 100%;
position: relative;
z-index: 10;
margin-left: auto;
margin-right: auto;
padding-left: 1rem;
padding-right: 1rem;
}
.home-results-content { margin-left: auto; margin-right: auto; max-width: 64rem; }
.home-results-header { margin-bottom: 3rem; text-align: center; }
.home-results-title {
margin-bottom: 1rem;
font-size: 1.875rem;
line-height: 2.25rem;
font-weight: 700;
color: #111827;
}
.home-results-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; }
.home-results-stat { text-align: center; }
.home-results-stat-value { margin-bottom: 0.5rem; font-size: 2.25rem; line-height: 2.5rem; }
.home-results-stat-label { font-size: 0.875rem; line-height: 1.25rem; color: #6b7280; }
.home-results-note {
margin-top: 1.5rem;
text-align: center;
font-size: 0.75rem;
line-height: 1.625;
color: #9ca3af;
}
@media (min-width: 640px) {
.home-results-inner { max-width: 640px; padding-left: 1.5rem; padding-right: 1.5rem; }
}
@media (min-width: 768px) {
.home-results-inner { max-width: 768px; }
}
@media (min-width: 1024px) {
.home-results { padding-top: 5rem; padding-bottom: 5rem; }
.home-results-inner { max-width: 1024px; padding-left: 2rem; padding-right: 2rem; }
.home-results-title { font-size: 2.25rem; line-height: 2.5rem; }
.home-results-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 1280px) {
.home-results-inner { max-width: 1280px; }
}
@media (min-width: 1536px) {
.home-results-inner { max-width: 1536px; }
}
/* ================================================================ home-features（3層ルールエンジンで高精度を実現） */
.home-features { padding-top: 5rem; padding-bottom: 5rem; background-color: #ffffff; }
.home-features-inner {
width: 100%;
margin-left: auto;
margin-right: auto;
padding-left: 1rem;
padding-right: 1rem;
}
.home-features-header {
margin-left: auto;
margin-right: auto;
margin-bottom: 3rem;
max-width: 48rem;
text-align: center;
}
.home-features-badge { margin-bottom: 1rem; }
.home-features-title { margin-bottom: 1.5rem; font-weight: 700; color: #111827; }
.home-features-lead { font-size: 1.125rem; line-height: 1.75rem; color: #6b7280; }
.home-features-layers {
margin-left: auto;
margin-right: auto;
margin-bottom: 3rem;
max-width: 64rem;
}
.home-features-layers-emphasis { color: #111827; }
.home-features-tabs {
margin-left: auto;
margin-right: auto;
margin-bottom: 2rem;
max-width: 56rem;
}
.home-features-panels { margin-left: auto; margin-right: auto; max-width: 72rem; }
.home-features-panel { display: grid; align-items: center; gap: 3rem; }
.home-features-icon-wrap { margin-bottom: 1.5rem; }
.home-features-icon { height: 2rem; width: 2rem; color: #ffffff; }
.home-features-panel-title {
margin-bottom: 1rem;
font-size: 1.5rem;
line-height: 2rem;
font-weight: 700;
color: #111827;
}
.home-features-panel-text { margin-bottom: 1.5rem; line-height: 1.625; color: #6b7280; }
.home-features-checklist > :not([hidden]) ~ :not([hidden]) { margin-top: 0.75rem; margin-bottom: 0; }
.home-features-check-item {
display: flex;
align-items: center;
gap: 0.75rem;
color: #374151;
}
.home-features-check-mark {
display: flex;
height: 1.25rem;
width: 1.25rem;
flex-shrink: 0;
align-items: center;
justify-content: center;
border-radius: 9999px;
background-color: #0066ff;
}
.home-features-check-icon { height: 0.75rem; width: 0.75rem; color: #ffffff; }
.home-features-media { position: relative; }
.home-features-image {
width: 100%;
border-radius: 1rem;
box-shadow: 0 0 0 1px #e2e8f0, 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
}
.home-features-image-note {
margin-top: 0.5rem;
text-align: right;
font-size: 10px;
color: #9ca3af;
}
@media (min-width: 640px) {
.home-features-inner { max-width: 640px; padding-left: 1.5rem; padding-right: 1.5rem; }
}
@media (min-width: 768px) {
.home-features-inner { max-width: 768px; }
}
@media (min-width: 1024px) {
.home-features { padding-top: 8rem; padding-bottom: 8rem; }
.home-features-inner { max-width: 1024px; padding-left: 2rem; padding-right: 2rem; }
.home-features-panel { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1280px) {
.home-features-inner { max-width: 1280px; }
}
@media (min-width: 1536px) {
.home-features-inner { max-width: 1536px; }
}
/* ================================================================ home-solutions（見積業務が重い業界から、使われています） */
.home-solutions { padding-top: 5rem; padding-bottom: 5rem; }
.home-solutions-inner {
width: 100%;
margin-left: auto;
margin-right: auto;
padding-left: 1rem;
padding-right: 1rem;
}
.home-solutions-header {
margin-left: auto;
margin-right: auto;
margin-bottom: 4rem;
max-width: 48rem;
text-align: center;
}
.home-solutions-badge { margin-bottom: 1rem; }
.home-solutions-title { margin-bottom: 1.5rem; font-weight: 700; color: #111827; }
.home-solutions-lead { font-size: 1.125rem; line-height: 1.75rem; color: #6b7280; }
.home-solutions-grid {
margin-left: auto;
margin-right: auto;
margin-bottom: 1.5rem;
display: grid;
max-width: 72rem;
gap: 1.5rem;
}
.home-solutions-card-icon-wrap {
margin-bottom: 1.5rem;
transition-property: transform;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;
}
.home-solutions-card:hover .home-solutions-card-icon-wrap { transform: scale(1.1); }
.home-solutions-card-icon { height: 1.75rem; width: 1.75rem; color: #ffffff; }
.home-solutions-card-tag {
margin-bottom: 0.5rem;
font-size: 0.75rem;
line-height: 1rem;
font-weight: 700;
letter-spacing: 0.08em;
color: #0066ff;
}
.home-solutions-card-title {
margin-bottom: 0.75rem;
font-size: 1.25rem;
line-height: 1.75rem;
font-weight: 700;
color: #111827;
}
.home-solutions-card-text {
margin-bottom: 1.5rem;
font-size: 0.875rem;
line-height: 1.625;
color: #6b7280;
}
.home-solutions-card-link {
display: inline-flex;
align-items: center;
font-size: 0.875rem;
line-height: 1.25rem;
font-weight: 700;
transition-property: opacity;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;
color: #0066ff;
}
.home-solutions-card-link:hover { opacity: 0.8; }
.home-solutions-card-link-icon { margin-left: 0.5rem; height: 1rem; width: 1rem; }
.home-solutions-others {
margin-left: auto;
margin-right: auto;
margin-bottom: 3rem;
max-width: 72rem;
}
.home-solutions-others-card {
display: flex;
flex-direction: column;
gap: 0.5rem;
border-radius: 1rem;
border-width: 1px;
padding-left: 1.25rem;
padding-right: 1.25rem;
padding-top: 1rem;
padding-bottom: 1rem;
border-color: #e2e8f0;
background-color: #ffffff;
}
.home-solutions-others-title {
flex-shrink: 0;
font-size: 0.875rem;
line-height: 1.25rem;
font-weight: 700;
color: #374151;
}
.home-solutions-others-text { font-size: 0.75rem; line-height: 1.625; color: #6b7280; }
.home-solutions-others-links {
display: flex;
flex-shrink: 0;
gap: 1rem;
font-size: 0.875rem;
line-height: 1.25rem;
font-weight: 600;
}
.home-solutions-others-link {
transition-property: opacity;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;
color: #0066ff;
}
.home-solutions-others-link:hover { opacity: 0.8; }
.home-solutions-cta { text-align: center; }
.home-solutions-cta-button {
padding-left: 2.5rem;
padding-right: 2.5rem;
padding-top: 1rem;
padding-bottom: 1rem;
font-size: 1.125rem;
line-height: 1.75rem;
font-weight: 700;
color: #ffffff;
}
@media (min-width: 640px) {
.home-solutions-inner { max-width: 640px; padding-left: 1.5rem; padding-right: 1.5rem; }
.home-solutions-others-card { flex-direction: row; align-items: center; gap: 1.5rem; }
.home-solutions-others-text { flex: 1 1 0%; }
}
@media (min-width: 768px) {
.home-solutions-inner { max-width: 768px; }
.home-solutions-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
.home-solutions { padding-top: 8rem; padding-bottom: 8rem; }
.home-solutions-inner { max-width: 1024px; padding-left: 2rem; padding-right: 2rem; }
}
@media (min-width: 1280px) {
.home-solutions-inner { max-width: 1280px; }
}
@media (min-width: 1536px) {
.home-solutions-inner { max-width: 1536px; }
}
/* ================================================================ home-cases（活用シーン） */
.home-cases { padding-top: 5rem; padding-bottom: 5rem; background-color: #ffffff; }
.home-cases-inner {
width: 100%;
margin-left: auto;
margin-right: auto;
padding-left: 1rem;
padding-right: 1rem;
}
.home-cases-header {
margin-left: auto;
margin-right: auto;
margin-bottom: 4rem;
max-width: 48rem;
text-align: center;
}
.home-cases-badge { margin-bottom: 1rem; }
.home-cases-title { margin-bottom: 1.5rem; font-weight: 700; color: #111827; }
.home-cases-lead { font-size: 1.125rem; line-height: 1.75rem; color: #6b7280; }
.home-cases-grid {
margin-left: auto;
margin-right: auto;
margin-bottom: 3rem;
display: grid;
max-width: 72rem;
gap: 2rem;
}
.home-cases-card {
margin-left: -1rem;
margin-right: -1rem;
margin-top: -1rem;
margin-bottom: 1rem;
}
.home-cases-card-image {
height: 12rem;
width: 100%;
border-top-left-radius: 1rem;
border-top-right-radius: 1rem;
object-fit: cover;
}
.home-cases-card-industry { font-size: 0.75rem; line-height: 1rem; }
.home-cases-card-title {
margin-bottom: 0.75rem;
font-size: 1.25rem;
line-height: 1.75rem;
font-weight: 700;
color: #111827;
}
.home-cases-card-stat-value { margin-bottom: 0.25rem; font-size: 2.25rem; line-height: 2.5rem; }
.home-cases-card-stat-label { font-size: 0.875rem; line-height: 1.25rem; color: #6b7280; }
.home-cases-card-text {
margin-bottom: 1rem;
font-size: 0.875rem;
line-height: 1.625;
color: #4b5563;
}
.home-cases-quote-primary {
border-radius: 0.75rem;
border-left-width: 4px;
padding: 1rem;
border-color: #3b82f6;
background-color: #eff6ff;
}
.home-cases-quote-text {
font-size: 0.875rem;
line-height: 1.25rem;
font-style: italic;
color: #4b5563;
}
.home-cases-quote-success {
border-radius: 0.75rem;
border-left-width: 4px;
padding: 1rem;
border-color: #22c55e;
background-color: #f0fdf4;
}
.home-cases-quote-accent {
border-radius: 0.75rem;
border-left-width: 4px;
padding: 1rem;
border-color: #a855f7;
background-color: #faf5ff;
}
.home-cases-card-stat-phrase { margin-bottom: 0.25rem; font-size: 1.875rem; line-height: 2.25rem; }
.home-cases-cta { text-align: center; }
.home-cases-cta-button {
padding-left: 2.5rem;
padding-right: 2.5rem;
padding-top: 1rem;
padding-bottom: 1rem;
font-size: 1.125rem;
line-height: 1.75rem;
font-weight: 700;
}
@media (min-width: 640px) {
.home-cases-inner { max-width: 640px; padding-left: 1.5rem; padding-right: 1.5rem; }
}
@media (min-width: 768px) {
.home-cases-inner { max-width: 768px; }
.home-cases-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
.home-cases { padding-top: 8rem; padding-bottom: 8rem; }
.home-cases-inner { max-width: 1024px; padding-left: 2rem; padding-right: 2rem; }
.home-cases-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 1280px) {
.home-cases-inner { max-width: 1280px; }
}
@media (min-width: 1536px) {
.home-cases-inner { max-width: 1536px; }
}
/* ================================================================ home-steps（シンプルな導入ステップ） */
.home-steps { padding-top: 5rem; padding-bottom: 5rem; background-color: #ffffff; }
.home-steps-inner {
width: 100%;
margin-left: auto;
margin-right: auto;
padding-left: 1rem;
padding-right: 1rem;
}
.home-steps-header {
margin-left: auto;
margin-right: auto;
margin-bottom: 4rem;
max-width: 48rem;
text-align: center;
}
.home-steps-badge { margin-bottom: 1rem; }
.home-steps-title { margin-bottom: 1.5rem; font-weight: 700; color: #111827; }
.home-steps-lead { font-size: 1.125rem; line-height: 1.75rem; color: #6b7280; }
.home-steps-content {
margin-left: auto;
margin-right: auto;
margin-bottom: 3rem;
max-width: 72rem;
}
.home-steps-panel {
border-radius: 1.5rem;
padding: 1.5rem;
background-image: linear-gradient(to right, #0f172a, #1e3a8a, #0066FF);
color: #ffffff;
box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
}
.home-steps-panel-header {
margin-bottom: 1.5rem;
display: flex;
flex-direction: column;
gap: 1rem;
}
.home-steps-panel-eyebrow {
margin-bottom: 0.5rem;
font-size: 0.75rem;
line-height: 1rem;
text-transform: uppercase;
letter-spacing: 0.2em;
color: #bfdbfe;
}
.home-steps-panel-title { font-size: 1.5rem; line-height: 2rem; font-weight: 900; }
.home-steps-panel-badge {
display: inline-flex;
align-items: center;
border-radius: 9999px;
border-width: 1px;
border-color: rgb(255 255 255 / 0.25);
background-color: rgb(255 255 255 / 0.15);
padding-left: 1rem;
padding-right: 1rem;
padding-top: 0.5rem;
padding-bottom: 0.5rem;
font-size: 0.75rem;
line-height: 1rem;
font-weight: 700;
}
.home-steps-panel-footer { margin-top: 1.5rem; text-align: center; }
.home-steps-panel-note { font-size: 0.875rem; line-height: 1.25rem; color: rgb(255 255 255 / 0.7); }
@media (min-width: 640px) {
.home-steps-inner { max-width: 640px; padding-left: 1.5rem; padding-right: 1.5rem; }
}
@media (min-width: 768px) {
.home-steps-inner { max-width: 768px; }
}
@media (min-width: 1024px) {
.home-steps { padding-top: 8rem; padding-bottom: 8rem; }
.home-steps-inner { max-width: 1024px; padding-left: 2rem; padding-right: 2rem; }
.home-steps-panel { padding: 2rem; }
.home-steps-panel-header { flex-direction: row; align-items: flex-end; justify-content: space-between; }
.home-steps-panel-title { font-size: 1.875rem; line-height: 2.25rem; }
}
@media (min-width: 1280px) {
.home-steps-inner { max-width: 1280px; }
}
@media (min-width: 1536px) {
.home-steps-inner { max-width: 1536px; }
}
/* ================================================================ home-pricing（自動化深度に合わせた料金プラン） */
.home-pricing {
position: relative;
overflow: hidden;
padding-top: 5rem;
padding-bottom: 5rem;
}
.home-pricing-inner {
width: 100%;
position: relative;
z-index: 10;
margin-left: auto;
margin-right: auto;
padding-left: 1rem;
padding-right: 1rem;
}
.home-pricing-header {
margin-left: auto;
margin-right: auto;
margin-bottom: 4rem;
max-width: 48rem;
text-align: center;
}
.home-pricing-badge { margin-bottom: 1rem; }
.home-pricing-title { margin-bottom: 1.5rem; font-weight: 700; color: #111827; }
.home-pricing-lead { font-size: 1.125rem; line-height: 1.75rem; color: #6b7280; }
.home-pricing-lead-break { display: none; }
.home-pricing-plans {
margin-left: auto;
margin-right: auto;
margin-bottom: 3rem;
max-width: 64rem;
}
.home-pricing-plan-name {
margin-bottom: 0.75rem;
font-size: 1.25rem;
line-height: 1.75rem;
font-weight: 700;
color: #111827;
}
.home-pricing-plan-summary { margin-bottom: 1.5rem; }
.home-pricing-plan-tagline {
margin-bottom: 0.25rem;
font-size: 1.25rem;
line-height: 1.75rem;
font-weight: 900;
}
.home-pricing-plan-text { font-size: 0.875rem; line-height: 1.25rem; color: #4b5563; }
.home-pricing-plan-features { margin-bottom: 2rem; }
.home-pricing-plan-features > :not([hidden]) ~ :not([hidden]) { margin-top: 0.75rem; margin-bottom: 0; }
.home-pricing-plan-feature {
display: flex;
align-items: center;
font-size: 0.875rem;
line-height: 1.25rem;
color: #4b5563;
}
.home-pricing-plan-feature-icon {
margin-right: 0.75rem;
height: 1.25rem;
width: 1.25rem;
flex-shrink: 0;
color: #0066ff;
}
.home-pricing-plan-link {
width: 100%;
padding-top: 0.75rem;
padding-bottom: 0.75rem;
font-size: 0.875rem;
line-height: 1.25rem;
}
.home-pricing-plan-flag {
border-radius: 9999px;
padding-left: 1.25rem;
padding-right: 1.25rem;
padding-top: 0.375rem;
padding-bottom: 0.375rem;
font-size: 0.875rem;
line-height: 1.25rem;
font-weight: 700;
background-color: #0066ff;
color: #ffffff;
}
.home-pricing-plan-name-featured {
margin-bottom: 0.75rem;
margin-top: 0.5rem;
font-size: 1.25rem;
line-height: 1.75rem;
font-weight: 700;
color: #111827;
}
.home-pricing-more { text-align: center; }
.home-pricing-more-link {
display: inline-flex;
align-items: center;
font-weight: 700;
transition-property: opacity;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;
color: #0066ff;
}
.home-pricing-more-link:hover { opacity: 0.8; }
.home-pricing-more-link-icon { margin-left: 0.5rem; height: 1.25rem; width: 1.25rem; }
@media (min-width: 640px) {
.home-pricing-inner { max-width: 640px; padding-left: 1.5rem; padding-right: 1.5rem; }
.home-pricing-lead-break { display: inline; }
}
@media (min-width: 768px) {
.home-pricing-inner { max-width: 768px; }
}
@media (min-width: 1024px) {
.home-pricing { padding-top: 8rem; padding-bottom: 8rem; }
.home-pricing-inner { max-width: 1024px; padding-left: 2rem; padding-right: 2rem; }
}
@media (min-width: 1280px) {
.home-pricing-inner { max-width: 1280px; }
}
@media (min-width: 1536px) {
.home-pricing-inner { max-width: 1536px; }
}
/* ================================================================ home-faq（よくあるご質問） */
.home-faq { padding-top: 5rem; padding-bottom: 5rem; background-color: #ffffff; }
.home-faq-inner {
width: 100%;
margin-left: auto;
margin-right: auto;
padding-left: 1rem;
padding-right: 1rem;
}
.home-faq-header {
margin-left: auto;
margin-right: auto;
margin-bottom: 4rem;
max-width: 48rem;
text-align: center;
}
.home-faq-badge { margin-bottom: 1rem; }
.home-faq-title { margin-bottom: 1.5rem; font-weight: 700; color: #111827; }
.home-faq-list { margin-left: auto; margin-right: auto; max-width: 48rem; }
.home-faq-list > :not([hidden]) ~ :not([hidden]) { margin-top: 1rem; margin-bottom: 0; }
.home-faq-question {
display: flex;
width: 100%;
align-items: center;
justify-content: space-between;
padding: 1.5rem;
text-align: left;
}
.home-faq-question-text { padding-right: 1rem; font-weight: 700; color: #111827; }
.home-faq-question-icon {
height: 1.25rem;
width: 1.25rem;
flex-shrink: 0;
transition-property: transform;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;
color: #9ca3af;
}
.home-faq-answer { padding-left: 1.5rem; padding-right: 1.5rem; padding-bottom: 1.5rem; }
.home-faq-answer-text { line-height: 1.625; color: #6b7280; }
@media (min-width: 640px) {
.home-faq-inner { max-width: 640px; padding-left: 1.5rem; padding-right: 1.5rem; }
}
@media (min-width: 768px) {
.home-faq-inner { max-width: 768px; }
}
@media (min-width: 1024px) {
.home-faq { padding-top: 8rem; padding-bottom: 8rem; }
.home-faq-inner { max-width: 1024px; padding-left: 2rem; padding-right: 2rem; }
}
@media (min-width: 1280px) {
.home-faq-inner { max-width: 1280px; }
}
@media (min-width: 1536px) {
.home-faq-inner { max-width: 1536px; }
}
/* ================================================================ home-other-docs（見積書で育てた仕組みは、ほかの帳票にもそのまま使えます） */
.home-other-docs { padding-top: 3rem; padding-bottom: 3rem; }
.home-other-docs-inner {
width: 100%;
margin-left: auto;
margin-right: auto;
padding-left: 1rem;
padding-right: 1rem;
}
.home-other-docs-header {
margin-left: auto;
margin-right: auto;
max-width: 56rem;
text-align: center;
}
.home-other-docs-badge { margin-bottom: 1rem; }
.home-other-docs-title {
margin-bottom: 1rem;
font-size: 1.5rem;
line-height: 2rem;
font-weight: 700;
color: #111827;
}
.home-other-docs-lead {
margin-bottom: 1.5rem;
font-size: 0.875rem;
line-height: 1.25rem;
color: #6b7280;
}
.home-other-docs-tags {
margin-bottom: 2rem;
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 0.5rem;
}
.home-other-docs-tag {
display: inline-flex;
align-items: center;
border-radius: 9999px;
border-width: 1px;
padding-left: 0.75rem;
padding-right: 0.75rem;
padding-top: 0.375rem;
padding-bottom: 0.375rem;
font-size: 0.75rem;
line-height: 1rem;
font-weight: 600;
border-color: #e2e8f0;
background-color: #ffffff;
color: #475569;
}
.home-other-docs-link {
display: inline-flex;
align-items: center;
font-size: 0.875rem;
line-height: 1.25rem;
font-weight: 700;
transition-property: opacity;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;
color: #0066ff;
}
.home-other-docs-link:hover { opacity: 0.8; }
.home-other-docs-link-icon { margin-left: 0.5rem; height: 1rem; width: 1rem; }
@media (min-width: 640px) {
.home-other-docs-inner { max-width: 640px; padding-left: 1.5rem; padding-right: 1.5rem; }
.home-other-docs-tag { font-size: 0.875rem; line-height: 1.25rem; }
}
@media (min-width: 768px) {
.home-other-docs-inner { max-width: 768px; }
}
@media (min-width: 1024px) {
.home-other-docs { padding-top: 4rem; padding-bottom: 4rem; }
.home-other-docs-inner { max-width: 1024px; padding-left: 2rem; padding-right: 2rem; }
.home-other-docs-title { font-size: 1.875rem; line-height: 2.25rem; }
.home-other-docs-lead { font-size: 1rem; line-height: 1.5rem; }
}
@media (min-width: 1280px) {
.home-other-docs-inner { max-width: 1280px; }
}
@media (min-width: 1536px) {
.home-other-docs-inner { max-width: 1536px; }
}
/* ================================================================ home-partners（アライアンス・パートナー） */
.home-partners { padding-top: 5rem; padding-bottom: 5rem; background-color: #ffffff; }
.home-partners-inner {
margin-left: auto;
margin-right: auto;
max-width: 80rem;
padding-left: 1rem;
padding-right: 1rem;
}
.home-partners-header { margin-bottom: 3rem; text-align: center; }
.home-partners-title {
margin-bottom: 1rem;
font-size: 1.875rem;
line-height: 2.25rem;
font-weight: 700;
color: #111827;
}
.home-partners-lead {
margin-left: auto;
margin-right: auto;
max-width: 42rem;
font-size: 1.125rem;
line-height: 1.75rem;
color: #4b5563;
}
.home-partners-logos {
display: flex;
flex-wrap: nowrap;
align-items: center;
justify-content: flex-start;
gap: 2rem;
overflow-x: auto;
padding-bottom: 0.5rem;
}
.home-partners-logo {
height: 6rem;
width: auto;
flex: none;
object-fit: contain;
}
@media (min-width: 640px) {
.home-partners-inner { padding-left: 1.5rem; padding-right: 1.5rem; }
}
@media (min-width: 1024px) {
.home-partners { padding-top: 6rem; padding-bottom: 6rem; }
.home-partners-inner { padding-left: 2rem; padding-right: 2rem; }
.home-partners-title { font-size: 2.25rem; line-height: 2.5rem; }
.home-partners-logos { justify-content: center; gap: 3rem; }
.home-partners-logo { height: 7rem; }
}
/* ================================================================ home-contact-cta（まずは、実際の見積書でお試しください。） */
.home-contact-cta {
position: relative;
overflow: hidden;
padding-top: 5rem;
padding-bottom: 5rem;
}
.home-contact-cta-backdrop { position: absolute; inset: 0; opacity: 0.1; }
.home-contact-cta-glow-top {
position: absolute;
left: 0;
top: 0;
height: 24rem;
width: 24rem;
animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
border-radius: 9999px;
background-color: #ffffff;
filter: blur(64px);
}
.home-contact-cta-glow-bottom {
position: absolute;
bottom: 0;
right: 0;
height: 24rem;
width: 24rem;
animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
border-radius: 9999px;
background-color: #ffffff;
filter: blur(64px);
}
.home-contact-cta-inner {
width: 100%;
position: relative;
z-index: 10;
margin-left: auto;
margin-right: auto;
padding-left: 1rem;
padding-right: 1rem;
}
.home-contact-cta-content {
margin-left: auto;
margin-right: auto;
max-width: 56rem;
text-align: center;
}
.home-contact-cta-title {
margin-bottom: 1.5rem;
font-size: 2.25rem;
line-height: 2.5rem;
font-weight: 900;
color: #ffffff;
}
.home-contact-cta-lead {
margin-bottom: 3rem;
font-size: 1.25rem;
line-height: 1.75rem;
color: rgb(255 255 255 / 0.8);
}
.home-contact-cta-panel { border-radius: 1.5rem; padding: 2rem; }
.home-contact-cta-button {
padding-left: 2rem;
padding-right: 2rem;
padding-top: 1rem;
padding-bottom: 1rem;
font-size: 1.125rem;
line-height: 1.75rem;
font-weight: 900;
}
.home-contact-cta-button-icon { height: 1.25rem; width: 1.25rem; }
.home-contact-cta-note {
margin-bottom: 2rem;
margin-top: 0.75rem;
font-size: 0.875rem;
line-height: 1.25rem;
color: rgb(255 255 255 / 0.7);
}
.home-contact-cta-demo-lead { margin-bottom: 1rem; font-weight: 700; color: #ffffff; }
.home-contact-cta-more { margin-top: 2rem; text-align: center; }
.home-contact-cta-more-link {
display: inline-flex;
align-items: center;
font-weight: 700;
transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, -webkit-text-decoration-color;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;
color: #ffffff;
}
.home-contact-cta-more-link:hover { color: rgb(255 255 255 / 0.8); }
.home-contact-cta-more-link-icon { margin-left: 0.5rem; height: 1.25rem; width: 1.25rem; }
.home-contact-cta-trust {
margin-top: 3rem;
font-size: 0.875rem;
line-height: 1.25rem;
color: rgb(255 255 255 / 0.6);
}
@media (min-width: 640px) {
.home-contact-cta-inner { max-width: 640px; padding-left: 1.5rem; padding-right: 1.5rem; }
}
@media (min-width: 768px) {
.home-contact-cta-inner { max-width: 768px; }
}
@media (min-width: 1024px) {
.home-contact-cta { padding-top: 8rem; padding-bottom: 8rem; }
.home-contact-cta-inner { max-width: 1024px; padding-left: 2rem; padding-right: 2rem; }
.home-contact-cta-title { font-size: 3rem; line-height: 1; }
.home-contact-cta-panel { padding: 3rem; }
}
@media (min-width: 1280px) {
.home-contact-cta-inner { max-width: 1280px; }
}
@media (min-width: 1536px) {
.home-contact-cta-inner { max-width: 1536px; }
}
/* ================================================================ home-demo-form */
.home-demo-form > :not([hidden]) ~ :not([hidden]) { margin-top: 1.5rem; margin-bottom: 0; }
.home-demo-form-grid { display: grid; gap: 1.5rem; }
.home-demo-form-field {
width: 100%;
border-radius: 0.75rem;
border-width: 2px;
padding-left: 1.5rem;
padding-right: 1.5rem;
padding-top: 1rem;
padding-bottom: 1rem;
transition-property: all;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;
background-color: #ffffff;
color: #111827;
border-color: transparent;
}
.home-demo-form-field::placeholder { color: #9ca3af; }
.home-demo-form-field:focus { border-color: #ffffff; box-shadow: 0 0 0 4px rgb(255 255 255 / 0.2); }
.home-demo-form-select {
width: 100%;
border-radius: 0.75rem;
border-width: 2px;
padding-left: 1.5rem;
padding-right: 1.5rem;
padding-top: 1rem;
padding-bottom: 1rem;
transition-property: all;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;
background-color: #ffffff;
color: #111827;
border-color: transparent;
}
.home-demo-form-select:invalid { color: #9ca3af; }
.home-demo-form-select:focus { border-color: #ffffff; box-shadow: 0 0 0 4px rgb(255 255 255 / 0.2); }
.home-demo-form-option { color: #111827; }
.home-demo-form-textarea {
width: 100%;
resize: none;
border-radius: 0.75rem;
border-width: 2px;
padding-left: 1.5rem;
padding-right: 1.5rem;
padding-top: 1rem;
padding-bottom: 1rem;
transition-property: all;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;
background-color: #ffffff;
color: #111827;
border-color: transparent;
}
.home-demo-form-textarea::placeholder { color: #9ca3af; }
.home-demo-form-textarea:focus { border-color: #ffffff; box-shadow: 0 0 0 4px rgb(255 255 255 / 0.2); }
.home-demo-form-submit {
width: 100%;
padding-top: 1.25rem;
padding-bottom: 1.25rem;
font-size: 1.125rem;
line-height: 1.75rem;
font-weight: 900;
}
.home-demo-form-submit-icon { height: 1.25rem; width: 1.25rem; }
@media (min-width: 768px) {
.home-demo-form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@keyframes pulse {50% {opacity: .5
}
}