@charset "utf-8";

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

/*============================
#topMainVisual
============================*/

#topMainVisual .brand { display: none; }
#topMainVisual .inner { display: block; }
#topMainVisual { min-height: 0; padding: 7.875rem 0 4.125rem; }
#topMainVisual .scroll { display: none; }
#topMainVisual .bg::before { -webkit-mask-image: linear-gradient(180deg, var(--color-black) 0%, transparent 80%); mask-image: linear-gradient(180deg, var(--color-black) 0%, transparent 80%); }
#topMainVisual .bg::after { width: 120%; left: -40%; bottom: -20%; }
#topMainVisual .photo::after { background: linear-gradient(180deg, rgba(18, 26, 58, .7) 0%, rgba(18, 26, 58, .85) 55%, rgba(18, 26, 58, .95) 100%); }
#topMainVisual .photo .image { object-position: 72% center; }
#topMainVisual .en { font-size: clamp(.625rem, 2.9vw, .75rem); letter-spacing: .01em; }
#topMainVisual .lead { margin-top: 1.25rem; font-size: var(--fs-base); line-height: 1.9; }
#topMainVisual .buttons { flex-direction: column; gap: .75rem; margin-top: 1.25rem; }
#topMainVisual .md_btn { min-width: 0; width: 100%; }

/*============================
#topAbout
============================*/

#topAbout { padding: 3.75rem 0; }

/*============================
#topService
============================*/

#topService .head { grid-template-columns: 1fr; gap: 1rem; }
#topService .head .title { white-space: normal; }
#topService .head .lead { justify-self: start; padding-left: 1rem; }
#topService { padding: 5rem 0; }
#topService .list { grid-template-columns: 1fr; gap: 1.125rem; }
#topService .themes { height: auto; display: flex; flex-wrap: wrap; justify-content: center; gap: 0; }
#topService .themes .theme { position: relative; left: auto; top: auto; padding: 0 1.125rem; }
#topService .theme .name { font-size: 0.9375rem; }
#topService .theme .desc { font-size: 0.71875rem; }
#topService .theme:nth-child(1) { width: 200px; height: 200px; }
/* 支援テーマの円は、SPでは少しずつ重ねて並べる（意図した重なりのため負のmarginを使う） */
#topService .theme:nth-child(2) { width: 160px; height: 160px; margin: 2.5rem 0 0 -0.875rem; }
#topService .theme:nth-child(3) { width: 200px; height: 200px; margin: -1.625rem 0 0 1.25rem; }
#topService .theme:nth-child(4) { width: 160px; height: 160px; margin: -0.625rem 0 0 -0.625rem; }
#topService .theme:nth-child(5) { width: 170px; height: 170px; margin: -1.875rem 0 0 0; }
#topService .phase .entry::before, #topService .phase .entry::after { display: none; }
#topService .phase { grid-template-rows: none; grid-template-columns: 30px minmax(0,1fr); column-gap: 0.5rem; }
#topService .phase .entry { grid-column: 1/3; margin-bottom: 1rem; }
#topService .phase .caption { grid-row: 3; grid-column: 1/3; text-align: left; }
#topService .phase .drops { grid-row: 2; align-self: stretch; grid-template-columns: 1fr; grid-template-rows: repeat(4,1fr); height: auto; position: relative; }
#topService .phase .drops::before { content: ""; position: absolute; left: 6px; top: -10px; bottom: calc(12.5% - 1px); border-left: 2px solid var(--color-yellow); }
#topService .phase .drops .drop::before { right: 8px; top: calc(50% - 1px); bottom: auto; border-top: 2px solid var(--color-yellow); }
#topService .phase .drops .drop::after { left: auto; right: 0; bottom: auto; top: calc(50% - 6px); border: 6px solid transparent; border-left: 8px solid var(--color-yellow); border-right: 0; }
#topService .phase .steps { grid-column: 2; grid-row: 2; grid-template-columns: 1fr; margin-top: 0; }
/* フェーズの矢印形を上下でかみ合わせる（意図した重なりのため負のmarginを使う） */
#topService .phase .steps .step { margin-top: -0.5rem; clip-path: polygon(0 0,50% 12px,100% 0,100% calc(100% - 12px),50% 100%,0 calc(100% - 12px)); }
#topService .phase .steps .step:nth-child(1) { padding: 1rem 0.625rem 1.625rem; font-size: 0.9375rem; margin-top: 0; clip-path: polygon(0 0,100% 0,100% calc(100% - 12px),50% 100%,0 calc(100% - 12px)); }
#topService .phase .steps .step:not(:first-child) { padding-top: 1.375rem; }
#topService .deco .circle01 { width: 340px; right: -140px; top: -80px; }
#topService .deco .circle02 { width: 280px; left: -150px; }
#topService .deco .circle03 { width: 360px; left: calc(50% - 11.25rem); top: 46%; }
#topService .deco .circle04 { width: 70px; left: auto; right: 8%; top: 30%; }
#topService .deco .circle06, #topService .themes .tag { display: none; }
#topService .themes .tag:nth-of-type(-n + 4) { display: flex; }
#topService .more .md_btn { min-width: 0; width: 86%; }
#topService .themes .tag.tagSecurity { display: flex; position: relative; left: auto; top: auto; margin: 0.625rem; }

/*============================
#topStrength
============================*/

#topStrength .head { grid-template-columns: 1fr; gap: 1rem; }
#topStrength .head .title { white-space: normal; }
#topStrength .head .lead { justify-self: start; padding-left: 1rem; }
#topStrength .list { gap: 2rem; grid-template-columns: 1fr; }
#topStrength .card:nth-child(n) { margin-top: 0; }
#topStrength { padding: 5rem 0; padding-bottom: 3.5rem; }

/*============================
#topCases
============================*/

#topCases .slider.isStatic .track { grid-template-columns: minmax(0, 1fr); gap: 1.25rem; }
#topCases .head { grid-template-columns: 1fr; gap: 1rem; }
#topCases .head .title { white-space: normal; }
#topCases .head .lead { justify-self: start; padding-left: 1rem; }
#topCases .slider .case { flex-basis: 82vw; }
#topCases .case .body { padding: 7.5rem 1.5rem 1.75rem; }
#topCases { padding: 5rem 0; }
#topCases .slider { --pad: var(--space-md); }
#topCases .slider.isStatic { padding: 0 var(--space-md); }
#topCases .nav { display: none; }

/*============================
#topNews
============================*/

#topNews { padding: 4rem 0; }
#topNews .grid { grid-template-columns: 1fr; gap: 1.75rem; }
#topNews .item .link { grid-template-columns: auto 1fr; row-gap: 0.375rem; padding: 1rem 1.25rem; }
#topNews .title { grid-column: 1/3; }
#topNews .arrow { display: none; }

}

@media screen and (max-width: 640px) {
#topCases .case .body { padding: 1.5rem; }
#topCases .case .heading { font-size: 1.375rem; }
}