/* =========================================================
   SHARK STYLE GYM
   STORY PAGE ONLY

   IMPORTANT:
   header / nav / sp menu / footer は common.css に任せる
   このCSSでは一切触らない
========================================================= */


/* =========================================================
   BASE
========================================================= */

.story-page {
	--aqua: #31cec5;
	--aqua-dark: #159f9b;
	--navy: #063e47;
	--deep: #05353d;
	--text: #62777c;
	--light: #f1fbfa;
	--sand: #fff8ed;

	width: 100%;
	overflow: hidden;

	color: var(--text);
	background: #fff;
}

.story-page *,
.story-page *::before,
.story-page *::after {
	box-sizing: border-box;
}

.story-page img {
	display: block;
	width: 100%;
	max-width: 100%;
}

.story-container {
	width: min(1180px, calc(100% - 48px));
	margin-inline: auto;
}

.story-en,
.story-kicker {
	margin: 0 0 18px;

	color: var(--aqua-dark);

	font-size: 12px;
	font-weight: 800;
	line-height: 1.5;
	letter-spacing: .2em;
}


/* =========================================================
   HERO
========================================================= */

.story-hero {
	position: relative;

	min-height: 720px;

	overflow: hidden;
	background: var(--deep);
}

.story-hero__bg {
	position: absolute;
	inset: 0;

	background:
		linear-gradient(90deg,
			rgba(4, 53, 61, .97) 0%,
			rgba(4, 53, 61, .88) 38%,
			rgba(4, 53, 61, .52) 68%,
			rgba(4, 53, 61, .22) 100%),
		url("../img/NS_00113.jpg") center center / cover no-repeat;
}

.story-hero__inner {
	position: relative;
	z-index: 2;

	display: flex;

	min-height: 720px;

	align-items: center;
}

.story-hero__content {
	width: min(100%, 850px);
	padding: 70px 0;
}

.story-hero .story-kicker {
	color: var(--aqua);
}

.story-hero__title {
	margin: 0;
	color: #fff;

	font-size: clamp(44px, 4vw, 68px);
	font-weight: 800;

	line-height: 1.22;
	letter-spacing: -0.045em;
}

.story-hero__line {
	display: block;
	width: max-content;
	max-width: 100%;

	white-space: nowrap;
}

.story-hero__line--accent {
	margin-top: .1em;
	color: #31cec5;
}

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

	.story-hero__title {
		font-size: clamp(25px, 6.8vw, 32px);
		line-height: 1.28;
		letter-spacing: -0.04em;
	}

	.story-hero__line {
		display: block;

		width: 100%;
		max-width: 100%;

		white-space: normal;
		overflow-wrap: normal;
		word-break: keep-all;
	}

	.story-hero__line--accent {
		margin-top: .18em;
	}

}

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

	.story-hero__title {
		font-size: 24px;
	}

}

.story-hero__title span,
.story-hero__title em {
	display: block;

	max-width: 100%;

	font-style: normal;
}

.story-hero__title em {
	margin-top: .1em;
	color: var(--aqua);
}

.story-hero__lead {
	max-width: 680px;

	margin: 40px 0 0;

	color: rgba(255, 255, 255, .76);

	font-size: 17px;
	line-height: 2;
}

.story-hero__profile {
	display: flex;

	margin-top: 34px;

	align-items: center;
	gap: 18px;
}

.story-hero__profile strong {
	color: #fff;

	font-size: 18px;
	letter-spacing: .08em;
}

.story-hero__profile span {
	color: var(--aqua);

	font-size: 11px;
	font-weight: 700;
	letter-spacing: .15em;
}

.story-scroll {
	display: inline-flex;

	margin-top: 45px;

	color: #fff;

	text-decoration: none;

	font-size: 12px;
	font-weight: 800;
	letter-spacing: .17em;

	align-items: center;
	gap: 18px;
}

.story-scroll span {
	color: var(--aqua);
	font-size: 22px;
}


/* =========================================================
   COMMON HEADING
========================================================= */

.story-heading {
	margin-bottom: 55px;
}

.story-heading h2 {
	max-width: 850px;
	margin: 0;

	color: var(--navy);

	font-size: clamp(38px, 4vw, 58px);
	font-weight: 800;

	line-height: 1.45;
	letter-spacing: -.045em;
}

.story-heading h2 span {
	display: block;
}


/* =========================================================
   STORY INDEX
========================================================= */

