/* Responsive */

@media (max-width: 1024px) {
	.l-container,
	.site-header__inner,
	.hero__inner {
		width: min(calc(100% - 40px), var(--max));
	}

	.hero__inner,
	.whats__grid,
	.why__grid,
	.service-row,
	.card-grid {
		grid-template-columns: 1fr;
	}

	.news-list__link {
		grid-template-columns: 6.8em 6.8em minmax(0, 1fr) 1.25em;
		gap: 10px 14px;
	}

	.hero {
		min-height: 0;
	}

	.hero__concept {
		font-size: 44px;
	}

	.hero__concept-line--pc-only {
		display: none;
	}

	.hero__concept-line--sp-only {
		display: block;
	}

	.hero__visual {
		justify-content: center;
	}

	.hero__visual img {
		width: 100%;
		max-width: 100%;
		max-height: min(420px, 58vh);
	}

	.service-row--reverse {
		direction: ltr;
	}

	.section-head {
		flex-direction: column;
		align-items: flex-start;
	}

	.about-company__row {
		grid-template-columns: 1fr;
		gap: 8px;
	}

	.about-philosophy__line {
		white-space: normal;
	}
}

@media (max-width: 768px) {
	:root {
		--header-h: 68px;
	}

	body {
		font-size: 16px;
		line-height: 1.8;
	}

	.section {
		padding: 84px 0;
	}

	.news-list__link {
		grid-template-columns: auto minmax(0, 1fr) auto;
		grid-template-areas:
			"date cat arrow"
			"title title arrow";
		column-gap: 12px;
		row-gap: 8px;
		padding: 18px 0;
	}

	.news-list__date {
		grid-area: date;
	}

	.news-list__cat {
		grid-area: cat;
		justify-self: start;
	}

	.news-list__title {
		grid-area: title;
		font-size: 15px;
	}

	.news-list__arrow {
		grid-area: arrow;
		align-self: center;
	}

	.news-archive__inner {
		padding: 40px 0 72px;
	}

	.news-article__inner {
		padding: 36px 0 72px;
	}

	.news-article__content {
		font-size: 16px;
	}

	.section-heading {
		font-size: 28px;
	}

	.section-lead {
		font-size: 16px;
		margin-bottom: 40px;
	}

	.l-container,
	.site-header__inner,
	.hero__inner {
		width: calc(100% - 32px);
	}

	.nav-toggle {
		display: block;
	}

	.site-logo__image {
		width: 118px;
	}

	.site-logo--footer .site-logo__image {
		width: 128px;
	}

	.primary-nav {
		position: absolute;
		top: var(--header-h);
		right: 0;
		left: 0;
		display: none;
		padding: 16px 20px 24px;
		background: var(--color-white);
		border-bottom: 1px solid var(--color-line);
	}

	.primary-nav.is-open {
		display: block;
	}

	.primary-nav__list {
		flex-direction: column;
		align-items: flex-start;
		gap: 16px;
	}

	.hero {
		overflow: visible;
	}

	.hero__inner {
		padding: 32px 0 48px;
	}

	.hero__concept {
		font-size: clamp(25px, 6.3vw, 28px);
		line-height: 1.15;
	}

	.hero__title {
		font-size: 18px;
		margin-bottom: 28px;
	}

	.media-tabs__btn {
		padding: 9px 16px;
	}

	.whats__grid {
		gap: 68px;
	}

	.whats__item {
		padding-left: 22px;
		padding-right: 22px;
	}

	.whats__visual {
		width: 100%;
		max-width: 245px;
		margin: 0 auto 22px;
	}

	.whats__item:nth-child(2) .whats__visual {
		max-width: 255px;
	}

	.whats .section-heading {
		margin-bottom: 4px;
		font-size: 31px;
		line-height: 1.38;
	}

	.whats__subcopy {
		font-size: clamp(19px, 5.2vw, 23px);
		font-weight: 700;
		line-height: 1.35;
	}

	.whats__subcopy .subcopy-phrase {
		margin-left: 0;
		padding-left: 0;
	}

	.whats__title {
		font-size: 24px;
		margin-bottom: 18px;
	}

	.why-card {
		padding: 56px 28px 36px;
	}

	.why-card__head {
		margin-bottom: 14px;
	}

	.why-card p.why-card__num,
	.why-card__num {
		left: -2px;
		font-size: 56px;
	}

	.why-card:nth-child(1) p.why-card__num,
	.why-card:nth-child(1) .why-card__num {
		top: -22px;
	}

	.why-card:nth-child(2) p.why-card__num,
	.why-card:nth-child(2) .why-card__num,
	.why-card:nth-child(3) p.why-card__num,
	.why-card:nth-child(3) .why-card__num {
		top: -26px;
	}

	.why-card h3 {
		font-size: 24px;
	}

	.network__stat {
		font-size: 72px;
	}

	.network__stat-unit {
		vertical-align: 12px;
	}

	.basys-global-map {
		max-height: 320px;
	}

	.service-row {
		gap: 24px;
		margin-bottom: 64px;
	}

	.service-row__name {
		font-size: 24px;
	}

	.service-row__name--basys-hotels {
		font-size: clamp(18px, 5.2vw, 24px);
		padding: 10px 16px;
		white-space: nowrap;
	}

	.service-row h3,
	.service-row h2 {
		font-size: 24px;
	}

	.cta-block {
		padding: 88px 0;
	}

	.cta-block__title {
		font-size: 24px;
	}

	.about-page .section-label {
		margin-bottom: 18px;
		font-size: 13px;
		letter-spacing: 0.18em;
	}

	.about-page .section-heading {
		margin-bottom: 28px;
		font-size: 28px;
	}

	.about-page .section-lead {
		margin-bottom: 40px;
		font-size: 16px;
	}

	.about-page .about-hero {
		padding-top: 18px;
		padding-bottom: 16px;
	}

	.about-hero__title {
		font-size: 18px;
		letter-spacing: 0.08em;
	}

	.page-hero {
		padding: 18px 0 16px;
	}

	.page-hero__label {
		font-size: 18px;
		letter-spacing: 0.08em;
	}

	.site-logo--media .basys-media-mark__basys,
	.site-logo--media .basys-media-mark__label {
		font-size: 20px;
		letter-spacing: 0.03em;
	}

	.about-page .about-approach.section,
	.about-page .about-company.section,
	.about-philosophy {
		padding-top: 84px;
		padding-bottom: 84px;
	}

	.about-approach__en {
		font-size: 12px;
		letter-spacing: 0.12em;
	}

	.about-page .about-approach__card.why-card {
		padding: 60px 24px 36px;
	}

	.about-page .about-approach__card .why-card__num {
		font-size: 64px;
	}

	.about-page .about-approach__card h3 {
		font-size: 22px;
	}

	.about-approach__more {
		margin-top: 40px;
		text-align: center;
	}

	.about-philosophy__english {
		gap: 4px;
		margin-bottom: 24px;
		font-size: clamp(26px, 7.2vw, 32px);
	}

	.about-philosophy__catch {
		margin-bottom: 32px;
		font-size: 22px;
	}

	.about-philosophy__body p {
		margin: 0;
		font-size: 16px;
		line-height: 1.7;
	}

	.about-philosophy__closing {
		margin-top: 24px !important;
	}

	.about-company__row {
		padding: 22px 0;
	}

	.about-company__row dt {
		font-size: 15px;
	}

	.about-company__row dd {
		font-size: 16px;
	}

	.about-page .about-cta.cta-block {
		padding: 84px 0;
		text-align: center;
	}

	.about-page .about-cta .cta-block__title {
		font-size: 26px;
	}

	.about-page .about-cta p {
		font-size: 16px;
	}

	.site-footer .l-container {
		width: calc(100% - 48px);
	}

	.site-footer__inner {
		flex-direction: column;
		align-items: flex-start;
		padding-top: 40px;
		padding-bottom: 36px;
		gap: 32px;
	}

	.site-footer__list {
		display: flex;
		flex-wrap: nowrap;
		justify-content: flex-start;
		align-items: center;
		width: 100%;
		row-gap: 0;
		column-gap: 12px;
	}

	.site-footer__list a {
		font-size: 13px;
		letter-spacing: 0.01em;
		white-space: nowrap;
	}

	.site-footer__bottom-inner {
		flex-direction: row;
		flex-wrap: nowrap;
		align-items: center;
		justify-content: space-between;
		gap: 12px;
		padding-top: 24px;
		padding-bottom: 28px;
	}

	.site-footer__legal {
		flex: 0 1 auto;
		min-width: 0;
		gap: 0;
	}

	.site-footer__legal a,
	.site-footer__copy {
		font-size: 12px;
		white-space: nowrap;
	}

	.site-footer__copy {
		flex: 0 0 auto;
		margin: 0;
	}

	.case-card__image img,
	.case-card__image .media-placeholder {
		height: 220px;
	}
}