:root {
	--am-blue: #006db2;
	--am-text: #454545;
}

.am-page,
.am-page :where(div, section, article, aside, header, nav, span, p, h1, h2, h3, ul, li, a, img, details, summary) {
	box-sizing: border-box;
}

.am-page {
	width: 100%;
	min-height: 100vh;
	overflow: clip;
	background: #fff;
	color: var(--am-text);
	font-family: "Zen Old Mincho", "Yu Mincho", YuMincho, serif;
}

.am-page :where(h1, h2, h3, p) { margin: 0; }
.am-page a { color: inherit; text-decoration: none; }
.am-page img { display: block; }

.am-stage { position: relative; overflow: clip; }
.am-stage--pc { display: block; width: 1440px; height: 9265px; margin-inline: auto; }
.am-artboard { position: absolute; inset: 0 auto auto 0; margin: 0; overflow: hidden; transform-origin: top left; background: #fff; }
.am-artboard--pc { width: 1440px; height: 9265px; }
.am-stage--sp { display: none; }
.am-artboard--sp { width: 375px; height: 9978px; }

.am-bg { position: absolute; left: -297px; top: -1px; width: 2034px; height: 1271px; pointer-events: none; }
.am-breadcrumb { position: absolute; right: 80px; top: 432px; z-index: 8; display: flex; align-items: center; gap: 14px; height: 23px; color: var(--am-blue); font-size: 16px; font-weight: 700; line-height: 23px; white-space: nowrap; }
.am-breadcrumb img { width: 8px; height: 12px; }
.am-header { position: absolute; inset: 0; z-index: 10; }
.am-header__panel { position: absolute; left: 308px; top: 14px; width: 1052px; height: 63px; border-radius: 40px; background: rgb(255 255 255 / 85%); box-shadow: 0 1px 4px rgb(0 0 0 / 25%); -webkit-backdrop-filter: blur(6.6px); backdrop-filter: blur(6.6px); }
.am-brand { position: absolute; left: 109px; top: 31px; width: 166px; height: 33px; }
.am-brand img { width: 166px; height: 33px; }
.am-nav { position: absolute; left: 344px; top: 31px; width: 620px; height: 29px; font-size: 20px; font-weight: 700; line-height: 1.00165; white-space: nowrap; }
.am-nav__list { display: flex; align-items: center; gap: 30px; width: 620px; height: 29px; margin: 0; padding: 0; list-style: none; }
.am-nav__list li { flex: 0 0 auto; margin: 0; padding: 0; }
.am-nav__list li:first-child a { color: #37b1ff; }
.am-nav__list a { display: inline-flex; align-items: center; min-height: 24px; }
.am-header-cta { position: absolute; top: 27px; width: 165px; height: 38px; color: #fff; font-size: 20px; font-weight: 700; line-height: 1.00165; white-space: nowrap; }
.am-header-cta--shop { left: 989px; }
.am-header-cta--tax { left: 1167px; }
.am-header-cta img { position: absolute; left: -1.8px; top: -0.8px; width: 170.6001px; height: 43.6px; pointer-events: none; }
.am-header-cta span { position: absolute; left: 23px; top: 5px; display: flex; width: 120px; height: 29px; align-items: center; justify-content: center; }

.am-page-title { position: absolute; left: 81px; top: 217px; width: 633px; height: 120px; color: var(--am-blue); font-weight: 900; }
.am-page-title h1 { width: 404px; height: 87px; font-size: 60px; font-weight: 900; line-height: 1.45; letter-spacing: -3.6px; white-space: nowrap; }
.am-page-title p { width: 633px; height: 33px; font-size: 23px; font-weight: 900; line-height: 1.45; letter-spacing: -1.38px; white-space: nowrap; }
.am-hero { position: absolute; left: 81px; top: 463px; width: 1359px; height: 415px; object-fit: cover; }

.am-toc { position: absolute; inset: 0; }
.am-toc a { position: absolute; left: 1043px; top: var(--am-y); width: 317px; height: 32px; color: var(--am-text); font-size: 22px; font-weight: 700; line-height: 31.9px; white-space: nowrap; }
.am-toc a > span { position: absolute; left: 0; top: 0; height: 32px; }
.am-toc a > img { position: absolute; left: 299px; top: 7px; width: 11px; height: 18px; transform: rotate(90deg); transform-origin: center; }

.am-birth,
.am-products,
.am-how-to,
.am-voice,
.am-first,
.am-purchase { position: absolute; inset: 0; pointer-events: none; transform: translateY(var(--am-purchase-shift, 0)); transition: transform 360ms cubic-bezier(.22, 1, .36, 1); }
.am-purchase { --am-purchase-shift: -288px; }
.am-birth :where(a, summary, button),
.am-products :where(a, summary, button),
.am-how-to :where(a, summary, button),
.am-voice :where(a, summary, button),
.am-first :where(a, summary, button),
.am-purchase :where(a, summary, button) { pointer-events: auto; }

.am-section-heading { position: absolute; left: 81px; width: 644px; height: 106px; color: var(--am-blue); font-weight: 900; scroll-margin-top: 20px; }
.am-section-heading h2 { width: 473px; height: 73px; font-size: 50px; font-weight: 900; line-height: 72.5px; letter-spacing: -3px; white-space: nowrap; }
.am-section-heading p { width: 644px; height: 33px; font-size: 23px; font-weight: 900; line-height: 33.35px; letter-spacing: -1.38px; white-space: nowrap; }
.am-birth .am-section-heading { top: 1018px; }
.am-birth__copy { position: absolute; left: 81px; top: 1164px; width: 945px; height: 261px; font-size: 20px; font-weight: 700; line-height: 29px; letter-spacing: normal; }
.am-birth__diagram { position: absolute; left: 244px; top: 1455px; width: 641px; height: 427px; object-fit: cover; }

.am-products__heading { top: 1982px; }
.am-products__lead { position: absolute; left: 81px; top: 2128px; display: flex; width: 945px; height: 87px; flex-direction: column; font-size: 20px; font-weight: 600; line-height: 29px; }
.am-products__lead span { display: block; white-space: nowrap; }
.am-product-card { position: absolute; width: 452px; height: 610px; background: #fff; }
.am-product-card::after { position: absolute; inset: 0; z-index: 5; border: 1px solid var(--am-blue); content: ""; pointer-events: none; }
.am-product-card--300 { left: 81px; top: 2235px; }
.am-product-card--1800 { left: 574px; top: 2235px; }
.am-product-card h3 { position: absolute; left: 0; top: 15px; width: 452px; height: 33px; color: var(--am-blue); font-size: 23px; font-weight: 900; line-height: 33.35px; letter-spacing: -1.38px; text-align: center; white-space: nowrap; }
.am-product-card__media { position: absolute; overflow: hidden; }
.am-product-card--300 .am-product-card__media { left: 42px; top: 60px; width: 369px; height: 230px; }
.am-product-card--1800 .am-product-card__media { left: 36px; top: 54px; width: 380px; height: 243px; }
.am-product-card__media img { position: absolute; max-width: none; }
.am-product-card--300 .am-product-card__media img,
.am-purchase-card--300 .am-product-card__media img { left: -15.93%; top: -22.92%; width: 132.08%; height: 139.85%; }
.am-product-card--1800 .am-product-card__media img,
.am-purchase-card--1800 .am-product-card__media img { left: -16.6%; top: -21.28%; width: 133.21%; height: 136.52%; }
.am-product-card__tag { position: absolute; left: 16px; top: 329px; display: flex; width: 420px; height: 60px; flex-direction: column; font-size: 26px; font-weight: 600; line-height: 29.9px; }
.am-product-card__tag span { display: block; white-space: nowrap; }
.am-product-card__body { position: absolute; left: 16px; top: 424px; width: 420px; min-height: 87px; font-size: 20px; font-weight: 600; line-height: 29px; }
.am-product-card--300 .am-product-card__body { font-size: 19px; }
.am-product-card__body .am-copy-line { display: block; white-space: nowrap; text-wrap: nowrap; }
.am-detail-link { position: absolute; left: 152px; top: 553px; width: 148px; height: 34px; border-bottom: 1px solid var(--am-text); font-size: 20px; font-weight: 700; line-height: 29px; }
.am-detail-link > span { position: absolute; left: 0; top: 0; width: 100px; height: 29px; white-space: nowrap; }
.am-detail-link > img { position: absolute; left: 119.5px; top: -4.5px; width: 19px; height: 38px; transform: rotate(90deg); transform-origin: center; }

.am-professor { position: absolute; left: 81px; top: 2885px; width: 945px; height: 220px; background: #fff; box-shadow: inset 0 0 0 1px var(--am-blue); }
.am-professor > img { position: absolute; left: 16px; top: 21px; width: 147px; height: 182px; object-fit: cover; }
.am-professor h3 { position: absolute; left: 202px; top: 28px; width: 473px; height: 33px; color: var(--am-blue); font-size: 23px; font-weight: 900; line-height: 33.35px; letter-spacing: -1.38px; white-space: nowrap; }
.am-professor > p { position: absolute; left: 202px; top: 75px; width: 580px; height: 87px; font-size: 20px; font-weight: 600; line-height: 29px; }
.am-professor__link { position: absolute; left: 787px; top: 169px; width: 139px; height: 39px; border-bottom: 1px solid var(--am-text); font-size: 20px; font-weight: 700; line-height: 29px; }
.am-professor__link span { position: absolute; left: 1px; top: 4px; width: 100px; }
.am-professor__link img { position: absolute; left: 120px; top: 0; width: 19px; height: 38px; }

.am-gallery { position: absolute; inset: 0; }
.am-gallery > span { position: absolute; overflow: hidden; }
.am-gallery > span img { width: 100%; height: 100%; }
.am-gallery__top { top: 3145px; height: 388px; }
.am-gallery__top--water { left: 81px; width: 303px; }
.am-gallery__top--water img { object-fit: cover; object-position: 28% center; transform: scaleX(1.94); }
.am-gallery__top--light { left: 404px; width: 300px; }
.am-gallery__top--light img,
.am-gallery__top--building img { object-fit: cover; }
.am-gallery__top--building { left: 726px; width: 300px; }
.am-gallery__bottom { left: 81px; top: 3555px; width: 945px; height: 293px; }
.am-gallery__bottom img { object-fit: cover; object-position: center 81%; }

.am-product-detail { position: absolute; left: 81px; width: 945px; }
.am-product-detail--300 { top: 3928px; height: 405px; }
.am-product-detail--1800 { top: 4413px; height: 434px; }
.am-product-detail__title { position: absolute; left: 0; top: 0; height: 41px; }
.am-product-detail__title h2 { position: absolute; left: 0; top: 0; height: 41px; color: var(--am-blue); font-size: 28px; font-weight: 900; line-height: 40.6px; letter-spacing: -1.68px; white-space: nowrap; }
.am-product-detail__title > span { position: absolute; left: 162px; top: 22px; width: 28px; height: 1px; background: var(--am-text); }
.am-product-detail__title > p { position: absolute; left: 193px; top: 8px; height: 26px; font-size: 18px; font-weight: 600; line-height: 26.1px; white-space: nowrap; }
.am-product-detail--300 .am-product-detail__title { width: 516px; }
.am-product-detail--1800 .am-product-detail__title { width: 465px; }
.am-product-detail__copy { position: absolute; left: 0; top: 81px; display: flex; width: 563px; flex-direction: column; font-size: 20px; font-weight: 600; line-height: 29px; }
.am-product-detail__copy span { display: block; }
.am-product-detail__photo { position: absolute; left: 563px; top: 55px; overflow: hidden; }
.am-product-detail--300 .am-product-detail__photo { width: 382px; height: 239px; }
.am-product-detail--1800 .am-product-detail__photo { left: 565px; width: 374px; height: 240px; }
.am-product-detail__photo img { position: absolute; max-width: none; }
.am-product-detail--300 .am-product-detail__photo img { left: -15.93%; top: -22.92%; width: 132.08%; height: 139.85%; }
.am-product-detail--1800 .am-product-detail__photo img { left: -16.6%; top: -21.28%; width: 133.21%; height: 136.52%; }
.am-benefits { position: absolute; left: 0; width: 542px; height: 141px; }
.am-product-detail--300 .am-benefits { top: 217px; }
.am-product-detail--1800 .am-benefits { top: 217px; }
.am-benefit { position: absolute; top: 0; width: 141px; height: 141px; }
.am-benefit:nth-child(1) { left: 0; }
.am-benefit:nth-child(2) { left: 134px; }
.am-benefit:nth-child(3) { left: 267px; }
.am-benefit:nth-child(4) { left: 401px; }
.am-benefit > img { position: absolute; inset: 0; width: 141px; height: 141px; }
.am-benefit > .am-benefit__copy { position: absolute; left: 16px; top: 45px; display: flex; width: 110px; height: 50px; flex-direction: column; align-items: center; justify-content: center; color: var(--am-text); font-size: 17px; font-weight: 600; line-height: 24.65px; letter-spacing: -1.53px; text-align: center; }
.am-benefit__line { display: block; white-space: nowrap; text-wrap: nowrap; }
.am-blue-button { position: absolute; display: block; height: 46px; border-radius: 23px; background: #008bc6; color: #fff !important; font-size: 20px; font-weight: 700; line-height: 29px; box-shadow: 0 2px 3px rgb(0 0 0 / 20%); }
.am-blue-button > span:first-child { position: absolute; left: 13px; top: 8px; white-space: nowrap; }
.am-blue-button > span:last-child { position: absolute; right: 12px; top: 4px; font-family: sans-serif; font-size: 34px; font-weight: 400; line-height: 38px; }
.am-product-detail--300 > .am-blue-button { left: 0; top: 388px; width: 286px; }
.am-product-detail--1800 > .am-blue-button { left: 0; top: 388px; width: 296px; }
.am-product-detail--1800 > .am-blue-button--table { left: 338px; width: 316px; }

.am-how-to .am-section-heading { top: 4947px; }
.am-how-to__lead { position: absolute; left: 81px; top: 5093px; display: flex; width: 945px; height: 58px; flex-direction: column; font-size: 20px; font-weight: 600; line-height: 29px; }
.am-how-to__lead span { display: block; white-space: nowrap; }
.am-how-to__bg { position: absolute; left: -90.5146px; top: 5191px; width: 1621.0288px; height: 1619px; object-fit: cover; object-position: bottom; }
.am-use-cards { position: absolute; inset: 0; }
.am-use-card { position: absolute; left: var(--am-x); top: var(--am-y); width: 372px; height: 423px; color: #fff; }
.am-use-card__photo,
.am-use-card__shade { position: absolute; inset: 0; width: 372px; height: 423px; }
.am-use-card__photo { object-fit: cover; }
.am-use-card__shade { background: rgb(105 105 105 / 50%); }
.am-use-card__vertical { position: absolute; left: 314px; top: 20px; width: 32px; margin: 0; color: #fff; font-size: 32px; font-weight: 700; line-height: 37.76px; text-align: center; }
.am-use-card__vertical > span { display: block; width: 32px; height: 37.76px; }
.am-use-card > p { position: absolute; left: 12px; top: 358px; display: flex; width: 348px; flex-direction: column; font-size: 20px; font-weight: 600; line-height: 29px; letter-spacing: -1.8px; }
.am-use-card > p span { display: block; white-space: nowrap; }

.am-voice .am-section-heading { top: 6890px; }
.am-review-list { position: absolute; inset: 0; }
.am-review { position: absolute; left: var(--am-x); top: var(--am-y); width: 452px; height: 157px; }
.am-review__box { position: absolute; inset: 0; border: 1px solid var(--am-blue); background: #fff; }
.am-review__line { position: absolute; left: 16px; top: 27px; width: 33px; height: 1px; background: var(--am-text); }
.am-review h3 { position: absolute; left: 68px; top: 12px; width: 104px; height: 29px; font-size: 20px; font-weight: 700; line-height: 29px; white-space: nowrap; }
.am-review p { position: absolute; left: 17px; top: 63px; width: 418px; font-size: 18px; font-weight: 600; line-height: 26px; }
.am-blue-button--reviews { left: 407px; top: 7565px; width: 270px; }

.am-first .am-section-heading { top: 7691px; }
.am-faq { position: absolute; left: 81px; top: var(--am-y); width: 945px; height: 144px; transition: top 280ms cubic-bezier(.22, 1, .36, 1); }
.am-faq summary { position: absolute; left: 0; top: 0; display: block; width: 945px; height: 72px; list-style: none; background: var(--am-blue); cursor: pointer; }
.am-faq summary::-webkit-details-marker { display: none; }
.am-faq summary > span { position: absolute; left: 63px; top: 18px; width: 560px; height: 35px; color: #fff; font-size: 20px; font-weight: 700; line-height: 34.74px; }
.am-faq__question { position: absolute; left: 14px; top: 19px; width: 34px; height: 34px; }
.am-faq__plus { position: absolute; left: 902px; top: 24px; width: 24px; height: 24px; transition: transform .3s cubic-bezier(.22, 1, .36, 1); }
.am-faq__answer { position: absolute; left: 0; top: 72px; width: 945px; height: 72px; border: 1px solid var(--am-blue); background: #fff; }
.am-faq__answer p { position: absolute; left: 19px; top: 19px; width: 904px; height: 29px; font-size: 20px; font-weight: 600; line-height: 29px; white-space: nowrap; }
.am-faq:not([open]) { height: 72px; }
.am-faq[open] .am-faq__plus { transform: rotate(45deg); }
.am-blue-button--faq { left: 407px; top: 8205px; width: 290px; transition: top 360ms cubic-bezier(.22, 1, .36, 1); }

.am-purchase__bg { position: absolute; left: 0; top: 8580px; width: 1440px; height: 928px; object-fit: cover; object-position: center bottom; }
.am-purchase .am-section-heading { top: 8619px; }
.am-purchase-card { top: 8765px; background: rgb(255 255 255 / 60%); }
.am-purchase-card--300 { left: 81px; }
.am-purchase-card--1800 { left: 574px; }
.am-purchase-card--300 .am-product-card__media { left: 42px; top: 60px; width: 369px; height: 230px; }
.am-purchase-card--1800 .am-product-card__media { left: 36px; top: 54px; width: 380px; height: 243px; }
.am-purchase-card .am-detail-link > span { width: 80px; }
.am-purchase-card .am-detail-link > span { left: 0; width: 100%; text-align: center; }
.am-purchase-card .am-detail-link > img { transform: none; }

@media (min-width: 700px) and (max-width: 1439.98px) {
	.am-stage--pc { width: 100vw; height: 643.402778vw; margin: 0; }
	.am-artboard--pc { transform: scale(calc(100vw / 1440px)); }
}

@media (max-width: 699px) {
	.am-stage--pc { display: none; }
	.am-stage--sp { display: block; width: 100vw; height: 2660.8vw; margin: 0; }
	.am-artboard--sp { transform: scale(calc(100vw / 375px)); }

	.am-sp-mainvisual {
		position: absolute;
		left: 0;
		top: 0;
		width: 375px;
		height: 325px;
		overflow: hidden;
	}

	.am-sp-mainvisual__bg {
		position: absolute;
		left: -183px;
		top: 0;
		width: 742px;
		height: 463px;
		object-fit: cover;
		pointer-events: none;
	}

	.am-sp-brand {
		position: absolute;
		left: 15px;
		top: 18px;
		z-index: 3;
		width: 126px;
		height: 25px;
	}

	.am-sp-brand img { width: 126px; height: 25px; }

	.am-sp-page-title {
		position: absolute;
		left: 15px;
		top: 86px;
		z-index: 2;
		color: var(--am-blue);
		font-weight: 900;
	}

	.am-sp-page-title h1,
	.am-sp-page-title p { margin: 0; white-space: nowrap; }
	.am-sp-page-title h1 { height: 46px; font-size: 32px; font-weight: 900; line-height: 46px; letter-spacing: -1.92px; }
	.am-sp-page-title p { height: 29px; font-size: 20px; font-weight: 900; line-height: 29px; letter-spacing: -1.2px; }

	.am-sp-breadcrumb {
		position: absolute;
		right: 15px;
		top: 185px;
		z-index: 3;
		display: flex;
		align-items: center;
		gap: 8px;
		height: 17px;
		color: var(--am-blue);
		font-size: 12px;
		font-weight: 700;
		line-height: 17px;
		white-space: nowrap;
	}

	.am-sp-breadcrumb img { width: 6px; height: 9px; }

	.am-sp-hero {
		position: absolute;
		left: 0;
		top: 210px;
		z-index: 2;
		width: 375px;
		height: 115px;
		object-fit: cover;
	}

	.am-sp-toc {
		position: absolute;
		left: 0;
		top: 325px;
		z-index: 4;
		width: 375px;
		height: 80px;
		overflow: hidden;
		border-bottom: 1px solid rgb(69 69 69 / 12%);
		background: transparent;
		color: var(--am-blue);
	}

	.am-sp-toc__track { display: flex; width: 375px; height: 79px; align-items: center; overflow-x: auto; overflow-y: hidden; padding-inline: 15px; scrollbar-width: none; }
	.am-sp-toc__track::-webkit-scrollbar { display: none; }
	.am-sp-toc a { display: flex; height: 34px; align-items: center; gap: 5px; margin-right: 10px; padding-right: 10px; border-right: 1px solid rgb(69 69 69 / 12%); font-size: 17px; font-weight: 700; line-height: 25px; white-space: nowrap; }
	.am-sp-toc a img { width: 8px; height: 13px; transform: rotate(90deg); transform-origin: center; }
	.am-sp-toc__swipe-hint { position: absolute; left: 30px; right: auto; bottom: 5px; z-index: 2; display: block; width: 30px; height: 30px; opacity: 0; pointer-events: none; }
	.am-sp-toc__swipe-hand { position: absolute; inset: 2px; background: url("../images/swipe-hand.svg") center / contain no-repeat; filter: drop-shadow(0 1px 2px rgb(255 255 255 / 95%)); }
	.am-sp-toc.is-swipe-hint-active .am-sp-toc__swipe-hint { animation: am-sp-swipe-hint 4.2s ease both; }
	.am-sp-toc.is-swipe-hint-active .am-sp-toc__swipe-hand { animation: am-sp-swipe-hand 1.35s cubic-bezier(.4, 0, .2, 1) .45s 2 both; }
	.am-sp-toc.is-swipe-hint-hidden .am-sp-toc__swipe-hint { animation: none; opacity: 0; }

	@keyframes am-sp-swipe-hint {
		0%, 8%, 100% { opacity: 0; }
		18%, 76% { opacity: .72; }
	}

	@keyframes am-sp-swipe-hand {
		0%, 100% { transform: translate3d(0, 0, 0); }
		46% { transform: translate3d(-23px, 0, 0); }
		64% { transform: translate3d(-23px, 0, 0); }
	}

	.am-sp-content {
		position: absolute;
		left: 0;
		top: 405px;
		display: flex;
		width: 375px;
		padding: 54px 16px 24px;
		flex-direction: column;
		background: #ffffff;
		box-sizing: border-box;
	}

	.am-sp-section { width: 343px; scroll-margin-top: 20px; }
	.am-sp-section + .am-sp-section { margin-top: 96px; }

	.am-sp-heading { width: 343px; color: var(--am-blue); font-weight: 900; }
	.am-sp-heading h2,
	.am-sp-heading p { margin: 0; }
	.am-sp-heading h2 { font-size: 30px; font-weight: 900; line-height: 44px; letter-spacing: -1.8px; text-wrap: balance; }
	.am-sp-heading p { font-size: 21px; font-weight: 900; line-height: 31px; letter-spacing: -1.2px; text-wrap: balance; }

	.am-sp-birth__copy { margin-top: 37px; color: var(--am-text); font-size: 15px; font-weight: 600; line-height: 1.9; text-wrap: pretty; }
	.am-sp-birth__copy p + p { margin-top: 14px; }
	.am-sp-birth__diagram { width: 343px; height: 229px; margin-top: 30px; object-fit: cover; }

	.am-sp-products__lead,
	.am-sp-how-to__lead { margin-top: 34px; font-size: 15px; font-weight: 600; line-height: 1.9; text-wrap: pretty; }
	.am-sp-tabs {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		width: 343px;
		margin-top: 30px;
		overflow: hidden;
		border: 1px solid var(--am-blue);
		border-radius: 24px;
		background: #ffffff;
	}
	.am-sp-tabs button {
		height: 46px;
		padding: 0 10px;
		border: 0;
		border-radius: 0;
		background: #ffffff;
		color: var(--am-blue);
		font-family: inherit;
		font-size: 16px;
		font-weight: 800;
		line-height: 46px;
		text-align: center;
		cursor: pointer;
	}
	.am-sp-tabs button + button { border-left: 1px solid var(--am-blue); }
	.am-sp-tabs button[aria-selected="true"] { background: var(--am-blue); color: #ffffff; }
	.am-sp-tabs button:focus-visible { position: relative; z-index: 1; outline: 3px solid #ffffff; outline-offset: -5px; box-shadow: 0 0 0 2px var(--am-blue); }
	.am-sp-product-list,
	.am-sp-purchase__cards { display: flex; width: 343px; margin-top: 35px; flex-direction: column; gap: 24px; }
	.am-sp-tabs + .am-sp-product-list { margin-top: 20px; }
	.am-sp-product-list > [hidden],
	.am-sp-detail-switcher > [hidden] { display: none; }

	.am-sp-product-card {
		position: relative;
		display: flex;
		width: 343px;
		min-height: 540px;
		padding: 16px 15px 20px;
		flex-direction: column;
		border: 1px solid var(--am-blue);
		background: #ffffff;
	}

	.am-sp-product-card h3 { color: var(--am-blue); font-size: 21px; font-weight: 900; line-height: 31px; text-align: center; }
	.am-sp-product-card__media { position: relative; display: block; width: 311px; height: 190px; margin-top: 8px; overflow: hidden; }
	.am-sp-product-card__media img { position: absolute; left: -16%; top: -22%; width: 132%; height: 140%; max-width: none; }
	.am-sp-product-card__tag { margin-top: 20px; font-size: 21px; font-weight: 600; line-height: 1.4; }
	.am-sp-product-card__body { margin-top: 24px; font-size: 15px; font-weight: 600; line-height: 1.85; text-wrap: pretty; }

	.am-sp-detail-link {
		display: flex;
		width: 140px;
		height: 38px;
		align-items: center;
		justify-content: space-between;
		align-self: center;
		margin-top: auto;
		padding-top: 4px;
		border-bottom: 1px solid var(--am-text);
		font-size: 18px;
		font-weight: 700;
		line-height: 27px;
	}
	.am-sp-product-card .am-sp-detail-link { position: relative; justify-content: center; }
	.am-sp-product-card .am-sp-detail-link span { width: 100%; text-align: center; }
	.am-sp-product-card .am-sp-detail-link img { position: absolute; right: 0; top: 0; }

	.am-sp-detail-link img { width: 19px; height: 38px; }
	.am-sp-product-list .am-sp-detail-link { position: relative; justify-content: flex-start; }
	.am-sp-product-list .am-sp-detail-link img { position: absolute; right: 8px; top: 0; transform: rotate(90deg); transform-origin: 50% 50%; }

	.am-sp-professor {
		position: relative;
		display: grid;
		grid-template-columns: 104px 1fr;
		gap: 18px;
		width: 343px;
		margin-top: 28px;
		padding: 18px 16px 64px;
		border: 1px solid var(--am-blue);
		background: #ffffff;
	}

	.am-sp-professor > img { width: 104px; height: 129px; object-fit: cover; }
	.am-sp-professor h3 { align-self: center; color: var(--am-blue); font-size: 14px; font-weight: 900; line-height: 1.75; }
	.am-sp-professor h3 span { display: block; white-space: nowrap; }
	.am-sp-professor p { grid-column: 1 / -1; margin-top: 0; font-size: 14px; font-weight: 600; line-height: 1.85; text-wrap: pretty; }
	.am-sp-professor .am-sp-detail-link { position: absolute; right: 16px; bottom: 14px; }

	.am-sp-gallery {
		display: grid;
		grid-template-columns: 110px 109px 109px;
		grid-template-rows: 141px 106px;
		gap: 8px 7.5px;
		width: 343px;
		height: 255px;
		margin-top: 34px;
		overflow: hidden;
	}
	.am-sp-gallery__item { position: relative; display: block; overflow: hidden; }
	.am-sp-gallery__item img { display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; }
	.am-sp-gallery__item--water img { object-position: 28% center; transform: scaleX(1.94); }
	.am-sp-gallery__item--light img,
	.am-sp-gallery__item--building img { object-position: center; }
	.am-sp-gallery__item--bottom { grid-column: 1 / -1; }
	.am-sp-gallery__item--bottom img { object-position: center 81%; }
	.am-sp-products + .am-sp-detail-switcher { margin-top: 52px; }

	.am-sp-detail-switcher > .am-sp-tabs { margin-top: 0; }
	.am-sp-detail-switcher > .am-sp-product-detail { margin-top: 38px; }

	.am-sp-product-detail__title { display: grid; grid-template-columns: auto 28px 1fr; align-items: center; column-gap: 8px; width: 343px; }
	.am-sp-product-detail__title h2 { color: var(--am-blue); font-size: 25px; font-weight: 900; line-height: 37px; letter-spacing: -1.3px; white-space: nowrap; }
	.am-sp-product-detail__title > span { width: 28px; height: 1px; background: var(--am-text); }
	.am-sp-product-detail__title p { font-size: 14px; font-weight: 600; line-height: 1.6; }
	.am-sp-product-detail__copy { margin-top: 28px; font-size: 15px; font-weight: 600; line-height: 1.9; text-wrap: pretty; }
	.am-sp-product-detail__photo { position: relative; display: block; width: 343px; height: 220px; margin-top: 28px; overflow: hidden; }
	.am-sp-product-detail__photo img { position: absolute; left: -16%; top: -22%; width: 132%; height: 140%; max-width: none; }

	.am-sp-benefits { display: grid; grid-template-columns: repeat(2, 141px); gap: 14px 24px; width: 306px; margin: 25px auto 0; }
	.am-sp-benefit { position: relative; display: block; width: 141px; height: 141px; }
	.am-sp-benefit > img { position: absolute; inset: 0; width: 141px; height: 141px; }
	.am-sp-benefit > span { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; flex-direction: column; font-size: 15px; font-weight: 600; line-height: 1.6; text-align: center; }
	.am-sp-benefit > span > span { display: block; white-space: nowrap; }

	.am-sp-blue-button { position: relative; display: block; width: 100%; height: 46px; margin-top: 28px; border-radius: 23px; background: #008bc6; color: #ffffff !important; font-size: 17px; font-weight: 700; line-height: 27px; box-shadow: 0 2px 3px rgb(0 0 0 / 20%); }
	.am-sp-blue-button > span:first-child { position: absolute; left: 36px; right: 36px; top: 9px; text-align: center; white-space: nowrap; }
	.am-sp-blue-button > span:last-child { position: absolute; right: 13px; top: 4px; font-family: sans-serif; font-size: 32px; font-weight: 400; line-height: 38px; }
	.am-sp-product-detail__buttons { display: flex; flex-direction: column; gap: 14px; }
	.am-sp-product-detail__buttons .am-sp-blue-button + .am-sp-blue-button { margin-top: 0; }

	.am-sp-how-to { position: relative; isolation: isolate; width: 375px; margin-left: -16px; padding: 54px 16px 65px; overflow: hidden; background: #356d84; color: #ffffff; view-timeline-name: --am-how-to; view-timeline-axis: block; }
	.am-sp-how-to__background { position: absolute; inset: -130px 0; z-index: 0; display: block; background: url("../images/about-magna/use-bg-3229-418.webp") center top / 760px 760px repeat-y; transform: translate3d(0, var(--am-sp-parallax-y, 0), 0); will-change: transform; pointer-events: none; }
	.am-sp-how-to > :not(.am-sp-how-to__background) { position: relative; z-index: 1; }
	.am-sp-how-to .am-sp-heading { color: #ffffff; }
	.am-sp-use-list { display: flex; width: 343px; margin-top: 38px; flex-direction: column; gap: 26px; }
	.am-sp-use-card { position: relative; width: 343px; height: 390px; overflow: hidden; color: #ffffff; }
	.am-sp-how-to.am-motion-ready .am-sp-use-card { opacity: 0; transform: translate3d(0, 42px, 0); transition: opacity .8s ease, transform .85s cubic-bezier(.22, 1, .36, 1); }
	.am-sp-how-to.am-motion-ready .am-sp-use-card.is-visible { opacity: 1; transform: translate3d(0, 0, 0); }
	.am-sp-use-card__visual { position: absolute; inset: 0; display: block; width: 343px; height: 390px; -webkit-mask-image: linear-gradient(to right, rgb(0 0 0 / 45%) 0, #000 4%, #000 96%, rgb(0 0 0 / 45%) 100%), linear-gradient(to bottom, rgb(0 0 0 / 45%) 0, #000 4%, #000 96%, rgb(0 0 0 / 45%) 100%); mask-image: linear-gradient(to right, rgb(0 0 0 / 45%) 0, #000 4%, #000 96%, rgb(0 0 0 / 45%) 100%), linear-gradient(to bottom, rgb(0 0 0 / 45%) 0, #000 4%, #000 96%, rgb(0 0 0 / 45%) 100%); -webkit-mask-composite: source-in; mask-composite: intersect; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; }
	.am-sp-use-card__visual > img,
	.am-sp-use-card__shade { position: absolute; inset: 0; width: 343px; height: 390px; }
	.am-sp-use-card__visual > img { object-fit: cover; }
	.am-sp-use-card__shade { background: linear-gradient(180deg, rgb(20 40 45 / 12%) 20%, rgb(20 35 40 / 68%) 100%); }
	.am-sp-use-card h3 { position: absolute; right: 19px; top: 18px; margin: 0; font-size: 28px; font-weight: 700; line-height: 1; letter-spacing: .06em; writing-mode: vertical-rl; }
	.am-sp-use-card p { position: absolute; left: 18px; right: 72px; bottom: 18px; font-size: 15px; font-weight: 600; line-height: 1.75; }

	.am-sp-review-list { display: flex; flex-direction: column; gap: 18px; width: 343px; margin-top: 35px; }
	.am-sp-review { width: 343px; min-height: 138px; padding: 0 15px 20px; border: 1px solid var(--am-blue); background: #ffffff; }
	.am-sp-review header { display: flex; min-height: 55px; align-items: center; gap: 17px; }
	.am-sp-review header > span { width: 33px; height: 1px; background: var(--am-blue); }
	.am-sp-review h3 { font-size: 18px; font-weight: 700; line-height: 27px; }
	.am-sp-review p { font-size: 15px; font-weight: 600; line-height: 1.85; text-wrap: pretty; }
	.am-sp-blue-button--reviews,
	.am-sp-blue-button--faq { width: 290px; margin-inline: auto; }

	.am-sp-faq-list { display: flex; flex-direction: column; gap: 18px; width: 343px; margin-top: 35px; }
	.am-sp-faq { width: 343px; }
	.am-sp-faq summary { position: relative; display: flex; width: 343px; min-height: 72px; align-items: center; padding: 12px 38px 12px 55px; list-style: none; background: var(--am-blue); color: #ffffff; cursor: pointer; }
	.am-sp-faq summary::-webkit-details-marker { display: none; }
	.am-sp-faq summary:focus-visible { outline: 3px solid #ffffff; outline-offset: -6px; }
	.am-sp-faq summary > span { font-size: 15px; font-weight: 700; line-height: 1.6; }
	.am-sp-faq__question { position: absolute; left: 14px; top: 50%; width: 34px; height: 34px; transform: translateY(-50%); }
	.am-sp-faq__plus { position: absolute; right: 12px; top: 50%; width: 18px; height: 18px; transform: translateY(-50%); transition: transform .25s ease; }
	.am-sp-faq[open] .am-sp-faq__plus { transform: translateY(-50%) rotate(45deg); }
	.am-sp-faq__answer { padding: 15px 16px 18px; border: 1px solid var(--am-blue); border-top: 0; background: #ffffff; }
	.am-sp-faq__answer p { font-size: 14px; font-weight: 600; line-height: 1.8; text-wrap: pretty; }
	.am-sp-faq.is-opening,
	.am-sp-faq.is-closing { overflow: hidden; }
	.am-sp-faq__answer { will-change: opacity, transform; }

	.am-sp-purchase { position: relative; width: 375px; margin-left: -16px; padding: 54px 16px 32px; overflow: hidden; }
	.am-sp-purchase__bg { position: absolute; inset: 0; z-index: 0; width: 375px; height: 100%; object-fit: cover; object-position: center bottom; }
	.am-sp-purchase > :not(.am-sp-purchase__bg) { position: relative; z-index: 1; }
	.am-sp-purchase .am-sp-product-card { background: rgb(255 255 255 / 72%); }

	@media (prefers-reduced-motion: reduce) {
		.am-sp-toc__swipe-hint { animation: none; opacity: 0; }
		.am-sp-how-to.am-motion-ready .am-sp-use-card { transition: none; }
		.am-sp-how-to.am-motion-ready .am-sp-use-card { opacity: 1; transform: none; }
		.am-sp-how-to__background { transform: none; }
	}
}