.story-index {
	position: relative;

	padding: 110px 0 125px;

	background:
		radial-gradient(circle at 90% 10%,
			rgba(245, 188, 108, .16),
			transparent 25%),
		linear-gradient(140deg,
			#fff 0%,
			#f1fbfa 100%);
}

.story-index::before {
	content: "STORY";

	position: absolute;

	right: 4vw;
	top: 40px;

	color: rgba(49, 206, 197, .055);

	font-family: Georgia, serif;
	font-size: clamp(120px, 18vw, 290px);
	font-style: italic;

	pointer-events: none;
}

.story-index__grid {
	position: relative;
	z-index: 2;

	display: grid;

	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 16px;
}

.story-index-card {
	position: relative;

	min-height: 235px;
	padding: 30px;

	overflow: hidden;

	border: 1px solid rgba(21, 159, 155, .15);
	background: rgba(255, 255, 255, .92);

	color: inherit;
	text-decoration: none;

	transition:
		transform .3s ease,
		box-shadow .3s ease;
}

.story-index-card:hover {
	transform: translateY(-6px);

	box-shadow:
		0 20px 50px rgba(6, 62, 71, .09);
}

.story-index-card__number {
	display: block;

	color: rgba(21, 159, 155, .14);

	font-family: Georgia, serif;
	font-size: 66px;
	font-style: italic;

	line-height: 1;
}

.story-index-card small {
	display: block;

	margin-top: 8px;

	color: var(--aqua-dark);

	font-size: 10px;
	font-weight: 800;
	letter-spacing: .17em;
}

.story-index-card strong {
	display: block;

	max-width: 270px;

	margin-top: 17px;

	color: var(--navy);

	font-size: 20px;
	font-weight: 700;
	line-height: 1.65;
}


/* =========================================================
   SECTION COMMON
========================================================= */

.story-section {
	position: relative;
	padding: 120px 0;
}

.story-split {
	display: grid;

	grid-template-columns:
		minmax(0, .95fr) minmax(0, 1.05fr);

	gap: clamp(50px, 6vw, 85px);

	align-items: center;
}

.story-split--reverse> :first-child {
	order: 2;
}

.story-split--reverse> :last-child {
	order: 1;
}

.story-photo {
	position: relative;

	height: clamp(480px, 42vw, 620px);

	margin: 0;

	overflow: hidden;

	border-radius:
		75px 7px 75px 7px;

	box-shadow:
		17px 17px 0 rgba(49, 206, 197, .13);
}

.story-photo img {
	width: 100%;
	height: 100%;

	object-fit: cover;
}

.story-copy {
	min-width: 0;
}

.story-copy h2 {
	max-width: 650px;

	margin: 0 0 32px;

	color: var(--navy);

	font-size: clamp(34px, 3.5vw, 52px);
	font-weight: 800;

	line-height: 1.48;
	letter-spacing: -.045em;
}

.story-copy h2 span {
	display: block;
}

.story-copy p {
	max-width: 680px;

	margin: 0 0 19px;

	color: var(--text);

	font-size: 15px;
	line-height: 2.05;
}

.story-copy blockquote {
	margin: 38px 0 0;

	padding: 28px 30px;

	border-left: 5px solid var(--aqua);

	background: rgba(239, 250, 249, .9);

	color: var(--navy);

	font-size: 22px;
	font-weight: 700;
	line-height: 1.7;
}


/* =========================================================
   CHILDHOOD
========================================================= */

.story-section--childhood {
	background:
		radial-gradient(circle at 10% 85%,
			rgba(49, 206, 197, .1),
			transparent 25%),
		#fff;
}


/* =========================================================
   AMERICA
========================================================= */

.story-section--america {
	background:
		radial-gradient(circle at 92% 10%,
			rgba(246, 187, 99, .19),
			transparent 28%),
		linear-gradient(135deg,
			#fffaf1,
			#f4fbfa);
}


/* =========================================================
   FIGHTER
========================================================= */

.story-section--fighter {
	background:
		radial-gradient(circle at 85% 20%,
			rgba(49, 206, 197, .11),
			transparent 31%),
		var(--deep);
}

.story-copy--white h2 {
	color: #fff;
}

.story-copy--white p {
	color: rgba(255, 255, 255, .68);
}

.story-copy--white .story-en {
	color: var(--aqua);
}



/* =========================================================
   WORKING
========================================================= */

.story-section--working {
	background:
		radial-gradient(circle at 0% 100%,
			rgba(49, 206, 197, .12),
			transparent 27%),
		#fff8ed;
}

.story-highlight {
	margin: 38px 0;

	padding: 30px 34px;

	border-left: 5px solid var(--aqua);

	background: rgba(255, 255, 255, .9);

	box-shadow:
		0 16px 45px rgba(6, 62, 71, .07);
}

.story-highlight small {
	display: block;

	margin-bottom: 12px;

	color: var(--aqua-dark);

	font-size: 10px;
	font-weight: 800;
	letter-spacing: .17em;
}

.story-highlight strong {
	display: block;

	color: var(--navy);

	font-size: clamp(21px, 2.3vw, 29px);
	font-weight: 800;

	line-height: 1.65;
}


/* =========================================================
   TURNING
========================================================= */

.story-turning {
	padding: 130px 0;

	background:
		linear-gradient(145deg,
			#e8faf8 0%,
			#fff 65%,
			#fff8ec 100%);
}

.story-turning>.story-container>h2 {
	max-width: 930px;

	margin: 0 0 55px;

	color: var(--navy);

	font-size: clamp(40px, 4.7vw, 66px);
	font-weight: 800;

	line-height: 1.45;
	letter-spacing: -.05em;
}

.story-turning>.story-container>h2 span {
	display: block;
	color: var(--aqua-dark);
}

.story-reading {
	max-width: 760px;
}

.story-reading p {
	margin: 0 0 20px;

	font-size: 15px;
	line-height: 2.1;
}

/* =========================================================
   BIG QUOTE
========================================================= */

.story-bigquote {
	width: 100%;
	max-width: 1000px;

	margin: 65px 0;
	padding: 48px 50px;

	border: 0;
	background: var(--navy);

	color: #fff;

	font-size: clamp(26px, 2.8vw, 42px);
	font-weight: 800;

	line-height: 1.55;
	letter-spacing: -0.04em;
}

.story-bigquote__line {
	display: block;
}

.story-bigquote__line--accent {
	margin-top: .18em;
	color: var(--aqua);
}

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

	.story-bigquote {
		width: 100%;

		margin: 42px 0;

		padding: 30px 24px;

		font-size: clamp(20px, 5.4vw, 25px);
		line-height: 1.6;
		letter-spacing: -0.045em;
	}

	.story-bigquote__line {
		display: block;
	}

	.story-bigquote__line--accent {
		margin-top: .25em;
	}

}

.story-bigquote__sp {
	display: none;
}

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

	.story-bigquote__pc {
		display: none;
	}

	.story-bigquote__sp {
		display: block;
	}

}

/* =========================================================
   PAUSE
========================================================= */

.story-pause {
	position: relative;

	padding: 130px 0;

	overflow: hidden;

	background: #fff;
	text-align: center;
}

.story-pause::before {
	content: "2 YEARS";

	position: absolute;

	top: 50%;
	left: 50%;

	transform: translate(-50%, -50%);

	color: rgba(49, 206, 197, .055);

	font-family: Georgia, serif;
	font-size: clamp(100px, 20vw, 300px);
	font-style: italic;

	white-space: nowrap;

	pointer-events: none;
}

.story-pause .story-container {
	position: relative;
	z-index: 2;
}



.story-pause p {
	margin: 8px 0;

	font-size: 15px;
	line-height: 1.9;
}


/* =========================================================
   WHY SHARK
========================================================= */

.story-shark {
	position: relative;

	padding: 130px 0;

	overflow: hidden;

	background:
		radial-gradient(circle at 90% 15%,
			rgba(49, 206, 197, .12),
			transparent 30%),
		var(--deep);
}

.story-shark::before {
	content: "";

	position: absolute;

	right: -7vw;
	top: 7%;

	width: min(50vw, 720px);
	aspect-ratio: 1;

	background:
		url("../img/shark-heading-icon.png") center / contain no-repeat;

	opacity: .035;

	pointer-events: none;
}

.story-shark>.story-container {
	position: relative;
	z-index: 2;
}

.story-heading--white h2 {
	color: #fff;
}

.story-heading--white h2 span {
	color: var(--aqua);
}

.story-shark__intro {
	max-width: 720px;
	margin-bottom: 55px;
}

.story-shark__intro p {
	margin: 0 0 17px;

	color: rgba(255, 255, 255, .66);

	font-size: 15px;
	line-height: 2;
}

.story-shark__grid {
	display: grid;

	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 16px;
}

.story-shark-card {
	min-width: 0;

	padding: 30px 27px;

	border: 1px solid rgba(49, 206, 197, .23);
	border-radius: 22px;

	background: rgba(255, 255, 255, .035);
}

.story-shark-card>span {
	display: block;

	color: var(--aqua);

	font-family: Georgia, serif;
	font-size: 42px;

	line-height: 1;
}

.story-shark-card h3 {
	margin: 24px 0 16px;

	color: #fff;

	font-size: 19px;
	line-height: 1.55;
}

.story-shark-card p {
	margin: 0;

	color: rgba(255, 255, 255, .6);

	font-size: 13px;
	line-height: 1.95;
}

.story-manifesto {
	max-width: 1000px;

	margin: 90px auto 0;

	padding-top: 65px;

	border-top: 1px solid rgba(49, 206, 197, .23);

	text-align: center;
}

.story-manifesto small {
	color: var(--aqua);

	font-size: 10px;
	font-weight: 800;
	letter-spacing: .2em;
}

.story-manifesto h2 {
	margin: 28px 0;

	color: #fff;

	font-size: clamp(36px, 4.4vw, 60px);
	font-weight: 800;

	line-height: 1.5;
	letter-spacing: -.045em;
}

.story-manifesto h2 span {
	display: block;
	color: var(--aqua);
}

.story-manifesto p {
	max-width: 720px;

	margin: 10px auto;

	color: rgba(255, 255, 255, .66);

	font-size: 15px;
	line-height: 2;
}

.story-manifesto>strong {
	display: block;

	margin-top: 48px;

	color: var(--aqua);

	font-size: 20px;
	letter-spacing: .14em;
}


/* =========================================================
   RING
========================================================= */

.story-ring {
	padding: 120px 0;

	background:
		radial-gradient(circle at 90% 10%,
			rgba(245, 188, 108, .16),
			transparent 28%),
		linear-gradient(145deg,
			#fff,
			#edfafa);
}

/* =========================================================
   RING TAGS
========================================================= */

.story-ring__visual {
	display: grid;

	grid-template-columns: repeat(3, minmax(0, 1fr));

	width: 100%;
	max-width: 620px;

	gap: 14px;

	align-items: stretch;
}

.story-ring__visual span {
	display: flex;

	min-height: 68px;
	padding: 12px 16px;

	border-radius: 999px;

	background: var(--navy);
	color: #fff;

	font-size: 13px;
	font-weight: 800;
	line-height: 1;

	letter-spacing: .04em;

	align-items: center;
	justify-content: center;

	text-align: center;

	white-space: nowrap;
}

/* =========================================================
   EFFORT
========================================================= */

.story-effort {
	padding: 120px 0;

	background:
		radial-gradient(circle at 0% 100%,
			rgba(49, 206, 197, .1),
			transparent 25%),
		#fff8ed;
}

.story-effort__grid {
	display: grid;

	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 22px;
}

.story-effort-card {
	padding: 40px;

	border-radius: 28px;

	background: rgba(255, 255, 255, .94);
}

.story-effort-card__number {
	display: block;

	color: rgba(21, 159, 155, .14);

	font-family: Georgia, serif;
	font-size: 70px;

	line-height: 1;
}

.story-effort-card small {
	display: block;

	margin: 15px 0;

	color: var(--aqua-dark);

	font-size: 10px;
	font-weight: 800;
	letter-spacing: .18em;
}

.story-effort-card h3 {
	max-width: 410px;

	margin: 0 0 24px;

	color: var(--navy);

	font-size: clamp(24px, 2.5vw, 31px);
	line-height: 1.55;
}

.story-effort-card p {
	margin: 0 0 14px;

	font-size: 14px;
	line-height: 2;
}

.story-effort__message {
	margin-top: 58px;

	padding: 52px;

	border-radius: 32px;

	background: var(--navy);
}

.story-effort__message small {
	color: var(--aqua);

	font-size: 10px;
	font-weight: 800;
	letter-spacing: .18em;
}

.story-effort__message h2 {
	max-width: 850px;

	margin: 25px 0;

	color: #fff;

	font-size: clamp(32px, 4vw, 52px);
	line-height: 1.55;
}

.story-effort__message h2 span {
	display: block;
	color: var(--aqua);
}

.story-effort__message p {
	max-width: 760px;

	margin: 0 0 13px;

	color: rgba(255, 255, 255, .65);

	font-size: 14px;
	line-height: 2;
}


/* =========================================================
   FUTURE
========================================================= */

.story-future {
	padding: 120px 0;

	background:
		radial-gradient(circle at 92% 15%,
			rgba(245, 188, 108, .18),
			transparent 29%),
		linear-gradient(140deg,
			#fff,
			#f1fbfa);
}


/* =========================================================
   TRUE NORTH
========================================================= */

.story-north {
	padding: 135px 0;

	background:
		radial-gradient(circle at center,
			rgba(49, 206, 197, .09),
			transparent 42%),
		var(--deep);

	text-align: center;
}

.story-north .story-en {
	color: var(--aqua);
}

.story-north h2 {
	margin: 18px 0 0;

	color: #fff;

	font-family:
		Georgia,
		"Times New Roman",
		serif;

	font-size: clamp(64px, 9vw, 130px);
	font-weight: 400;

	line-height: 1;
	letter-spacing: -.045em;

	white-space: nowrap;
}


/* =========================================================
   MESSAGE
========================================================= */

.story-message {
	padding: 120px 0;

	background:
		radial-gradient(circle at 90% 0%,
			rgba(245, 188, 108, .17),
			transparent 25%),
		linear-gradient(145deg,
			#eafaf8,
			#fff 55%,
			#fff8ed);
}

.story-message__card {
	max-width: 840px;

	margin-inline: auto;

	padding: 52px;

	border-radius: 34px;

	background: #fff;

	box-shadow:
		0 20px 60px rgba(6, 62, 71, .08);
}

.story-message__card p {
	margin: 0 0 21px;

	font-size: 15px;
	line-height: 2.05;
}

.story-message__card h3 {
	margin: 42px 0;

	color: var(--navy);

	font-size: clamp(24px, 3vw, 32px);
	font-weight: 800;

	line-height: 1.65;
}

.story-message__card>strong {
	display: block;

	margin-top: 43px;

	color: var(--aqua-dark);

	font-size: clamp(27px, 3.5vw, 39px);
	font-weight: 800;

	line-height: 1.58;
}

.story-sign {
	margin-top: 38px !important;

	color: var(--navy);
}

.story-sign b {
	font-size: 21px;
}


/* =========================================================
   FINAL CTA
========================================================= */

.story-final-cta {
	margin-top: 90px;

	text-align: center;
}

.story-final-cta>small {
	color: var(--aqua-dark);

	font-size: 10px;
	font-weight: 800;
	letter-spacing: .18em;
}

.story-final-cta h2 {
	margin: 18px 0 34px;

	color: var(--navy);

	font-size: clamp(30px, 3.5vw, 44px);
	line-height: 1.45;
}

.story-final-cta__buttons {
	display: flex;

	justify-content: center;

	gap: 14px;
}

.story-final-cta__buttons a {
	display: flex;

	width: min(310px, 100%);
	min-height: 68px;

	padding: 15px 24px;

	border-radius: 999px;

	align-items: center;
	justify-content: center;

	text-decoration: none;

	font-size: 14px;
	font-weight: 800;

	transition:
		transform .25s ease,
		opacity .25s ease;
}

.story-final-cta__buttons a:hover {
	transform: translateY(-3px);
}

.story-final-cta__buttons a:first-child {
	background: var(--aqua);

	color: var(--navy);
}

.story-final-cta__buttons a:last-child {
	border: 1px solid var(--navy);

	color: var(--navy);
}


/* =========================================================
   LARGE DESKTOP
   1600px〜
========================================================= */

@media screen and (min-width: 1600px) {

	.story-container {
		width: min(1280px, calc(100% - 96px));
	}

	.story-hero__content {
		width: min(100%, 920px);
	}

	.story-hero__title {
		font-size: 72px;
	}

	.story-split {
		gap: 95px;
	}
}


/* =========================================================
   TABLET / SMALL PC
   769〜1199
========================================================= */

@media screen and (min-width: 769px) and (max-width: 1199px) {

	.story-container {
		width: min(calc(100% - 48px), 1000px);
	}

	.story-hero__title {
		font-size: clamp(43px, 5.1vw, 58px);
	}

	.story-split {
		gap: 45px;
	}

	.story-shark__grid {
		grid-template-columns:
			repeat(2, minmax(0, 1fr));
	}
}


/* =========================================================
   SP
   〜768px
========================================================= */

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

	.story-container {
		width: calc(100% - 34px);
	}


	/* HERO */

	.story-hero {
		min-height: auto;
	}

	.story-hero__bg {
		background:
			linear-gradient(to bottom,
				rgba(4, 53, 61, .22) 0%,
				rgba(4, 53, 61, .50) 43%,
				rgba(4, 53, 61, .94) 78%,
				#05353d 100%),
			url("../img/NS_00113.jpg") 58% center / cover no-repeat;
	}

	.story-hero__inner {
		min-height: 680px;

		align-items: flex-end;
	}

	.story-hero__content {
		width: 100%;

		padding: 90px 0 48px;
	}

	.story-hero__title {
		font-size: clamp(31px, 9vw, 42px);

		line-height: 1.3;
		letter-spacing: -.04em;
	}

	.story-hero__title span,
	.story-hero__title em {
		width: 100%;
	}

	.story-hero__lead {
		margin-top: 28px;

		font-size: 13px;
		line-height: 1.9;
	}

	.story-hero__profile {
		margin-top: 25px;
	}

	.story-scroll {
		margin-top: 28px;
	}


	/* heading */

	.story-heading {
		margin-bottom: 36px;
	}

	.story-heading h2 {
		font-size: clamp(29px, 8.5vw, 36px);
		line-height: 1.52;
	}


	/* index */

	.story-index {
		padding: 75px 0 85px;
	}

	.story-index::before {
		right: -20px;
		top: 20px;

		font-size: 125px;
	}

	.story-index__grid {
		grid-template-columns: 1fr;

		gap: 11px;
	}

	.story-index-card {
		min-height: 160px;

		padding: 23px;
	}

	.story-index-card__number {
		font-size: 49px;
	}

	.story-index-card strong {
		max-width: 100%;

		font-size: 18px;
		line-height: 1.6;
	}


	/* section */

	.story-section,
	.story-ring,
	.story-future {
		padding: 78px 0;
	}

	.story-split,
	.story-split--reverse {
		display: flex;

		flex-direction: column;

		gap: 42px;
	}

	.story-split--reverse> :first-child,
	.story-split--reverse> :last-child {
		order: initial;
	}

	.story-photo {
		height: min(120vw, 470px);

		border-radius:
			48px 5px 48px 5px;

		box-shadow:
			10px 10px 0 rgba(49, 206, 197, .13);
	}

	.story-copy h2 {
		font-size: clamp(29px, 8vw, 36px);

		line-height: 1.55;

		margin-bottom: 25px;
	}

	.story-copy p {
		font-size: 14px;
		line-height: 2;
	}

	.story-copy blockquote {
		padding: 23px;
		font-size: 19px;
	}


	/* highlight */

	.story-highlight {
		margin: 32px 0;

		padding: 25px 22px;
	}


	/* turning */

	.story-turning {
		padding: 82px 0;
	}

	.story-turning>.story-container>h2 {
		margin-bottom: 38px;

		font-size: clamp(30px, 8.5vw, 38px);
		line-height: 1.57;
	}

	.story-reading p {
		font-size: 14px;
	}

	.story-bigquote {
		margin: 45px 0;

		padding: 28px 23px;

		font-size: clamp(23px, 6.5vw, 29px);
		line-height: 1.65;
	}


	/* pause */

	.story-pause {
		padding: 85px 0;
	}

	.story-pause::before {
		font-size: 115px;
	}

	.story-pause h2 {
		font-size: clamp(31px, 9vw, 40px);
		line-height: 1.5;
	}


	/* shark */

	.story-shark {
		padding: 85px 0;
	}

	.story-shark::before {
		width: 360px;

		right: -150px;
		top: 7%;
	}

	.story-shark__grid {
		grid-template-columns: 1fr;
		gap: 12px;
	}

	.story-shark-card {
		padding: 27px 23px;
	}

	.story-manifesto {
		margin-top: 65px;

		padding-top: 48px;

		text-align: left;
	}

	.story-manifesto h2 {
		font-size: clamp(28px, 8vw, 35px);
		line-height: 1.65;
	}

	.story-manifesto p {
		font-size: 14px;
	}

	/* effort */

	.story-effort {
		padding: 80px 0;
	}

	.story-effort__grid {
		grid-template-columns: 1fr;
		gap: 13px;
	}

	.story-effort-card {
		padding: 28px 23px;
	}

	.story-effort-card__number {
		font-size: 55px;
	}

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

	.story-effort__message {
		margin-top: 38px;

		padding: 32px 23px;

		border-radius: 24px;
	}

	.story-effort__message h2 {
		font-size: clamp(27px, 7.7vw, 34px);
		line-height: 1.65;
	}


	/* true north */

	.story-north {
		padding: 95px 0;
	}

	.story-north h2 {
		font-size: clamp(42px, 13vw, 59px);
	}


	/* message */

	.story-message {
		padding: 82px 0;
	}

	.story-message__card {
		padding: 32px 23px;

		border-radius: 24px;
	}

	.story-message__card p {
		font-size: 14px;
	}

	.story-message__card h3 {
		margin: 35px 0;

		font-size: 24px;
		line-height: 1.7;
	}

	.story-message__card>strong {
		font-size: 27px;
	}


	/* CTA */

	.story-final-cta {
		margin-top: 70px;
	}

	.story-final-cta h2 {
		font-size: 30px;
	}

	.story-final-cta__buttons {
		flex-direction: column;

		gap: 10px;

		align-items: center;
	}

	.story-final-cta__buttons a {
		width: 100%;
	}
}


/* =========================================================
   SMALL SP
========================================================= */

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

	.story-container {
		width: calc(100% - 28px);
	}

	.story-hero__title {
		font-size: 30px;
	}

	.story-heading h2,
	.story-copy h2 {
		font-size: 28px;
	}

	.story-turning>.story-container>h2 {
		font-size: 29px;
	}

	.story-north h2 {
		font-size: 42px;
	}
}

/* =========================================================
   SP ACCORDION MENU
========================================================= */

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

	.sp-accordion-menu {
		width: 100%;
	}

	.sp-accordion-toggle {
		display: flex;

		width: 100%;
		padding: 14px 0;

		border: 0;
		background: transparent;

		color: #063e47;

		font: inherit;
		font-size: 18px;

		align-items: center;
		justify-content: center;

		gap: 10px;

		cursor: pointer;
	}

	.sp-accordion-toggle .arrow {
		display: inline-block;

		color: #15aaa5;

		font-size: 22px;
		line-height: 1;

		transition: transform .3s ease;
	}


	/* 最初は閉じる */

	.sp-accordion-list {
		display: none;

		width: 100%;

		margin: 0;
		padding: 5px 0 18px;

		list-style: none;
	}


	/* 開いた状態 */

	.sp-accordion-menu.is-open>.sp-accordion-list {
		display: block;
	}

	.sp-accordion-menu.is-open>.sp-accordion-toggle .arrow {
		transform: rotate(45deg);
	}


	/* 子メニュー */

	.sp-accordion-list li {
		margin: 0;
		padding: 0;
	}

	.sp-accordion-list li a {
		display: block;

		padding: 10px 15px;

		color: #62777c;

		font-size: 14px;
		line-height: 1.6;

		text-align: center;
		text-decoration: none;
	}

}

/* =========================================================
   PHILOSOPHY
========================================================= */

.story-philosophy {
	position: relative;
	padding: 140px 0;
	overflow: hidden;
	background: #fff;
	text-align: center;
}

.story-philosophy::before {
	content: "WHAT I LEARNED";

	position: absolute;
	top: 50%;
	left: 50%;

	transform: translate(-50%, -50%);

	color: rgba(21, 159, 155, .045);

	font-size: clamp(85px, 13vw, 210px);
	font-weight: 900;
	line-height: 1;

	white-space: nowrap;
	pointer-events: none;
}

.story-philosophy .story-container {
	position: relative;
	z-index: 2;
}


/* WHAT I LEARNED */

.story-philosophy .story-en {
	margin: 0 0 35px;

	color: var(--aqua-dark);

	font-size: 12px;
	font-weight: 800;

	letter-spacing: .2em;
}


/* 見出し */

.story-philosophy__title {
	width: 100%;
	max-width: 1200px;

	margin: 0 auto;

	color: var(--navy);

	font-size: clamp(38px, 3.8vw, 60px);
	font-weight: 800;

	line-height: 1.55;
	letter-spacing: -.045em;

	text-align: center;
}


/* 1行ずつ指定 */

.story-philosophy__line {
	display: block;
}


/* 水色の行 */

.story-philosophy__line--accent {
	color: var(--aqua-dark);
}


/* 本文 */

.story-philosophy__text {
	max-width: 760px;

	margin: 50px auto 0;
}

.story-philosophy__text p {
	margin: 0 0 16px;

	font-size: 15px;
	line-height: 2;

	color: var(--text);
}


/* =========================================================
   PHILOSOPHY SP
========================================================= */

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

	.story-philosophy {
		padding: 80px 0;
		text-align: left;
	}

	.story-philosophy::before {
		top: 50%;
		left: -10px;

		transform: translateY(-50%);

		font-size: 88px;
	}

	.story-philosophy .story-en {
		margin-bottom: 30px;

		font-size: 12px;

		text-align: left;
	}

	.story-philosophy__title {
		width: 100%;
		max-width: none;

		margin: 0;

		font-size: clamp(20px, 5.6vw, 27px);
		line-height: 1.65;
		letter-spacing: -.045em;

		text-align: left;
	}

	.story-philosophy__line {
		display: block;

		width: max-content;
		max-width: 100%;

		white-space: nowrap;
	}

	.story-philosophy__line--accent {
		margin: .08em 0;

		color: var(--aqua-dark);
	}

	.story-philosophy__text {
		max-width: none;

		margin: 42px 0 0;
	}

	.story-philosophy__text p {
		margin-bottom: 17px;

		font-size: 14px;
		line-height: 1.95;
	}
}


/* =========================================================
   PHILOSOPHY SMALL SP
========================================================= */

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

	.story-philosophy__title {
		font-size: 20px;
	}

}

