@charset "UTF-8";

/* =========================================================
   SHARK STYLE GYM
   FREE TRIAL / MAILFORM PAGE
   header / footer / SP menu は common.css に任せる
========================================================= */


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

.trial-page {
	position: relative;
	width: 100%;
	overflow: hidden;

	color: #5f7479;
	background: #fff8ed;
}

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


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

.trial-hero {
	position: relative;

	display: flex;
	align-items: center;

	min-height: 720px;

	padding: 110px 55px 170px;

	overflow: hidden;

	background:
		linear-gradient(90deg,
			rgba(255, 255, 255, .93) 0%,
			rgba(255, 255, 255, .84) 38%,
			rgba(255, 255, 255, .32) 70%,
			rgba(255, 255, 255, .12) 100%),
		url("../img/blog-westcoast-bg.png") center center / cover no-repeat;
}


/* 西海岸っぽいターコイズの光 */
.trial-hero::before {
	content: "";

	position: absolute;

	left: -170px;
	bottom: -220px;

	width: 520px;
	height: 520px;

	border-radius: 50%;

	background:
		radial-gradient(circle,
			rgba(49, 206, 197, .18),
			rgba(49, 206, 197, .05) 45%,
			transparent 70%);

	pointer-events: none;
}


/* 右上の陽射し */
.trial-hero::after {
	content: "";

	position: absolute;

	top: -160px;
	right: -120px;

	width: 440px;
	height: 440px;

	border-radius: 50%;

	background:
		radial-gradient(circle,
			rgba(245, 188, 108, .22),
			rgba(245, 188, 108, .06) 45%,
			transparent 72%);

	pointer-events: none;
}


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

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

	margin: 0 auto;
}


