@charset "utf-8";

@media screen and (max-width: 640px) {

/*============================
#businessMainVisual
============================*/

#businessMainVisual { --gutter: 1rem; padding-top: var(--space-lg); }
#businessMainVisual::before { width: 70%; height: 50%; }
#businessMainVisual .grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); margin-top: var(--space-xl); padding-bottom: 2.5rem; }
#businessMainVisual .en { font-size: clamp(3rem, 2rem + 6vw, 4.5rem); }
#businessMainVisual .title { margin-top: 1.25rem; letter-spacing: .1em; }
#businessMainVisual .catch { font-size: var(--fs-base); }
#businessMainVisual .lead { font-size: var(--fs-md); }
#businessMainVisual .visual { height: 14rem; }

/*============================
#businessNeeds
============================*/

#businessNeeds .list { grid-template-columns: minmax(0, 1fr); }
#businessNeeds .card { padding: 1.75rem var(--space-lg) var(--space-lg); }
#businessNeeds .answer { margin-top: 3.5rem; padding: 2.5rem 1.25rem var(--space-xl); }

/*============================
#businessComparison
============================*/

#businessComparison .board { grid-template-columns: minmax(0, 1fr); }
#businessComparison .arrow { height: 3.5rem; transform: rotate(90deg); }
#businessComparison .list { padding: var(--space-xs) 1.25rem; }
#businessComparison .item { grid-template-columns: 2.75rem minmax(0, 1fr); gap: var(--space-md); padding: 1.25rem 0; }
#businessComparison .symbol { width: 2.75rem; height: 2.75rem; }

/*============================
#businessFeatures
============================*/

#businessFeatures .list { grid-template-columns: minmax(0, 1fr); gap: var(--space-md); }
#businessFeatures .card { padding: 1.125rem 1.25rem; }

/*============================
#businessProcess
============================*/

#businessProcess .overview { grid-template-columns: minmax(0, 1fr); gap: 2rem; }
#businessProcess .text { font-size: var(--fs-base); line-height: 2.1; }
#businessProcess .cycle { width: min(100%, 19rem); }
#businessProcess .node { width: 5.25rem; height: 5.25rem; font-size: var(--fs-xxs); }
#businessProcess .core { font-size: var(--fs-md); }
#businessProcess .nodeSymbol .icon { width: 1.25rem; height: 1.25rem; }
#businessProcess .chart { grid-template-columns: minmax(0, 1fr); margin-top: 2rem; }
#businessProcess .step { flex-direction: row; padding: .75rem var(--space-md); }
#businessProcess .stepLabel { text-align: left; }
#businessProcess .arrow { margin: .5rem auto; transform: rotate(135deg); }
#businessProcess .themes { grid-template-columns: var(--space-md) minmax(0, 1fr) var(--space-md); padding: 0 0 var(--space-md); }
#businessProcess .themeList { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .375rem; }
#businessProcess .theme { grid-template-columns: minmax(0, 1fr); justify-items: start; gap: .375rem; padding: .625rem; }
#businessProcess .themeSymbol, #businessProcess .plus { width: 2rem; height: 2rem; }
#businessProcess .themeName { font-size: var(--fs-sm); }
#businessProcess .themesDesign { font-size: var(--fs-md); }

/*============================
#businessFlow
============================*/

#businessFlow .list { grid-template-columns: minmax(0, 1fr); gap: var(--space-lg); }
#businessFlow .item:not(:last-child)::after { top: auto; right: auto; bottom: -1rem; left: 50%; transform: translateX(-50%) rotate(135deg); }

/*============================
#businessExamples
============================*/

#businessExamples .list { grid-template-columns: minmax(0, 1fr); gap: 1.25rem; }
#businessExamples .card { padding: var(--space-lg) 1.25rem; }
#businessExamples .num { font-size: 2.25rem; }
#businessExamples .title { font-size: var(--fs-lg); }
#businessExamples .other { justify-content: flex-start; }
#businessExamples .docLink { text-align: left; }

/*============================
#businessContract
============================*/

#businessContract .list { grid-template-columns: minmax(0, 1fr); gap: 1.25rem; }
#businessContract .head { font-size: var(--fs-base); }
#businessContract .lead { padding: 0 1.25rem; font-size: var(--fs-base); }
#businessContract .note { margin: 1.25rem 1.25rem 0; font-size: var(--fs-md); }

/*============================
#businessDocument
============================*/

#businessDocument .box { grid-template-columns: minmax(0, 1fr); gap: 2rem; padding: 2.25rem 1.25rem; border-radius: 1rem; }
#businessDocument .text { font-size: var(--fs-md); }
#businessDocument .md_btn { width: 100%; min-width: 0; }
#businessDocument .sub { padding: 1.25rem; }

/*============================
#businessFaq
============================*/

#businessFaq .question { grid-template-columns: 2rem minmax(0, 1fr) .875rem; gap: var(--space-sm); padding: var(--space-md); font-size: var(--fs-base); }
#businessFaq .qMark { width: 2rem; height: 2rem; font-size: var(--fs-sm); }
#businessFaq .answer { grid-template-columns: 2rem minmax(0, 1fr); gap: var(--space-sm); padding: 0 var(--space-md) var(--space-md); }
#businessFaq .text { padding-top: .2rem; font-size: var(--fs-md); }

}