.story-pause__title {
	margin: 20px 0 35px;

	color: var(--navy);

	font-size: clamp(38px, 5vw, 70px);
	font-weight: 800;

	line-height: 1.4;
	letter-spacing: -0.045em;

	text-align: center;
}

.story-pause__line {
	display: block;
}

.story-pause__line--accent {
	color: var(--aqua-dark);
}

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

	.story-pause__title {
		font-size: clamp(28px, 7.6vw, 36px);
		line-height: 1.45;
		letter-spacing: -0.045em;
	}

	.story-pause__line {
		display: block;
		width: 100%;
	}

	.story-pause__line--accent {
		white-space: nowrap;
	}

}

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

	.story-pause__title {
		font-size: 27px;
	}

}

.story-manifesto__title {
	margin: 28px 0;

	color: #fff;

	font-size: clamp(36px, 4.4vw, 60px);
	font-weight: 800;

	line-height: 1.5;
	letter-spacing: -0.045em;

	text-align: center;
}

.story-manifesto__line {
	display: block;
}

.story-manifesto__line--accent {
	color: var(--aqua);
}

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

	.story-manifesto__title {
		margin: 24px 0;

		font-size: clamp(18px, 5.1vw, 24px);
		line-height: 1.55;
		letter-spacing: -0.05em;

		text-align: left;
	}

	.story-manifesto__line {
		display: block;
		width: max-content;
		max-width: 100%;

		white-space: nowrap;
	}

	.story-manifesto__line--accent {
		margin-top: .18em;
		color: var(--aqua);
	}
}

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

	.story-manifesto__title {
		font-size: 18px;
	}
}

