/*
 * SP(スマホ)レイアウト。幅375pxのデザインを基準に、横幅は可変。
 * PC用CSSを上書きするため、他のCSSより後に読み込む。
 */
@media (max-width: 767px) {

	.u-sp { display: inline; }
	.u-pc { display: none; }

	html.is-menu-open { overflow: hidden; }

	/* 横にはみ出す要素でレイアウトビューポートが広がらないようにする */
	html, body { max-width: 100%; overflow-x: hidden; }
	body { background-position: 0 0; }

	/* ---------- ヘッダー / ハンバーガーメニュー ---------- */
	.site-header__inner {
		max-width: none;
		height: 60px;
		padding: 0;
	}
	.site-header__logo { top: 15px; left: 20px; }
	.site-header__logo img { width: 168px; height: auto; }
	.site-header__logo span {
		margin-top: 3px;
		padding-left: 13px;
		font-size: 9px;
		letter-spacing: .02em;
	}

	.site-header__toggle {
		position: absolute;
		top: 0;
		right: 0;
		z-index: 2;
		display: block;
		width: 60px;
		height: 60px;
		padding: 0;
		border: 0;
		background: var(--color-blue);
		cursor: pointer;
	}
	.site-header__toggle span,
	.site-header__toggle span::before,
	.site-header__toggle span::after {
		position: absolute;
		left: 16px;
		width: 28px;
		height: 1.5px;
		background: #fff;
		transition: transform .3s ease, background-color .3s ease;
	}
	.site-header__toggle span { top: 30px; }
	.site-header__toggle span::before { content: ""; left: 0; top: -9px; }
	.site-header__toggle span::after  { content: ""; left: 0; top: 9px; }
	.is-open .site-header__toggle span { background: transparent; }
	.is-open .site-header__toggle span::before { transform: translateY(9px) rotate(45deg); }
	.is-open .site-header__toggle span::after  { transform: translateY(-9px) rotate(-45deg); }

	/* 開いたメニュー(全画面) */
	.site-header.is-open {
		position: fixed;
		inset: 0;
		z-index: 100;
		overflow-y: auto;
		background: #030a14;
	}
	.site-header.is-open .site-header__inner { height: auto; padding-top: 60px; }
	.is-open .site-header__menu { border-top: 1px solid #fff; }

	.site-header__menu {
		display: none;
		flex-direction: column;
		padding-bottom: 40px;
	}
	.is-open .site-header__menu { display: flex; }

	.site-header__nav {
		position: static;
		order: 1;
	}
	.site-header__nav ul { display: block; }
	.site-header__nav li { border-bottom: 1px solid #fff; }
	.site-header__nav a {
		display: block;
		padding: 0 20px;
		font-size: 15px;
		letter-spacing: .1em;
		line-height: 76px;
	}

	.site-header__cta {
		position: static;
		order: 2;
		flex-direction: column;
		gap: 10px;
		margin-top: 31px;
		padding: 0 20px;
	}
	.btn-outline {
		width: 100%;
		height: 50px;
		padding: 0;
		border-color: #b5b5b5;
		border-radius: 6px;
		background-color: transparent;
		font-size: 14px;
	}
	.btn-outline--line { border-color: var(--color-line); }
	.btn-outline::after,
	.btn-outline:hover::after {
		position: static;
		margin-left: 6px;
		transform: rotate(45deg);
	}
	.btn-outline:hover::after { transform: translateX(4px) rotate(45deg); }

	/* ---------- HERO ---------- */
	.hero {
		height: 667px;
		background: var(--hero-bg) 50% 0 / cover no-repeat;
	}
	.hero::before {
		background: linear-gradient(rgba(5, 11, 24, .75), rgba(5, 11, 24, .75));
	}
	.hero__label {
		top: 145px;
		left: 20px;
		display: flex;
		align-items: center;
		justify-content: center;
		width: calc(100% - 40px);
		height: 58px;
		padding: 0;
		border-radius: 29px;
		font-size: 13px;
		letter-spacing: .05em;
		line-height: 23px;
		transform: none;
		white-space: normal;
	}
	.hero__title {
		margin-top: 0;
		top: 211px;
		font-size: 41px;
		letter-spacing: 0;
		line-height: 57px;
	}
	.hero__lead {
		top: 338px;
		padding: 0;
		font-size: 14.5px;
		line-height: 28.5px;
		letter-spacing: 0;
	}
	.hero__tags {
		top: 401px;
		font-size: 12px;
		letter-spacing: 0;
	}
	.hero__tags span {
		min-width: 68px;
		margin-right: 5px;
		padding: 0 10px;
		font-size: 11px;
		line-height: 22px;
	}
	.hero__cta {
		top: 570px;
		width: 300px;
		max-width: calc(100% - 40px);
	}
	.hero__cta-badge {
		width: 251px;
		padding: 4px 0;
		font-size: 13px;
		line-height: 24px;
	}

	/* ---------- PROBLEMS ---------- */
	.problems { padding: 24px 18px 0; }
	.problems__inner { max-width: none; }
	.problems__man { top: 58px; }
	.problems__man--left  { left: 19px; width: 51px; }
	.problems__man--right { top: 56px; right: 12px; left: auto; width: 62px; }
	.problems__title {
		width: 212px;
		margin: 8px auto 0;
		font-size: 23px;
		letter-spacing: .12em;
		line-height: 35px;
	}
	.problems__list {
		grid-template-columns: 1fr;
		gap: 12px;
		margin-top: 38px;
	}
	.problems__item { font-size: 17px; }

	/* ---------- ABOUT ---------- */
	.about { padding: 36px 0 40px; }
	.about__lead {
		height: auto;
		padding: 0 20px;
		font-size: 22px;
		letter-spacing: .1em;
		line-height: 35px;
	}
	.about__lead::before,
	.about__lead::after { top: 50%; width: 40px; }

	.about__main {
		width: auto;
		height: auto;
		margin: 38px 0 0;
		padding-bottom: 26px;
	}
	.about__panel {
		top: 145px;
		right: 0;
		bottom: 0;
		left: 20px;
		width: auto;
		height: auto;
	}
	.about__photo {
		position: relative;
		display: block;
		width: calc(100% - 20px);
		height: 245px;
	}
	.about__catch {
		position: relative;
		top: auto;
		left: auto;
		display: block;
		width: fit-content;
		max-width: calc(100% - 40px);
		margin-left: 40px;
		padding: 0 20px;
		font-size: 22px;
		letter-spacing: .05em;
		line-height: 57px;
		white-space: normal;
	}
	.about__catch--1 { min-height: 57px; margin-top: -41px; }
	.about__catch--2 { min-height: 57px; margin-top: 6px; }

	.about__body {
		position: relative;
		top: auto;
		left: auto;
		width: calc(100% - 60px);
		height: auto;
		margin: 6px 0 0 40px;
		padding: 8px 20px 28px;
	}
	.about__body p {
		font-size: 15px;
		line-height: 29.5px;
		letter-spacing: .06em;
	}
	.about__btn {
		position: static;
		width: 240px;
		margin: 30px 0 0 calc(50% - 130px);
	}

	.about__change {
		gap: 8px;
		margin-top: 40px;
		padding: 0 8px;
		font-size: 15px;
		text-align: center;
	}
	.about__change img { width: 12px; height: auto; }
	.about__benefit {
		width: calc(100% - 40px);
		height: 200px;
		padding: 0 16px;
		font-size: 16px;
		text-align: center;
	}

	/* ---------- BENEFIT ---------- */
	.benefit { padding: 40px 20px 60px; }
	.benefit__inner { width: auto; }
	.benefit__title { font-size: 26px; }
	.benefit__lead { font-size: 14px; line-height: 1.9; }
	.benefit__compare { flex-direction: column; margin-top: 20px; }
	.benefit__figure { width: 100%; }
	.benefit__figure img { width: 100%; height: auto; aspect-ratio: 3 / 2; }
	.benefit__figure figcaption { font-size: 12px; }
	.benefit__arrow {
		position: static;
		margin: 16px auto;
		border-width: 22px 15px 0 15px;
		border-color: var(--color-blue) transparent transparent transparent;
	}
	.benefit__movie { margin-top: 48px; }
	.benefit__video { width: 100%; height: auto; aspect-ratio: 16 / 9; }
	.benefit__play { width: 64px; height: 64px; }
	.benefit__play::after { border-width: 14px 0 14px 24px; }

	/* ---------- REASON ---------- */
	.reason { padding: 40px 0; }
	.reason__panel { top: 160px; bottom: 60px; width: 85%; height: auto; }
	.reason__inner { width: auto; padding: 0 20px; }
	.reason__title { font-size: 21px; letter-spacing: .06em; }
	.reason__list { grid-template-columns: 1fr; gap: 20px; margin-top: 28px; }
	.reason__item { height: auto; padding: 15px 15px 20px; }
	.reason__item img { width: 100%; height: auto; aspect-ratio: 310 / 170; }
	.reason__item h3 { font-size: 17px; line-height: 28px; }
	.reason__item p { font-size: 14px; }

	/* ---------- SERVICE ---------- */
	.service { padding: 40px 0; }
	.service__title { font-size: 22px; letter-spacing: .06em; }
	.service__list { width: auto; margin-top: 32px; }
	.service__item { display: block; height: auto; }
	.service__photo { width: 100%; height: auto; aspect-ratio: 620 / 370; }
	.service__text,
	.service__item:nth-child(even) .service__text { padding: 24px 20px 32px; }
	.service__num { font-size: 56px; line-height: 56px; }
	.service__text h3 { margin-top: 12px; font-size: 22px; line-height: 32px; }
	.service__text p { font-size: 14px; }
	.service__text > .service__btn,
	.service__item:nth-child(even) .service__btn {
		position: relative;
		top: auto;
		left: auto;
		margin-top: 24px;
	}

	/* ---------- PRICE ---------- */
	.price { height: auto; margin-bottom: 40px; padding: 40px 20px; }
	.price__inner { width: auto; height: auto; }
	.price__head { position: static; }
	.price__title { font-size: 28px; }
	.price__box {
		position: static;
		width: auto;
		height: auto;
		margin-top: 24px;
		padding: 24px 20px;
	}
	.price__box h3 { font-size: 19px; line-height: 30px; }
	.price__box p { margin-top: 16px; font-size: 14px; line-height: 1.9; }

	/* ---------- CASE ---------- */
	.case { height: auto; padding-bottom: 40px; }
	.case__panel { top: 150px; right: 0; bottom: 0; left: 20px; height: auto; }
	.case__title { font-size: 26px; }
	.case__list { margin-left: 20px; gap: 16px; }
	.case__item { flex-basis: 240px; }
	.case__item img,
	.case__noimage { width: 240px; height: 196px; }
	.case__item h3 { font-size: 16px; }
	.case__item p { font-size: 13px; }
	.case__btn {
		position: relative;
		top: auto;
		left: auto;
		margin: 28px auto 0;
	}

	/* ---------- FAQ ---------- */
	.faq { height: auto; padding: 20px; }
	.faq__banner { width: auto; height: auto; padding: 36px 0 40px; }
	.faq__en { padding-top: 0; }
	.faq__title { font-size: 26px; }
	.faq__btn { margin-top: 24px; }

	/* ---------- NEWS ---------- */
	.news { height: auto; padding: 40px 20px; }
	.news__inner { display: flex; flex-direction: column; width: auto; height: auto; }
	.news__head { display: contents; }
	.news__title { font-size: 28px; }
	.news__list { position: static; order: 2; width: 100%; margin-top: 24px; }
	.news__btn { position: static; order: 3; margin: 28px auto 0; }
	.news__list a {
		flex-direction: column;
		align-items: flex-start;
		gap: 4px;
		height: auto;
		padding: 16px 36px 16px 0;
	}
	.news__list time { flex-basis: auto; }
	.news__list span { white-space: normal; }

	/* ---------- COLUMN ---------- */
	.column { width: auto; height: auto; padding: 40px 20px 50px; }
	.column__en,
	.column__title,
	.column__list,
	.column__btn { position: static; }
	.column__title { margin-top: 8px; font-size: 28px; }
	.column__list { flex-direction: column; gap: 24px; margin-top: 24px; }
	.column__list li { width: 100%; }
	.column__list img { width: 100%; height: auto; aspect-ratio: 340 / 200; }
	.column__btn { margin: 32px auto 0; }

	/* ---------- RECRUIT ---------- */
	.recruit { height: auto; padding: 40px 20px; }
	.recruit__inner { display: flex; flex-direction: column; width: auto; height: auto; }
	.recruit__head { position: static; width: auto; }
	.recruit__title { font-size: 28px; }
	.recruit__photo {
		position: static;
		width: 100%;
		height: auto;
		margin-top: 28px;
		aspect-ratio: 860 / 320;
	}

	/* ---------- FOOTER ---------- */
	.site-footer {
		height: auto;
		background: linear-gradient(to bottom, transparent 160px, #101724 160px);
	}
	.site-footer__panel { display: none; }
	.site-footer__inner { width: auto; height: auto; padding: 28px 20px 24px; }
	.site-footer__area,
	.site-footer__boxes,
	.site-footer__company,
	.site-footer__nav,
	.site-footer__cta,
	.site-footer__copy { position: static; }
	.site-footer__area { width: auto; height: auto; padding: 28px 16px 24px; }
	.site-footer__lead { padding: 0; font-size: 18px; letter-spacing: .02em; }
	.site-footer__boxes { flex-direction: column; gap: 12px; margin-top: 20px; }
	.site-footer__box { width: 100%; height: auto; padding: 16px 12px 16px 68px; font-size: 15px; line-height: 26px; }
	.site-footer__box::before { top: 50%; left: 20px; width: 30px; height: 30px; margin-top: -15px; }
	.site-footer__company { margin-top: 36px; }
	.site-footer__company img { width: 190px; height: auto; }
	.site-footer__nav { width: auto; margin-top: 28px; }
	.site-footer__nav ul { gap: 4px 28px; }
	.site-footer__cta { flex-direction: column; margin-top: 28px; }
	.site-footer__cta .btn-outline { width: 100%; }
	.site-footer__copy { display: block; width: auto; margin-top: 32px; }
}