.trial-hero__en {
	margin: 0 0 20px;

	color: #159f9b;

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

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


.trial-hero__title {
	max-width: 860px;

	margin: 0;

	color: #063e47;

	font-size: clamp(46px, 5vw, 74px);
	font-weight: 800;

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


.trial-hero__title span {
	color: #19b7b0;
}


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

	margin: 36px 0 0;

	color: #567076;

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


.trial-hero__note {
	display: inline-flex;

	align-items: center;
	gap: 16px;

	margin-top: 32px;

	padding: 14px 22px;

	border: 1px solid rgba(21, 159, 155, .16);
	border-radius: 999px;

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

	color: #4e676d;

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

	box-shadow:
		0 10px 30px rgba(6, 62, 71, .06);

	backdrop-filter: blur(8px);
}


.trial-hero__note span {
	color: #159f9b;

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

	letter-spacing: .16em;
}

/* =========================================================
   FORM AREA
========================================================= */

.trial-form-section {
	position: relative;
	z-index: 5;

	padding: 80px 24px 140px;

	background:
		linear-gradient(180deg,
			#fff8ed 0%,
			#f8fcfb 100%);
}


.trial-form-wrap {
	position: relative;
	z-index: 10;

	width: calc(100% - 48px);
	max-width: 1480px;

	/* ★ マイナスをやめる */
	margin: 0 auto;

	padding: 72px 100px 80px;

	border: 1px solid rgba(21, 159, 155, .10);
	border-radius: 48px;

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

	box-shadow:
		0 25px 65px rgba(6, 62, 71, .11);

	backdrop-filter: blur(16px);
}


.trial-form {
	width: 100%;
	max-width: 1180px;
	margin: 0 auto;
}


.trial-form {
	width: 100%;
	max-width: 1180px;

	margin: 0 auto;
}

/* 上部ターコイズライン */
.trial-form-wrap::before {
	content: "";

	position: absolute;

	top: 0;
	left: 50%;

	width: 120px;
	height: 5px;

	border-radius: 0 0 999px 999px;

	background:
		linear-gradient(90deg,
			#31cec5,
			#159f9b);

	transform: translateX(-50%);
}


/* =========================================================
   FORM HEAD
========================================================= */

.trial-form-head {
	max-width: 700px;

	margin: 0 auto 58px;

	text-align: center;
}


.trial-form-head__en {
	margin: 0 0 12px;

	color: #159f9b;

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

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


.trial-form-head h2 {
	margin: 0;

	color: #063e47;

	font-size: clamp(32px, 3.5vw, 46px);
	font-weight: 800;

	line-height: 1.4;
	letter-spacing: -.035em;
}


.trial-form-head>p:last-child {
	margin: 22px 0 0;

	color: #697e83;

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


/* =========================================================
   FIELD
========================================================= */

.trial-field {
	margin: 0 0 34px;
}


.trial-field label,
.trial-field legend {
	display: block;

	margin: 0 0 11px;

	color: #063e47;

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

	line-height: 1.6;
}


.required {
	display: inline-flex;

	margin-left: 7px;

	padding: 3px 8px;

	border-radius: 999px;

	background: #159f9b;

	color: #fff;

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

	line-height: 1.4;

	vertical-align: middle;
}


/* =========================================================
   INPUT / SELECT / TEXTAREA
========================================================= */

.trial-field input[type="text"],
.trial-field input[type="email"],
.trial-field input[type="tel"],
.trial-field input[type="date"],
.trial-field select,
.trial-field textarea {
	width: 100%;

	padding: 17px 18px;

	border: 1px solid #d9e5e5;
	border-radius: 11px;

	outline: none;

	background: #f9fcfc;

	color: #063e47;

	font-family: inherit;
	font-size: 15px;

	line-height: 1.6;

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


.trial-field textarea {
	min-height: 170px;

	resize: vertical;
}


.trial-field input::placeholder,
.trial-field textarea::placeholder {
	color: #9aabad;
}


.trial-field input:focus,
.trial-field select:focus,
.trial-field textarea:focus {
	border-color: #31cec5;

	background: #fff;

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


/* =========================================================
   DATE / TIME 2 COLUMN
========================================================= */

.trial-field-row {
	display: grid;

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

	gap: 24px;
}


.trial-field-row>div {
	min-width: 0;
}


/* =========================================================
   CHOICE
========================================================= */

.trial-field--choice {
	padding: 0;

	border: 0;
}


.trial-choice-grid {
	display: grid;

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

	gap: 12px;
}


.trial-choice {
	position: relative;

	display: block;

	margin: 0 !important;

	cursor: pointer;
}


.trial-choice input {
	position: absolute;

	width: 1px;
	height: 1px;

	opacity: 0;

	pointer-events: none;
}


.trial-choice span {
	display: flex;

	min-height: 58px;

	padding: 10px 12px;

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

	border: 1px solid #d7e5e5;
	border-radius: 12px;

	background: #f7fbfb;

	color: #5a7076;

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

	line-height: 1.5;

	text-align: center;

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


.trial-choice:hover span {
	border-color: rgba(21, 159, 155, .45);

	transform: translateY(-2px);
}


.trial-choice input:checked+span {
	border-color: #063e47;

	background:
		linear-gradient(135deg,
			#063e47,
			#075762);

	color: #fff;

	box-shadow:
		0 10px 25px rgba(6, 62, 71, .14);
}


/* =========================================================
   PRIVACY
========================================================= */

.trial-privacy {
	margin-top: 44px;

	padding: 21px 22px;

	border: 1px solid rgba(21, 159, 155, .10);
	border-radius: 12px;

	background: #f3fbfa;
}


.trial-privacy label {
	display: flex;

	align-items: flex-start;
	gap: 12px;

	margin: 0;

	color: #5d7378;

	font-size: 13px;

	line-height: 1.8;

	cursor: pointer;
}


.trial-privacy input {
	flex: 0 0 auto;

	width: 18px;
	height: 18px;

	margin-top: 3px;

	accent-color: #159f9b;
}


/* =========================================================
   SUBMIT
========================================================= */

.trial-submit {
	margin-top: 44px;

	text-align: center;
}


.trial-submit button {
	position: relative;

	display: block;

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

	min-height: 94px;

	margin: 0 auto;

	padding:
		14px 94px 14px 36px;

	overflow: hidden;

	border: 0;

	background:
		linear-gradient(105deg,
			#063e47 0%,
			#075762 60%,
			#159f9b 100%);

	color: #fff;

	cursor: pointer;

	text-align: left;

	box-shadow:
		0 16px 38px rgba(6, 62, 71, .21);

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


.trial-submit button:hover {
	transform: translateY(-4px);

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


.trial-submit__small {
	display: block;

	color: #31cec5;

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

	line-height: 1.4;
	letter-spacing: .22em;
}


.trial-submit__main {
	display: block;

	margin-top: 5px;

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

	line-height: 1.45;
}


.trial-submit__arrow {
	position: absolute;

	top: 0;
	right: 0;

	display: flex;

	width: 82px;
	height: 100%;

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

	background: #31cec5;

	color: #063e47;

	font-size: 30px;
	font-weight: 400;
}


.trial-submit>p {
	margin: 17px 0 0;

	color: #829397;

	font-size: 11px;

	line-height: 1.7;
}


/* =========================================================
   TABLET
========================================================= */

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

	.trial-hero {
		min-height: 610px;
	}

	.trial-hero__inner {
		max-width: 900px;
	}

	.trial-form-wrap {
		max-width: 880px;

		padding:
			65px 60px 70px;
	}

}


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

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

	.trial-page {
		overflow: hidden;
	}


	.trial-hero {
		display: block;

		min-height: 610px;

		padding:
			90px 20px 110px;

		background:
			linear-gradient(180deg,
				rgba(255, 255, 255, .90) 0%,
				rgba(255, 255, 255, .72) 45%,
				rgba(255, 248, 237, .66) 100%),
			url("../img/blog-westcoast-bg.png") 48% top / auto 650px no-repeat,
			#fff8ed;
	}


	.trial-hero::before {
		width: 300px;
		height: 300px;

		left: -150px;
		bottom: -80px;
	}


	.trial-hero::after {
		width: 250px;
		height: 250px;

		top: -100px;
		right: -110px;
	}


	.trial-hero__inner {
		max-width: none;
	}


	.trial-hero__en {
		margin-bottom: 15px;

		font-size: 11px;
	}


	.trial-hero__title {
		max-width: 100%;

		font-size:
			clamp(32px,
				9vw,
				42px);

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


	.trial-hero__lead {
		max-width: 100%;

		margin-top: 26px;

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


	.trial-hero__note {
		display: block;

		width: 100%;

		margin-top: 26px;

		padding: 14px 16px;

		border-radius: 12px;

		font-size: 12px;

		line-height: 1.75;
	}


	.trial-hero__note span {
		display: block;

		margin-bottom: 4px;
	}

	.trial-form-section {
		padding: 45px 14px 90px;

		background:
			linear-gradient(180deg,
				#fff8ed 0%,
				#f8fcfb 100%);
	}


	.trial-form-wrap {
		width: 100%;
		max-width: none;

		margin: 0 auto;

		padding: 44px 20px 48px;

		border-radius: 24px;

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

		box-shadow:
			0 18px 48px rgba(6, 62, 71, .12);
	}


	.trial-form {
		width: 100%;
		max-width: none;
		margin: 0;
	}




	.trial-form-head {
		margin-bottom: 42px;
	}


	.trial-form-head__en {
		font-size: 10px;
	}


	.trial-form-head h2 {
		font-size: 27px;

		line-height: 1.5;
	}


	.trial-form-head>p:last-child {
		margin-top: 18px;

		font-size: 13px;

		line-height: 1.85;

		text-align: left;
	}


	/* FIELD */

	.trial-field {
		margin-bottom: 29px;
	}


	.trial-field label,
	.trial-field legend {
		font-size: 14px;
	}


	.trial-field input[type="text"],
	.trial-field input[type="email"],
	.trial-field input[type="tel"],
	.trial-field input[type="date"],
	.trial-field select,
	.trial-field textarea {
		padding: 15px 14px;

		font-size: 16px;
	}


	.trial-field-row {
		grid-template-columns: 1fr;

		gap: 28px;
	}


	.trial-choice-grid {
		grid-template-columns: 1fr;

		gap: 9px;
	}


	.trial-choice span {
		min-height: 54px;

		font-size: 13px;
	}


	.trial-privacy {
		margin-top: 36px;

		padding: 18px 17px;
	}


	.trial-privacy label {
		font-size: 12px;
	}


	/* SUBMIT */

	.trial-submit {
		margin-top: 36px;
	}


	.trial-submit button {
		min-height: 84px;

		padding:
			12px 66px 12px 21px;
	}


	.trial-submit__small {
		font-size: 8px;
	}


	.trial-submit__main {
		font-size: 17px;
	}


	.trial-submit__arrow {
		width: 58px;

		font-size: 25px;
	}

}


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

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

	.trial-hero {
		min-height: 590px;

		padding-left: 17px;
		padding-right: 17px;
	}


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


	.trial-form-section {
		padding-left: 10px;
		padding-right: 10px;
	}


	.trial-form-wrap {
		padding-left: 17px;
		padding-right: 17px;
	}


	.trial-form-head h2 {
		font-size: 25px;
	}


	.trial-submit__main {
		font-size: 16px;
	}

}

/* =========================================================
   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;
	}
}