/* =========================================
   SHARK STYLE PHILOSOPHY 見出し 最終調整
========================================= */

.story-manifesto__title {
	margin: 28px 0;
	color: #fff;
	font-size: clamp(36px, 4.4vw, 60px);
	font-weight: 800;
	line-height: 1.5;
	letter-spacing: -0.045em;
	text-align: center;
}

.story-manifesto__line {
	display: block;
}

.story-manifesto__line--accent {
	color: var(--aqua);
}


/* SP */
@media screen and (max-width: 768px) {

	.story-manifesto__title {
		margin: 24px 0;
		font-size: 20px !important;
		line-height: 1.65;
		letter-spacing: -0.06em;
		text-align: left;
	}

	.story-manifesto__line {
		display: block;
		width: 100%;
		max-width: 100%;
		white-space: nowrap;
	}

	.story-manifesto__line--accent {
		margin-top: 4px;
		color: var(--aqua);
	}
}


/* 小さいスマホ */
@media screen and (max-width: 390px) {

	.story-manifesto__title {
		font-size: 18px !important;
		letter-spacing: -0.07em;
	}

}

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

	.story-ring__visual {
		grid-template-columns: repeat(2, minmax(0, 1fr));

		width: 100%;
		max-width: none;

		gap: 10px;
	}

	.story-ring__visual span {
		min-height: 56px;

		padding: 10px 8px;

		font-size: 12px;
		letter-spacing: .02em;
	}

}

