﻿/* Temporary responsive bridge until dedicated SP design is merged. */
		@media (max-width: 768px) {
			:root {
				--section-gap: 40px;
				--block-gap: 28px;
				--title-content-gap: 32px;
			}

			.page {
				border-left: 0;
				border-right: 0;
			}

			body.menu-open {
				overflow: hidden;
			}

			.header {
				background: rgba(255, 255, 255, 0.96);
			}

			.header-inner {
				padding: 8px 12px;
				gap: 10px;
			}

			.logo img {
				height: 36px;
			}

			.header-menu-toggle {
				display: inline-flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				width: 52px;
				min-height: 52px;
				padding: 0;
				margin-left: auto;
				background: transparent;
				border: 0;
				cursor: pointer;
				flex: 0 0 52px;
				gap: 0;
			}

			.header-menu-toggle-label,
			.header-menu-close-label {
				display: block;
				font-size: 12px;
				font-weight: 500;
				line-height: 1;
				letter-spacing: 0.04em;
				color: #6b5a37;
				text-align: center;
				margin-bottom: 0;
				white-space: nowrap;
			}

			.header-menu-toggle img,
			.header-menu-close img {
				display: block;
				width: 40px;
				height: 40px;
			}

			.header-menu-overlay {
				display: block;
				position: fixed;
				inset: 0;
				z-index: 80;
				background: #f8f4e9;
				opacity: 0;
				visibility: hidden;
				pointer-events: none;
				transition: opacity 0.24s ease, visibility 0.24s ease;
			}

			.header-menu-overlay.is-open {
				opacity: 1;
				visibility: visible;
				pointer-events: auto;
			}

			.header-menu-panel {
				min-height: 100vh;
				display: flex;
				flex-direction: column;
			}

			.header-menu-head {
				display: flex;
				align-items: flex-start;
				justify-content: space-between;
				padding: 8px 12px 0;
			}

			.header-menu-logo img {
				height: 54px;
				width: auto;
			}

			.header-menu-close {
				display: inline-flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				width: 52px;
				min-height: 52px;
				padding: 0;
				background: transparent;
				border: 0;
				cursor: pointer;
				flex: 0 0 52px;
				gap: 0;
			}

			.header-menu-nav {
				display: flex;
				flex-direction: column;
				align-items: center;
				gap: 42px;
				padding: 118px 24px 0;
			}

			.header-menu-nav a {
				font-size: 18px;
				font-weight: 500;
				line-height: 1.45;
				letter-spacing: 0.04em;
				color: #6b5a37;
				text-align: center;
			}

			.header-menu-actions {
				display: flex;
				justify-content: center;
				padding: 78px 24px 0;
			}

			.header-menu-contact {
				display: inline-flex;
				align-items: center;
				justify-content: center;
				min-width: 251px;
				min-height: 44px;
				padding: 10px 24px;
				border-radius: 999px;
				background: #2e896b;
				color: #ffffff;
				font-size: 18px;
				font-weight: 700;
				line-height: 1.35;
				letter-spacing: 0.04em;
			}

			.header-menu-bottom {
				margin-top: auto;
				padding: 0;
			}

			.header-menu-facility-link {
				display: flex;
				align-items: center;
				justify-content: center;
				width: 100%;
				min-height: 62px;
				padding: 16px 20px;
				background: #ff8d26;
				color: #ffffff;
				font-size: 15px;
				font-weight: 700;
				line-height: 1.4;
				letter-spacing: 0.04em;
			}

			.header-links .header-cta-link img {
				width: min(62vw, 260px);
				height: auto;
			}

			.header-links {
				display: none;
			}

			.header-scroll-links {
				display: none;
			}

			.hero-label {
				width: 222px;
				height: 60px;
			}

			.section {
				padding: 12px 0;
			}

			.section.solution-section,
			.section.example-section,
			.section.voice-section,
			.section.why-brainco-section,
			.section.how_to_use-section,
			.section.plan-section,
			.section.faq-section {
				height: auto;
				min-height: 0;
			}

			.overview-section,
			.kadai-section,
			.dekirukoto-wrap,
			.senmonka-block,
			.program-block,
			.kpi-block,
			.how_to_use-section,
			.plan-section,
			.comparison-section,
			.step-section,
			.qa,
			.program-carousel,
			.program-viewport,
			.comparison-table-wrap {
				width: 100%;
				max-width: 100%;
			}

			.overview-section,
			.kadai-section,
			.dekirukoto-wrap,
			.senmonka-block,
			.program-block,
			.how_to_use-section,
			.plan-section,
			.comparison-section,
			.step-section,
			.faq-section {
				padding-left: 16px;
				padding-right: 16px;
			}

			.overview-card {
				padding: 28px 16px;
				min-height: auto;
				background-size: 100% 100%;
			}

			.overview-heading {
				font-size: 22px;
				line-height: 1.55;
			}

			.overview-description {
				font-size: 14px;
			}

			.sp-breadcrumb {
				padding-left: 16px;
				padding-right: 16px;
			}

			.kadai-title {
				display: grid;
				grid-template-columns: 24px 1fr;
				align-items: center;
				gap: 10px;
				max-width: 328px;
				margin: 80px auto 0;
				font-size: 32px;
				line-height: 1.25;
			}

			.kadai-mark {
				margin-right: 0;
				width: 24px;
				height: 48px;
				align-self: center;
			}

			.kadai-title-copy {
				display: block;
				text-align: center;
			}

			.kadai-title-break {
				display: block;
			}

			.kadai-brand {
				font-size: 32px;
				line-height: 1.1;
			}

			.kadai-title-particle,
			.kadai-title-line {
				font-size: 32px;
				line-height: 1.2;
			}

			.kadai-kana {
				font-size: 15px;
				margin-bottom: -2px;
			}

			.sp-title-break {
				display: block;
			}

			.example-title,
			.achievement-title,
			.step-section-title,
			.contact-title {
				font-size: 32px;
				line-height: 1.25;
				text-align: center;
				justify-content: center;
			}

			.example-title,
			.step-section-title,
			.contact-title {
				max-width: 328px;
				margin-left: auto;
				margin-right: auto;
			}

			.example-title,
			.step-section-title {
				align-items: center;
			}

			.example-title-mark,
			.step-section-title-mark {
				align-self: center;
			}

			.kadai-grid-top {
				grid-template-columns: 1fr;
			}

			.kadai-grid-bottom {
				display: grid;
				grid-template-columns: 1fr;
				overflow: visible;
				justify-content: center;
				gap: 12px;
				padding-bottom: 0;
			}

			.kadai-solution-card {
				width: 100%;
				max-width: 384px;
				flex: none;
				margin: 0 auto;
			}

			.kadai-summary {
				margin-top: 48px;
			}

			.kadai-grid-bottom {
				margin-top: 20px;
			}

			.example-feature-title {
				font-size: 22px;
			}

			.example-feature {
				grid-template-columns: 1fr;
				gap: 12px;
			}

			.example-feature.is-reverse .example-feature-image {
				order: 1;
			}

			.example-feature.is-reverse .example-feature-text {
				order: 2;
			}

			.example-feature-image {
				max-width: 100%;
			}

			.example-feature-description {
				margin-top: 20px;
				padding: 14px;
				font-size: 15px;
			}

			.achievement-section {
				padding-left: 16px;
				padding-right: 16px;
			}

			.achievement-title {
				font-size: 34px;
				gap: 8px;
			}



			.achievement-subtitle,
			.achievement-rate-title {
				font-size: 24px;
				line-height: 1.4;
				padding: 0 20px;
				margin-top: 34px;
			}

			.achievement-rate-title {
				margin-top: 0;
			}

			.achievement-subtitle::before,
			.achievement-subtitle::after,
			.achievement-rate-title::before,
			.achievement-rate-title::after {
				width: 28px;
				height: 2px;
			}

			.achievement-subtitle::before,
			.achievement-rate-title::before {
				left: -8px;
			}

			.achievement-subtitle::after,
			.achievement-rate-title::after {
				right: -8px;
			}

			.achievement-cards {
				grid-template-columns: 1fr;
				gap: 14px;
				margin-top: 24px;
			}

			.achievement-cards-left {
				grid-template-columns: repeat(2, minmax(0, 1fr));
				grid-template-rows: auto auto;
				gap: 14px;
			}

			.achievement-card,
			.achievement-card-large {
				min-height: 0;
				padding: 18px;
				border-radius: 14px;
			}

			.achievement-card-wide {
				grid-column: 1 / 3;
			}

			.achievement-label,
			.achievement-rate-label {
				font-size: 18px;
			}

			.achievement-value-main {
				font-size: 62px;
			}

			.achievement-value-unit {
				font-size: 28px;
			}

			.achievement-rate-main {
				font-size: 72px;
			}

			.achievement-rate-unit {
				font-size: 42px;
			}

			.achievement-rate {
				margin-top: 72px;
			}

			.achievement-rate-bars {
				gap: 16px;
				margin-top: 28px;
			}

			.achievement-rate-row {
				grid-template-columns: minmax(96px, 34%) 1fr;
				gap: 12px;
			}

			.achievement-rate-row-label {
				font-size: 16px;
				text-align: center;
			}

			.achievement-rate-bar {
				height: 44px;
			}

			.achievement-rate-bar-value {
				font-size: 22px;
				right: 12px;
			}

			.senmonka-cards {
				width: 100%;
				grid-template-columns: 1fr;
				gap: 14px;
				margin-top: 24px;
			}

			.senmonka-card {
				width: 100%;
				max-width: 580px;
				margin: 0 auto;
			}

			.program-track {
				margin-top: 24px;
				gap: 12px;
			}

			.program-carousel {
				padding-inline: 0;
			}

			.program-card {
				width: 78vw;
				max-width: 320px;
				flex: 0 0 78vw;
			}

			.program-card img {
				width: 100%;
			}

			.voice-card-link {
				right: 10px;
				bottom: 10px;
			}

			.voice-card-link img {
				width: 140px;
				height: auto;
			}

			.program-nav {
				display: none;
			}

			.kpi-slide {
				width: 72vw;
				flex: 0 0 72vw;
			}

			.kpi-slide img {
				width: 100%;
			}

			.how_to_use-step {
				margin-top: 28px;
			}

			.how_to_use-step img,
			.step-section-image img {
				width: 100%;
				height: auto;
			}

			.step-section-stack {
				gap: 32px;
			}

			.step-section-button img {
				width: min(84vw, 360px);
				height: auto;
			}

			.step-section-image picture {
				display: block;
				width: min(100%, 328px);
				margin: 0 auto;
			}

			.plan-stack > p {
				margin: 12px 0 24px;
				padding: 0 8px;
				text-align: center;
				font-size: 14px;
				line-height: 1.6;
			}

			.plan-cards {
				flex-direction: column;
				align-items: center;
				gap: 16px;
			}

			.plan-cards .plan-card {
				width: 100% !important;
				max-width: 464px;
			}

			.price-note-box {
				width: 100%;
				min-height: 0;
				padding: 12px 14px;
				margin: 16px 0 40px;
			}

			.price-note-title {
				font-size: 16px;
			}

			.price-note-item {
				font-size: 14px;
			}

			.comparison-title img {
				width: min(100%, 420px);
				height: auto;
			}

			.comparison-description {
				margin-bottom: 18px;
				font-size: 14px;
				text-align: left;
			}

			.comparison-table-wrap {
				height: auto;
				overflow-x: auto;
				-webkit-overflow-scrolling: touch;
			}

			.comparison-table {
				width: 100%;
				height: auto;
			}

			.comparison-table tr {
				height: auto;
			}

			.comparison-table th,
			.comparison-table td {
				padding: 10px 8px;
			}

			.qa {
				gap: 14px;
			}

			.qa-q {
				font-size: 16px;
				padding: 10px 12px;
			}

			.qa-a {
				font-size: 14px;
			}

			.contact-form-block {
				width: 100%;
				min-height: 0;
				border-radius: 14px;
				padding: 24px 12px;
			}

			.contact-form {
				max-width: 100%;
			}

			.contact-textfield,
			.contact-textarea {
				width: 100%;
			}
		}

			.contact-privacy {
				font-size: 14px;
				align-items: flex-start;
			}

			.footer {
				margin-top: 88px;
				padding: 18px 12px;
			}

			.footer-logo {
				width: 190px;
			}

			.footer-links {
				flex-direction: column;
				align-items: center;
				justify-content: center;
				gap: 18px;
				flex-wrap: nowrap;
				font-size: 14px;
			}
		}