.story-ring__visual {
	margin-inline: auto;
}

/* =========================================================
   WHY MMA RING
========================================================= */

.story-ring {
	position: relative;
	overflow: hidden;

	padding: 120px 0;

	background:
		radial-gradient(circle at 85% 20%,
			rgba(49, 206, 197, .14),
			transparent 28%),
		linear-gradient(135deg,
			#f9ffff 0%,
			#edfafa 55%,
			#fff8ed 100%);
}


/* 金網っぽい薄い背景 */

.story-ring::before {
	content: "";

	position: absolute;
	inset: 0;

	background-image:
		linear-gradient(45deg,
			rgba(6, 62, 71, .035) 25%,
			transparent 25%,
			transparent 75%,
			rgba(6, 62, 71, .035) 75%),
		linear-gradient(-45deg,
			rgba(6, 62, 71, .035) 25%,
			transparent 25%,
			transparent 75%,
			rgba(6, 62, 71, .035) 75%);

	background-size: 38px 38px;
	background-position:
		0 0,
		19px 19px;

	opacity: .35;

	pointer-events: none;
}


/* 大きな装飾文字 */

.story-ring::after {
	content: "MMA RING";

	position: absolute;

	right: -20px;
	bottom: -35px;

	color: rgba(21, 159, 155, .045);

	font-size: clamp(90px, 13vw, 210px);
	font-weight: 900;
	font-style: italic;

	line-height: 1;

	white-space: nowrap;

	pointer-events: none;
}


.story-ring .story-container {
	position: relative;
	z-index: 2;
}


/* =========================================================
   RING USE CARDS
========================================================= */

.story-ring__visual {
	display: grid;

	grid-template-columns: repeat(2, minmax(0, 1fr));

	width: 100%;
	max-width: 620px;

	gap: 14px;
}


/* 共通カード */

.story-ring__visual span {
	position: relative;

	display: flex;

	min-height: 92px;

	padding: 18px 24px;

	overflow: hidden;

	border:
		1px solid rgba(6, 62, 71, .16);

	border-radius:
		26px 6px 26px 6px;

	background:
		rgba(255, 255, 255, .78);

	color: var(--navy);

	font-size: 14px;
	font-weight: 900;
	letter-spacing: .06em;

	align-items: center;
	justify-content: center;

	text-align: center;

	box-shadow:
		8px 8px 0 rgba(49, 206, 197, .12);

	backdrop-filter: blur(8px);

	transition:
		transform .25s ease,
		background .25s ease,
		color .25s ease,
		box-shadow .25s ease;
}


/* 左上に番号 */

.story-ring__visual span::before {
	counter-increment: ringItem;
	content: "0" counter(ringItem);

	position: absolute;

	top: 9px;
	left: 12px;

	color: rgba(21, 159, 155, .35);

	font-size: 10px;
	font-weight: 900;
	letter-spacing: .12em;
}


.story-ring__visual {
	counter-reset: ringItem;
}


/* 下にライン */

.story-ring__visual span::after {
	content: "";

	position: absolute;

	left: 18px;
	right: 18px;
	bottom: 10px;

	height: 2px;

	background:
		linear-gradient(90deg,
			var(--aqua),
			transparent);
}


/* hover */

.story-ring__visual span:hover {
	transform: translateY(-5px);

	background: var(--navy);
	color: #fff;

	box-shadow:
		10px 10px 0 rgba(49, 206, 197, .18);
}

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

	.story-ring {
		padding: 82px 0;
	}

	.story-ring::after {
		right: -80px;
		bottom: 10px;

		font-size: 92px;
	}

	.story-ring__visual {
		grid-template-columns: repeat(2, minmax(0, 1fr));

		gap: 10px;
	}

	.story-ring__visual span {
		min-height: 74px;

		padding: 15px 8px;

		border-radius:
			20px 5px 20px 5px;

		font-size: 11px;
	}

}

/* =========================================================
   THE FUTURE
   WEST COAST / CALIFORNIA STYLE
========================================================= */

.story-future {
	position: relative;
	overflow: hidden;

	padding: 120px 0;

	background:
		/* 左下 Pacific Ocean */
		radial-gradient(ellipse at 0% 100%,
			rgba(49, 206, 197, .22) 0%,
			rgba(49, 206, 197, .10) 28%,
			transparent 52%),

		/* 右上 California Sun */
		radial-gradient(circle at 92% 7%,
			rgba(244, 190, 92, .32) 0%,
			rgba(244, 190, 92, .17) 18%,
			rgba(244, 190, 92, .05) 38%,
			transparent 52%),

		/* 空色 */
		linear-gradient(145deg,
			#eefafa 0%,
			#f7fcfb 30%,
			#fffdf7 62%,
			#fff4df 100%);
}


/* =========================================================
   太陽
========================================================= */

.story-future::before {
	content: "";

	position: absolute;

	top: -185px;
	right: -130px;

	width: 500px;
	height: 500px;

	border-radius: 50%;

	border: 1px solid rgba(225, 177, 88, .20);

	box-shadow:
		0 0 0 70px rgba(244, 190, 92, .035),
		0 0 0 140px rgba(244, 190, 92, .018);

	pointer-events: none;
}


/* =========================================================
   海・水平線
========================================================= */

.story-future::after {
	content: "";

	position: absolute;

	left: -5%;
	bottom: 55px;

	width: 58%;
	height: 110px;

	border-top:
		2px solid rgba(49, 206, 197, .22);

	border-radius: 50% 50% 0 0;

	transform: rotate(-2deg);

	box-shadow:
		0 -18px 0 -16px rgba(49, 206, 197, .13),
		0 -36px 0 -34px rgba(49, 206, 197, .10);

	pointer-events: none;
}


.story-future .story-container {
	position: relative;
	z-index: 2;
}


/* ========================================
   メッセージ見出し
======================================== */

.story-message-title span {
	display: block;
}


/* PC */
@media screen and (min-width: 769px) {

	.story-message-title {
		font-size: 42px;
		line-height: 1.55;
		letter-spacing: -0.03em;
	}

	.story-message-title span {
		white-space: nowrap;
	}

}


/* SP */
@media screen and (max-width: 768px) {

	.story-message-title {
		font-size: 30px;
		line-height: 1.55;
		letter-spacing: -0.04em;
	}

	/* SPは自然な折り返しに戻す */
	.story-message-title span {
		display: inline;
		white-space: normal;
	}

}

/* =========================================================
   WORKING ADULT 最終調整
========================================================= */

.story-section--working {
	overflow: hidden;

	background:
		radial-gradient(circle at 0% 100%,
			rgba(49, 206, 197, .12),
			transparent 27%),
		#fff8ed;
}


/* PC */
@media screen and (min-width: 769px) {

	.story-section--working .story-split {
		display: grid;

		grid-template-columns:
			minmax(0, .95fr) minmax(0, 1.05fr);

		gap: clamp(50px, 5vw, 80px);

		align-items: center;
	}


	.story-section--working .story-copy {
		min-width: 0;
		width: 100%;
	}


	.story-section--working .story-copy h2 {
		width: 100%;
		max-width: 650px;

		font-size: clamp(34px, 3.4vw, 52px);
		line-height: 1.48;
	}


	.story-section--working .story-copy p {
		width: 100%;
		max-width: 680px;

		overflow-wrap: anywhere;
	}


	.story-section--working .story-highlight {
		width: 100%;
		max-width: 100%;

		margin: 38px 0;

		padding: 30px 34px;

		box-sizing: border-box;
	}


	.story-section--working .story-highlight strong {
		display: block;

		width: 100%;
		max-width: 100%;

		font-size: clamp(20px, 2vw, 28px);
		line-height: 1.6;

		white-space: normal;
		overflow-wrap: break-word;
		word-break: normal;
	}

}

/* =========================================================
   WORKING ADULT SP
========================================================= */

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

	.story-section--working {
		padding: 78px 0;
		overflow: hidden;
	}


	.story-section--working .story-container {
		width: calc(100% - 34px);
		margin-inline: auto;
	}


	.story-section--working .story-split {
		display: flex;

		width: 100%;

		flex-direction: column;
		gap: 44px;
	}


	.story-section--working .story-photo {
		width: 100%;
		height: auto;

		aspect-ratio: 4 / 5;

		margin: 0;

		border-radius:
			48px 5px 48px 5px;
	}


	.story-section--working .story-photo img {
		width: 100%;
		height: 100%;

		object-fit: cover;
		object-position: center;
	}


	.story-section--working .story-copy {
		width: 100%;
		min-width: 0;
	}


	.story-section--working .story-en {
		width: 100%;
	}


	.story-section--working .story-copy h2 {
		width: 100%;
		max-width: 100%;

		margin-bottom: 28px;

		font-size: clamp(27px, 7.2vw, 34px);
		line-height: 1.55;

		overflow-wrap: normal;
		word-break: normal;
	}


	.story-section--working .story-copy p {
		width: 100%;
		max-width: 100%;

		font-size: 14px;
		line-height: 2;

		overflow-wrap: anywhere;
	}


	.story-section--working .story-highlight {
		width: 100%;
		max-width: 100%;

		margin: 32px 0;

		padding: 25px 22px;

		box-sizing: border-box;
	}


	.story-section--working .story-highlight strong {
		display: block;

		width: 100%;
		max-width: 100%;

		font-size: clamp(20px, 5.8vw, 26px);
		line-height: 1.6;

		white-space: normal;
		overflow-wrap: normal;
		word-break: keep-all;
	}

}

/* =========================================================
   WORKING ADULT PHOTO SP 最終修正
========================================================= */

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

	.story-section--working .story-container {
		width: calc(100% - 40px);
		max-width: 100%;
		margin-inline: auto;
	}

	.story-section--working .story-photo {
		display: block;

		width: calc(100% - 10px);
		max-width: 100%;

		height: auto;
		aspect-ratio: 1 / 1;

		margin: 0 auto;

		overflow: hidden;

		border-radius: 46px 5px 46px 5px;

		box-shadow:
			10px 10px 0 rgba(49, 206, 197, .13);
	}

	.story-section--working .story-photo img {
		display: block;

		width: 100%;
		height: 100%;

		max-width: 100%;

		object-fit: cover;

		/* 顔を残しつつ右側も見せる */
		object-position: 48% center;
	}

}

/* =========================================
   ANOTHER LIFE 見出し
========================================= */

.another-title {
	margin: 0;
	color: #003f49;
	font-size: clamp(30px, 2.2vw, 38px);
	font-weight: 800;
	line-height: 1.45;
	letter-spacing: -0.035em;
}

.another-title__pc {
	display: block;
}

.another-title__sp {
	display: none;
}


/* SP */
@media screen and (max-width: 768px) {

	.another-title {
		font-size: clamp(26px, 7vw, 31px);
		line-height: 1.55;
	}

	.another-title__pc {
		display: none;
	}

	.another-title__sp {
		display: block;
	}

}

/* =========================================
   EFFORT CARD 見出し PC
========================================= */

@media screen and (min-width: 769px) {

	.story-effort-card h3 {
		width: 100%;
		max-width: none;

		margin: 24px 0 30px;

		font-size: clamp(30px, 2.05vw, 36px);
		font-weight: 800;
		line-height: 1.35;
		letter-spacing: -0.045em;

		white-space: nowrap;
		word-break: keep-all;
	}

}

@media screen and (min-width: 769px) {

	.story-effort-card {
		padding: 62px 52px 58px;
	}

	.story-effort-card__number {
		margin-bottom: 16px;
	}

	.story-effort-card small {
		display: block;
		margin-bottom: 22px;
	}

	.story-effort-card h3 {
		margin: 0 0 30px;

		font-size: clamp(30px, 2.05vw, 36px);
		font-weight: 800;
		line-height: 1.35;
		letter-spacing: -0.045em;

		white-space: nowrap;
		word-break: keep-all;
	}

}

/* =========================================================
   QUICK CONTACT FINAL
========================================================= */

/* ---------- PC ---------- */
@media screen and (min-width: 769px) {

	.quick-contact {
		position: fixed;
		top: 50%;
		right: 0;
		z-index: 9999;

		display: flex;
		flex-direction: column;

		width: 50px;

		transform: translateY(-50%);
		overflow: visible;
	}

	.quick-contact__item {
		position: relative;

		display: block;

		width: 50px;
		height: 58px;

		margin: 0;
		padding: 0;

		overflow: visible;

		color: #fff;
		text-decoration: none;

		border: 0;
		border-radius: 0;
	}

	/* 背景 */
	.quick-contact__item::before {
		content: "";

		position: absolute;
		top: 0;
		right: 0;

		width: 50px;
		height: 58px;

		z-index: -1;

		transition: width .25s ease;
	}

	.quick-contact__tel::before {
		background: #075865;
	}

	.quick-contact__access::before {
		background: #15958f;
	}

	.quick-contact__mail::before {
		background: #2fc4be;
	}

	/* hoverで左へ展開 */
	.quick-contact__item:hover::before {
		width: 185px;
	}

	/* アイコン */
	.quick-contact__icon {
		position: absolute;
		top: 0;
		right: 0;

		display: flex;
		align-items: center;
		justify-content: center;

		width: 50px;
		height: 58px;

		margin: 0;
		padding: 0;

		background: transparent;

		color: #fff;
	}

	.quick-contact__icon i {
		color: #fff;
		font-size: 17px;
	}

	/* 電話だけ少し小さく */
	.quick-contact__tel .quick-contact__icon i {
		font-size: 15px;
	}

	/* 文字 */
	.quick-contact__text {
		position: absolute;
		top: 0;
		right: 50px;

		display: flex;
		align-items: center;
		justify-content: center;

		width: 135px;
		height: 58px;

		gap: 7px;

		padding: 0 10px;

		opacity: 0;
		visibility: hidden;

		transform: translateX(10px);

		transition:
			opacity .18s ease,
			transform .18s ease,
			visibility .18s ease;
	}

	.quick-contact__item:hover .quick-contact__text {
		opacity: 1;
		visibility: visible;

		transform: translateX(0);
	}

	.quick-contact__text strong {
		color: #fff;

		font-size: 13px;
		font-weight: 700;

		white-space: nowrap;
	}

	.quick-contact__text small {
		color: rgba(255, 255, 255, .7);

		font-size: 8px;
		font-weight: 700;

		white-space: nowrap;
	}
}


/* ---------- SP ---------- */
@media screen and (max-width: 768px) {

	.quick-contact {
		position: fixed;

		top: auto;
		right: 0;
		bottom: 0;
		left: 0;

		z-index: 9999;

		display: grid;
		grid-template-columns: repeat(3, 1fr);

		width: 100%;
		height: 64px;

		transform: none;
	}

	.quick-contact__item {
		display: flex;

		align-items: center;
		justify-content: center;

		width: 100%;
		height: 64px;

		color: #fff;
		text-decoration: none;
	}

	.quick-contact__tel {
		background: #075865;
	}

	.quick-contact__access {
		background: #15958f;
	}

	.quick-contact__mail {
		background: #2fc4be;
	}

	.quick-contact__icon {
		position: static;

		display: flex;
		align-items: center;
		justify-content: center;

		width: 30px;
		height: 30px;

		margin-right: 7px;

		border-radius: 50%;

		background: #fff;

		color: #063e47;
	}

	.quick-contact__icon i {
		color: #063e47;
		font-size: 13px;
	}

	.quick-contact__text {
		position: static;

		display: flex;
		flex-direction: column;

		width: auto;
		height: auto;

		opacity: 1;
		visibility: visible;

		transform: none;
	}

	.quick-contact__text strong {
		color: #fff;
		font-size: 11px;
		font-weight: 700;
	}

	.quick-contact__text small {
		display: none;
	}

	body {
		padding-bottom: 64px;
	}
}