@charset "utf-8";
/*------------------------------------------------------------
	トップページ
------------------------------------------------------------*/

* {
	box-sizing: border-box;
}

body {
	width: 100%;
}

:root {
	--font-sans: 'Noto Sans JP', sans-serif;
	--font-serif: 'Noto Serif JP', serif;
	--color-base: #f6f6f6;
	--color-white: #fff;
	--color-black: #1e1e1e;
	--color-water: #2888b5;
	--color-blue: #344b95;
	--color-blue02: #325b8c;
	--color-gold-light: #fffaf1;
	--color-gold-light02: #f3e6ce;
	--color-gold: #bd9e5d;
	--color-gold-medium: #b1914f;
	--color-gold-dark: #927841;
	--color-gray-light: #fdfdfd;
	--color-gray-light02: #ececec;
	--color-gray: #f0f0f0;
	--color-gray-dark: #e2e2e2;
	--color-gray-dark-very: #ccc
}

/*================================
-インプラントページ 240418-
=================================*/

#container {
	background-color: var(--color-base);
	overflow-x: hidden;
}

/*================================
-MV部分外枠
=================================*/
.implant-mv {
	height: 65svh;
	background: rgb(236, 218, 202);
	background: linear-gradient(60deg, rgb(243, 229, 217) 0%, rgb(241, 240, 228)100%);

	>.inner {
		max-width: min(100%, 1600px);
		height: 100%;
		margin: auto;
		background: url("../img/implant/implant-photo01.webp") no-repeat top -6svh center / cover;
		position: relative;
		box-sizing: border-box;
	}
}

@media screen and (max-width: 1024px) {
	.implant-mv {
		>.inner {
			background: url("../img/implant/implant-photo01.webp") no-repeat top center / cover;
		}
	}
}

@media all and (min-height: 767px) and (max-height: 820px) {
	.implant-mv {
		height: 80svh;
	}
}

@media screen and (max-width: 768px) {
	.implant-mv {
		padding-top: 110px;
		height: 72svh;

		>.inner {
			background: url("../img/implant/implant-photo01.webp") no-repeat top center / cover;
		}
	}
}

@media screen and (max-width: 500px) {
	.implant-mv {
		padding-top: 110px;
		height: 70svh;

		>.inner {
			background: url("../img/implant/implant-photo01_sp.webp") no-repeat top right / cover;
		}
	}
}

.implant-mv-img {
	width: 100%;
	height: 100%;

	>img {
		width: 100%;
		height: auto;
		display: block;
		aspect-ratio: 2000 / 1335;
		object-fit: cover;
	}
}

/*================================
-MV実績外枠
=================================*/

.implant-mv {
	.contents {
		position: absolute;
		bottom: min(8svh, 40px);
		margin-left: 20px;

		.item {
			background-color: rgba(255, 255, 255, .95);
			backdrop-filter: blur(4px);
			position: relative;
			z-index: 1;

			&::before {
				content: "";
				width: 100%;
				height: 100%;
				border: .5px solid var(--color-white);
				z-index: -1;
				position: absolute;
				left: 4px;
				bottom: -4px;
			}
		}
	}
}

@media screen and (max-width: 1500px) {
	.implant-mv {
		.contents {
			left: 100px;
			margin-left: 0;
		}
	}
}

@media screen and (max-width: 767px) {
	.implant-mv {
		.contents {
			left: 2%;
			top: initial;
			bottom: 4%;
			transform: initial;
		}
	}
}

/*================================
-MV実績タイトル
=================================*/
.implant-mv {
	.title {
		font-family: var(--font-serif);
		font-size: min(3.2vw, 22px);
		line-height: 1.4;
		background-color: var(--color-blue);
		margin-bottom: min(2.1vw, 24px);
		color: var(--color-white);
		padding: min(2.6vw, 16px) min(5.33vw, 40px) min(2.6vw, 8px);
		position: relative;
		overflow: hidden;

		&::before {
			content: "";
			position: absolute;
			left: min(-3vw, 32px);
			top: min(-5vw, -34%);
			width: min(30vw, 200px);
			height: min(30vw, 200px);
			background: url("../img/implant/implant-logo-bg-wt.svg") no-repeat center center / 100%;
			z-index: 0;
			opacity: .1;
			pointer-events: none;
		}

		>b {
			font-size: min(8.98vw, 70px);
			font-weight: 400;
			display: inline-block;
			margin: 0;
			font-weight: 300;
			line-height: 1.06;
		}
	}
}

.implant-mv-text-att {
	font-size: min(2.93vw, 13px);
	position: relative;
	padding-left: min(4vw, 15px);
	display: inline-block;

	&::before {
		content: "※";
		position: absolute;
		left: 0;
		top: 0;
	}
}

/*================================
-MV実績リスト
=================================*/
.implant-mv {
	.list {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: min(3.2vw, 8px) min(4.26vw, 20px);
		padding: 0 min(4.26vw, 40px) min(3.73vw, 24px);

		>li {
			display: flex;
			height: min(6.4vw, 32px);
			justify-content: flex-start;
			align-items: center;
			font-family: var(--font-serif);
			font-size: min(2.93vw, 17px);
			position: relative;
			padding-left: min(3.73vw, 32px);

			&::before {
				content: "";
				position: absolute;
				left: 0;
				top: calc(50% - 4px);
				transform: translateY(-50%);
				width: min(4.26vw, 16px);
				height: min(1.33vw, 5px);
				border-left: 1px solid var(--color-gold);
				border-bottom: 1px solid var(--color-gold);
				transform: rotate(-45deg);
				z-index: 1;
			}
		}
	}
}

@media screen and (max-width: 1400px) {
	.implant-mv {
		.list {
			grid-template-columns: repeat(2, 1fr);
		}
	}
}

@media screen and (max-width: 767px) {
	.implant-mv {
		.list {
			grid-template-columns: repeat(1, 1fr);
			gap: 0;

			>li {
				font-weight: 600;

				&::before {
					left: min(-2.13vw, -8px);
				}
			}
		}
	}
}

.implant-mv-text {
	margin-top: 0;
}

/*================================
-キャッチ部分
=================================*/
.implant-catch {
	padding: 16px 16px 40px;
	background-color: var(--color-blue);
	position: relative;

	&::before,
	&::after {
		content: "";
		position: absolute;
		border-style: solid;
		bottom: 0;
		height: 0;
		width: 0;
		z-index: 0;
	}

	&::before {
		border-color: transparent transparent transparent var(--color-gray);
		border-width: 3svh 0 0 50vw;
		left: 0;
	}

	&::after {
		border-color: transparent transparent var(--color-gray) transparent;
		border-width: 0 0 3svh 50vw;
		right: 0;
	}

	.inner {
		max-width: 1400px;
		width: 100%;
		margin: auto;
		position: relative;
	}

	.text {
		font-size: min(5.33vw, 38px);
		font-family: var(--font-serif);
		color: var(--color-white);
		text-align: center;
		font-weight: 400;
		letter-spacing: 0.05rem;
		display: flex;
		align-items: center;
		justify-content: center;

		>span {
			font-size: min(6.99vw, 48px);
			display: inline-block;
			padding: 0 2px;
		}
	}
}

@media screen and (min-width: 768px) {
	.implant-catch {
		padding-top: 40px;
		min-height: 160px;
	}
}

.implant-catch {
	.image-box {
		width: min(20vw, 110px);
		height: auto;
		position: absolute;
		right: 0;
		z-index: 0;
	}

	.image {
		width: 100%;
		height: auto;
		display: block;

		>img {
			width: 100%;
			height: auto;
			display: block;
			aspect-ratio: 1 / 1;
			filter: drop-shadow(0 0 5px rgba(0, 0, 0, .1));
		}
	}
}

@media screen and (min-width: 1401px) {
	.implant-catch {
		.image-box {
			top: -64px;
		}
	}
}

@media screen and (max-width: 1400px) {
	.implant-catch {
		.image-box {
			bottom: 4.4vw;
		}
	}
}

@media screen and (max-width: 767px) {
	.implant-catch {
		.image-box {
			bottom: 16.4vw;
		}
	}
}

/*================================
-セクション外枠
=================================*/
.implant-section {
	margin: 200px auto;
	padding: 40px 0 0px;
	box-sizing: border-box;
	position: relative;

	>.inner {
		position: relative;
		width: min(100%, 1400px);
		padding: 0 min(4.26vw, 16px);
		margin: 0 auto;
		font-family: var(--font-sans);
		font-size: min(3.73vw, 16px);
		font-weight: 300;
		text-align: justify;
		line-height: 1.8;
		z-index: 5;
	}
}

@media screen and (max-width: 767px) {
	.implant-section {
		margin: 96px auto;
		padding: 32px 0 0;

		>.inner {
			font-weight: 400;
			line-height: 1.8;
		}
	}
}

.implant-background-object-left,
.implant-background-object-right {
	content: "";
	position: absolute;
	top: min(22.4vw, 104px);
	width: 65vw;
	height: 160vw;
	max-height: 600px;
	background-color: var(--color-gray-light02);
	z-index: 1;
}

.implant-background-object-left {
	left: 0;
}

.implant-background-object-right {
	right: 0;
}

.implant-menu-section,
.implant-menu-section02 {
	background-color: var(--color-gray);
	position: relative;

	>.inner {
		overflow: hidden;
		max-width: 1400px;
		width: 100%;
		margin: auto;
		padding: min(10.66vw, 80px) min(5.33vw, 16px) min(21.3vw, 120px);
	}
}

.implant-menu-section {
	margin-bottom: min(4.26vw, 120px);

	&::before,
	&::after {
		bottom: 0;
		content: "";
		position: absolute;
		border-style: solid;
		height: 0;
		width: 0;
		z-index: 0;
	}

	&::before {
		border-color: transparent transparent transparent var(--color-base);
		border-width: 3svh 0 0 50vw;
		left: 0;
	}

	&::after {
		border-color: transparent transparent var(--color-base) transparent;
		border-width: 0 0 3svh 50vw;
		right: 0;
	}
}

.implant-menu-section02 {
	margin-top: min(25.6vw, 120px);
}


/*================================
-画像＋テキスト並び
=================================*/
.implant-contents-list {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: min(8.53vw, 32px);
	margin: 0 auto 80px;

	.image {
		width: 100%;
		height: auto;
		margin: 0 auto;
		display: block;

		>img {
			width: 100%;
			height: auto;
			display: block;
			aspect-ratio: 141 / 100;
			background-color: var(--color-gray);
			border: .5px solid rgba(0, 0, 0, .1);
		}
	}
}

@media screen and (max-width: 767px) {
	.implant-contents-list {
		grid-template-columns: 1fr;
	}
}

.implant-contents-order {

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

		.image {
			order: 1;
		}

		.text,
		.inner-null {
			order: 2;
		}
	}
}

.implant-contents-list02 {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 16px;
}

@media screen and (max-width: 767px) {
	.implant-contents-list02 {
		grid-template-columns: repeat(1, 1fr);
	}
}

.implant-contents-list02-item {
	border: .5px solid var(--color-gray-dark-very);
	position: relative;
	background-color: var(--color-white);
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 0;

	.image {
		width: 100%;
		margin: 0 auto;

		>img {
			width: 100%;
			height: auto;
			display: block;
		}
	}
}

@media screen and (max-width: 767px) {
	.implant-contents-list02-item {
		grid-template-columns: repeat(1, 1fr);
	}
}


.implant-contents-list02-item-contents {
	padding: min(10.66vw, 40px) min(5.33vw, 24px);
	font-size: min(3.73vw, 15px);
	letter-spacing: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

/*================================
-画像＋テキスト（背景色・ボーダー）
=================================*/

.implant-contents-list-bg,
.implant-contents-list-border {
	padding: 40px;
}

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

	.implant-contents-list-bg,
	.implant-contents-list-border {
		padding: min(10.66vw, 40px) min(4.26vw, 24px);
	}

	.implant-contents-list-bg {
		width: calc(100% + min(calc(4.26vw * 2), calc(16px * 2)));
		margin-left: min(-4.26vw, -16px);
	}
}

.implant-contents-list-bg {
	background-color: var(--color-white);
}

.implant-contents-list-border {
	border: 1px solid var(--color-gray-dark);
}

/*================================
-見出し
=================================*/
.implant-headline02 {
	font-family: var(--font-serif);
	font-size: min(5.6vw, 38px);
	font-weight: 400;
	letter-spacing: 0.01rem;
	padding-bottom: 8px;
	text-align: left;
	position: relative;
	line-height: 1.6;
	margin-bottom: 64px;

	&::before {
		content: "";
		position: absolute;
		left: min(1.2vw, 0);
		top: 50%;
		transform: translateY(-50%);
		z-index: -1;
		background: url("../img/implant/implant-logo-bg-bk.svg") no-repeat center center / 100%;
		opacity: .08;
		width: min(32vw, 200px);
		height: min(32vw, 200px);
	}

	&::after {
		content: "";
		position: absolute;
		width: min(30%, 200px);
		height: 1px;
		background-color: var(--color-black);
		left: 0;
		bottom: -16px;
	}

	>b {
		color: var(--color-blue);
		font-size: min(7.99vw, 56px);
		font-weight: 400;
		display: inline-block;
		margin: 0 4px;
	}

	.small {
		font-size: min(3.73vw, 20px);
	}

	.point {
		color: var(--color-white);
		font-family: var(--font-sans);
		padding: 2px 8px;
		border-radius: 24px;
		font-size: min(3.73vw, 16px);
		line-height: 1.4;
		display: inline-block;
		background-color: var(--color-water);
		font-weight: 400;

	}
}

@media screen and (min-width: 768px) {
		.implant-headline02 {
				.point {
					position: absolute;
        			top: 53px;
				}
		}
}

@media screen and (max-width: 767px) {
	.implant-headline02 {
		line-height: 1.6;
		margin-bottom: 40px;
		font-weight: 600;
		text-align: center;

		&::before {
			left: 50%;
			transform: translate(-50%, -50%);
		}

		&::after {
			left: 50%;
			transform: translateX(-50%);
		}
	}
}

.implant-headline02-b {
	font-family: var(--font-serif);
	font-size: min(5.6vw, 38px);
	font-weight: 400;
	letter-spacing: 0.01rem;
	margin-bottom: 160px;
	text-align: center;
	color: var(--color-black);
	position: relative;

	&::before {
		content: "";
		position: absolute;
		left: 50%;
		bottom: -110px;
		width: .5px;
		height: 80px;
		background-color: var(--color-black);
		transform: translateX(-50%);
	}

	>b {
		color: var(--color-blue);
		font-size: min(7.99vw, 56px);
		font-weight: 400;
		display: inline-block;
		margin: 0 4px;
	}

}

.implant-headline03 {
	font-family: var(--font-serif);
	font-size: min(5.33vw, 26px);
	font-weight: 600;
	border-bottom: 2px solid var(--color-gray-dark);
	padding-bottom: 8px;
	margin-bottom: 24px;
	letter-spacing: 0.01rem;
	text-align: left;
	color: var(--color-blue);
	position: relative;
	line-height: 1.6;
}

@media screen and (max-width: 767px) {
	.implant-headline03 {
		text-align: center;
	}
}

.implant-headline03-b {
	font-family: var(--font-serif);
	font-size: min(5.33vw, 26px);
	font-weight: 600;
	text-align: center;
	position: relative;
	line-height: 1.6;
	margin-bottom: 56px;

	&::before,
	&::after {
		content: "";
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
		background-color: var(--color-gold);
	}

	&::before {
		bottom: -24px;
		width: 8px;
		height: 8px;
		transform: translateX(-50%) rotate(45deg);
	}

	&:after {
		width: 40px;
		height: 1px;
		bottom: -20.5px;
	}
}

.implant-headline04,
.implant-headline04-b {
	font-family: var(--font-serif);
	font-size: min(5vw, 20px);
	font-weight: 400;
	padding: 8px 16px;
	margin-bottom: 24px;
	letter-spacing: 0.01rem;
	text-align: center;
	color: var(--color-white);
	background-color: var(--color-gold);
	border: .5px solid var(--color-gold);
	position: relative;
	line-height: 1.6;
	overflow: hidden;

	@media screen and (max-width: 767px) {
		font-weight: 600;
	}

	>span {
		font-size: min(3.73vw, 16px);
	}

	&::before,
	&::after {
		content: "";
		position: absolute;
		border-style: solid;
	}

	&::before {
		right: 0;
		bottom: 0;
		border-color: transparent transparent var(--color-gold-medium) transparent;
		border-width: 0px 0px 16px 60px;
	}

	&::after {
		left: 0;
		top: 0;
		border-color: var(--color-gold-medium) transparent transparent transparent;
		border-width: 16px 60px 0px 0px;
	}
}

.implant-headline04-b {
	color: var(--color-gold-dark);
	background-color: initial;
	border: .5px solid var(--color-gray-dark);

	&::before {
		border-color: transparent transparent var(--color-gray) transparent;
	}

	&::after {
		border-color: var(--color-gray) transparent transparent transparent;
	}
}

.implant-headline04-c {
	font-family: var(--font-serif);
	font-size: min(5vw, 20px);
	font-weight: 400;
	padding-bottom: 16px;
	margin-bottom: 24px;
	letter-spacing: 0.01rem;
	text-align: center;
	color: var(--color-gold-dark);
	position: relative;
	line-height: 1.6;

	&::before,
	&::after {
		content: "";
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
		background-color: var(--color-gold);
	}

	&::before {
		bottom: -8px;
		width: 8px;
		height: 8px;
		transform: translateX(-50%) rotate(45deg);
	}

	&:after {
		width: 40px;
		height: 1px;
		bottom: -4.5px;
	}
}

@media screen and (min-width: 768px) {
	.implant-headline04-c {
		display: flex;
		align-items: center;
		height: 72px;
		justify-content: center;
		margin-bottom: 32px;
	}
}

.implant-contents-point-box {
	.implant-headline04-c {
		color: var(--color-base);
	}
}

.implant-headline04-d {
	font-family: var(--font-serif);
	font-size: min(5vw, 20px);
	font-weight: 400;
	padding-bottom: 16px;
	margin-bottom: 24px;
	letter-spacing: 0.01rem;
	text-align: center;
	color: var(--color-blue);
	position: relative;
	line-height: 1.6;
	border-bottom: 1px solid var(--color-gray-dark-very);
}

@media screen and (min-width: 768px) {
	.implant-contents-list02 {
		.implant-headline04-d {
			height: 80px;
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}
}

.implant-headline-letter-space {
	letter-spacing: min(4.26vw, 18px);
}

@media screen and (max-width: 767px) {
	.implant-headline-letter-space {
		text-indent: min(4.26vw, 18px);
	}
}

/*================================
-値段表
=================================*/

.implant-case-table {

	table {
		width: 100%;
		font-size: min(3.84vw, 15px);
	}

	table,
	td,
	th {
		border-collapse: collapse;
	}

	td,
	th {
		border: .5px solid var(--color-gray-dark-very);
		padding: 12px;
		line-height: 1.4;

	}

	th {
		width: 28%;
		text-align: left;
		background-color: var(--color-gray);
		font-family: var(--font-serif);
	}
}

@media screen and (max-width: 767px) {
	.implant-case-table {

		td,
		th {
			display: block;
			padding: 8px;
		}

		th {
			width: 100%;
		}
	}
}

/*================================
-画像比率
=================================*/

/* 2:1 */
.implant-image-large,
.implant-image-large-border {
	width: 100%;
	height: auto;
	display: block;
	margin: 40px auto 48px;

	>img {
		width: 100%;
		height: auto;
		display: block;
		aspect-ratio: 2 / 1;
		background-color: var(--color-gray);
	}
}

.implant-image-large-border {
	>img {
		border: .5px solid var(--color-gold);
	}
}

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

	.implant-image-large,
	.implant-image-large-border {
		width: calc(100% + 32px);
		margin: 0 0 40px -16px;
	}

	.implant-image-large-border {
		>img {
			border-left: 0;
			border-right: 0;
		}
	}
}

.implant-image-height {
	display: flex !important;
	align-items: center;
	justify-content: center;
	border: .5px solid var(--color-gold);

	>img {
		object-fit: initial !important;
		aspect-ratio: initial !important;
	}
}

@media screen and (min-width: 768px) {
	.implant-image-height {
		min-height: 500px;
	}
}

@media screen and (max-width: 767px) {
	.implant-image-height {
		border-left: 0;
		border-right: 0;
		min-height: 300px;
	}
}


/*================================
-アコーディオン（共通部）
=================================*/
.implant-menu-accordion-box {
	margin: 0 auto;
	display: -webkit-box;
	display: -webkit-flex;
	display: flex;
	justify-content: center;
	flex-direction: column;
	align-items: center;
	box-sizing: border-box;
	background-color: var(--color-gray-light);
	border: .5px solid var(--color-gold);
}

/*アコーディオンタイトル*/
.implant-menu-accordion {
	position: relative;
	/*+マークの位置基準とするためrelative指定*/
	cursor: pointer;
	transition: all 0.5s ease;
	background-color: var(--color-gray-light);
	font-family: var(--font-serif);
	color: var(--color-blue);
	text-align: center;
	display: flex;
	justify-content: center;
	align-items: center;
	height: 64px;
	padding: 0 24px;
	font-size: min(4vw, 18px);
	text-align: center;
	overflow: hidden;
	box-sizing: border-box;
	width: 100%;
	font-weight: 500;
	letter-spacing: 0.2rem;

	@media screen and (max-width: 767px) {
		height: 48px;
	}

	>span {
		position: absolute;
		right: 0;
		top: 50%;
		width: 0;
		height: 0;
		border-style: solid;
		border-color: transparent transparent var(--color-blue) transparent;
		border-width: 0px 0px 300px 300px;
		transform: translateY(-50%);
		z-index: 0;

		@media screen and (max-width: 767px) {
			border-width: 0px 0px 40vw 40vw;
			right: -5vw;
		}
	}
}

/*アイコンの＋と×*/
.implant-menu-accordion::before,
.implant-menu-accordion::after {
	position: absolute;
	content: "";
	width: 16px;
	height: 1px;
	background-color: var(--color-white);
	z-index: 1;
}

.implant-menu-accordion::before {
	top: 50%;
	right: 16px;
	transform: translateX(-50%) rotate(0deg);
	transition: all 0.5s ease;
}

.implant-menu-accordion::after {
	top: 50%;
	right: 16px;
	transform: translateX(-50%) rotate(90deg);
	transition: all 0.5s ease;
}

.implant-menu-accordion.close::before {
	transform: translateX(-50%) rotate(0deg);
	transition: all 0.5s ease;
}

.implant-menu-accordion.close::after {
	transform: translateX(-50%) rotate(0deg);
	transition: all 0.5s ease;
}

/*アコーディオンで現れるエリア*/
.implant-menu-accordion-item {
	display: none;
	/*はじめは非表示*/
	border-top: .5px solid var(--color-gold);
	width: 100%;

	>.inner {
		display: grid;
		grid-template-columns: repeat(3, 1fr);

		>li {
			border-bottom: 0.5px dashed rgba(39, 24, 20, 0.2);
		}

		&:last-child {
			border-bottom: 0;
		}
	}

	.no-border {
		border-bottom: 0;
	}

	a:hover {
		text-decoration: none;
	}

	.link {
		font-size: min(3.73vw, 16px);
		color: var(--color-black) !important;
		line-height: 1.4;
		position: relative;
		padding: 0 0 0 min(10vw, 40px);
		height: min(14.93vw, 56px);
		display: flex;
		align-items: center;
		justify-content: flex-start;
		letter-spacing: 0.05rem;
		font-family: var(--font-sans);
		font-weight: 300;

		&::before {
			position: absolute;
			content: "〉";
			top: 50%;
			left: 16px;
			transform: translateY(-50%);
			z-index: 2;
			color: var(--color-gold);
		}

		.point {
			font-size: min(3.2vw, 13px);
			display: inline-block;
			padding: 2px 8px;
			margin-right: 4px;
			line-height: 1.4;
			border-radius: 24px;
			background-color: var(--color-water);
			color: var(--color-white);
			text-decoration: none !important;

		}
	}
}

@media screen and (min-width: 768px) {
	.implant-menu-accordion-item {
		>.inner {
			gap: 0 8px;

			>li {
				&:nth-last-of-type(-n + 3) {
					border-bottom: 0;
				}
			}

			.link {
				&::before {
					left: min(3.2vw, 16px);
				}

				&:hover {
					p {
						text-decoration: underline;
					}
				}
			}
		}
	}
}

@media screen and (max-width: 767px) {
	.implant-menu-accordion-item {

		.inner {
			grid-template-columns: repeat(1, 1fr);
			gap: 0;

			>li {
				display: inline-flex;
				font-weight: 400;

				&:last-child {
					border-bottom: 0;
				}
			}

			.no-border {
				border-bottom: 0.5px dashed rgba(39, 24, 20, 0.2);
			}

			.link {
				font-weight: 400;

				&:hover {
					p {
						text-decoration: underline;
					}
				}
			}
		}
	}
}

.implant-menu-accordion-item-inner-link-border {
	border-bottom: 0.5px solid rgba(39, 24, 20, 0.2);
}

/*================================
-スペース・文字装飾
=================================*/
.implant-contents-space {
	margin-bottom: 120px;

	@media screen and (max-width: 767px) {
		margin-bottom: 80px;
	}
}

.implant-text-att {
	font-size: min(3.2vw, 15px);
	position: relative;
	padding-left: min(4vw, 17px);
	display: inline-block;

	&::before {
		content: "※";
		position: absolute;
		left: 0;
		top: 0;
	}
}

.implant-case-list {
	position: relative;
	padding-left: min(4vw, 17px);
	display: inline-block;

	&::before {
		content: "・";
		position: absolute;
		left: 0;
		top: 0;
	}
}

.implant-mb16 {
	margin-bottom: 16px !important;
}

.implant-mb24 {
	margin-bottom: 24px !important;
}

.implant-mb40 {
	margin-bottom: 40px !important;
}

.implant-mb64 {
	margin-bottom: 64px !important;
}

.implant-mb80 {
	margin-bottom: 80px !important;
}


.implant-mb0 {
	margin-bottom: 0 !important;
}

.implant-mt0 {
	margin-top: 0 !important;
}

.implant-text-large {
	font-size: min(5.33vw, 22px);
	display: inline-block;
	padding: 0 4px;
	font-weight: 400;
	font-family: var(--font-serif);
}

/*================================
-ボタン
=================================*/

.implant-button {
	margin: 56px auto 40px;
	display: flex;
	justify-content: center;

	>a {
		display: flex;
		justify-content: center;
		align-items: center;
		font-family: var(--font-serif);
		color: var(--color-white);
		background-color: var(--color-blue);
		line-height: 1.4;
		height: 56px;
		width: 280px;
		transition: ease .3s;
		position: relative;
		text-align: center;
		font-size: min(3.46vw, 15px);
		font-weight: 500;
		letter-spacing: 0.05rem;

		&::before {
			content: "";
			position: absolute;
			top: 4px;
			right: -4px;
			width: 100%;
			height: 100%;
			border-right: .5px solid var(--color-gold);
			border-bottom: .5px solid var(--color-gold);
			z-index: 1;
			pointer-events: none;
		}

		&::after {
			content: "";
			position: absolute;
			right: 4px;
			bottom: 4px;
			width: 0;
			height: 0;
			border-style: solid;
			border-color: transparent transparent var(--color-white) transparent;
			border-width: 0px 0px 8px 8px;
			z-index: 1;
			pointer-events: none;
		}

		&:hover {
			transition: ease .3s;
			opacity: .7;
			text-decoration: none;

			&::before {
				transition: ease .3s;
				opacity: .7;
			}
		}
	}

	>a {
		@media screen and (max-width: 767px) {
			&:hover {
				opacity: 1;
			}

			&:active {
				transition: ease .3s;
				opacity: .7;
				text-decoration: none;
			}
		}
	}
}

/*================================
-技術と実績がインプラント治療成功の秘訣 技術
=================================*/

.implant-explanation {
	position: absolute;
	bottom: 8px;
	left: 8px;
	background-color: rgba(255, 255, 255, .9);
	backdrop-filter: blur(4px);
	padding: min(6.4vw, 24px) min(5.33vw, 24px);
	z-index: 2;
	font-size: min(3.73vw, 14px);

	.catch {
		font-family: var(--font-serif);
		font-size: min(5.33vw, 20px);
		font-weight: 400;
		border-bottom: .5px solid var(--color-gold);
		margin: 0 0 16px;
		padding-bottom: 8px;
		letter-spacing: 0.01rem;
		text-align: left;

		>b {
			font-size: min(6.4vw, 32px);
			font-weight: 400;
			display: inline-block;
			padding: 0 4px 0 0;
		}
	}

	.list {
		display: grid;
		grid-template-columns: 1fr;
		gap: 0;
		font-family: var(--font-serif);

		>li {
			border-bottom: .5px dashed var(--color-black);
			display: flex;
			align-items: center;
			justify-content: flex-start;
			height: min(10.66vw, 40px);
			font-weight: 400;

			&:last-child {
				border-bottom: 0;
			}
		}
	}

	.name {
		display: flex;
		justify-content: center;
		align-items: center;
		font-family: var(--font-serif);
		font-size: min(4.26vw, 18px);
		padding: 4px;
		color: var(--color-white);
		margin-bottom: 8px;
		background-color: var(--color-blue);
		position: relative;

		>span {
			display: inline-block;
			margin-right: 12px;
			font-size: min(3.46vw, 14px);
			background-color: var(--color-white);
			color: var(--color-blue);
			padding: 2px 4px;
			line-height: 1.4;
		}
	}
}

@media screen and (max-width: 767px) {
	.implant-explanation {
		position: relative;
		left: 0;
		margin-bottom: 0;
		padding: min(6.4vw, 24px) calc(4.8vw * 2);
		background-color: var(--color-base);

		> .list {
			>li {
				font-weight: 600;
			}
		}
	}
}

/*================================
-技術と実績がインプラント治療成功の秘訣 実績
=================================*/

.implant-explanation02 {
	border-bottom: .5px dashed var(--color-gold);
	padding-bottom: 16px;
	margin-bottom: 24px;
	z-index: 2;
	text-align: center;
	font-family: var(--font-serif);

	>b {
		font-size: min(3.2vw, 15px);
		background-color: var(--color-blue);
		color: var(--color-white);
		font-weight: 400;
		padding: 4px min(4.26vw, 16px);
		line-height: 1.4;
		letter-spacing: 0.01rem;
		display: inline-block;
	}

	>span {
		font-size: min(8vw, 50px);
		display: inline-block;
		padding: 0 4px;
		font-weight: 400;
		margin-top: 4px;
	}
}

/*================================
-インプラントに必要な医院環境
=================================*/

.implant-facility-list {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 0 min(8.53vw, 32px);
	position: relative;
	width: 100%;

	>li {
		display: flex;
		align-items: center;
		justify-content: flex-start;
		position: relative;
		width: 100%;
		height: min(12.8vw, 64px);
		border-bottom: .5px dashed var(--color-gold);
		z-index: 2;

		&:nth-of-type(5) {
			border-bottom: 0;
		}
	}

	.title {
		font-family: var(--font-serif);
		font-size: min(3.86vw, 18px);
		line-height: 1.6;
		font-weight: 400;
		text-align: left;
		width: 80%;
		letter-spacing: 0.01rem;
		position: relative;
		display: inline-block;
		padding-left: min(7vw, 32px);

		@media screen and (max-width: 767px) {
			width: 100%;
		}

		&::after {
			content: "";
			position: absolute;
			left: 0;
			top: calc(50% - 4px);
			transform: translateY(-50%);
			width: min(4.26vw, 16px);
			height: min(1.33vw, 5px);
			border-left: 1px solid var(--color-gold);
			border-bottom: 1px solid var(--color-gold);
			transform: rotate(-45deg);
			z-index: 1;
		}
	}

	.link {
		a {
			color: var(--color-gold-dark);
			width: 100%;
			height: 100%;
			display: flex;
			justify-content: flex-start;
			align-items: center;
			position: relative;
			transition: ease .3s;

			@media screen and (max-width: 767px) {
				justify-content: flex-start;
			}

			&:hover {
				text-decoration: none;
				transition: ease .3s;
				opacity: .7;
			}

			&::before {
				content: "";
				position: absolute;
				right: 0;
				bottom: 4px;
				width: 0;
				height: 0;
				border-style: solid;
				border-color: transparent transparent var(--color-gold) transparent;
				border-width: 0px 0px 12px 12px;
				z-index: 1;
				pointer-events: none;
			}
		}
	}
}

/*================================
-特徴セクションリスト
=================================*/
.implant-feature {
	overflow: hidden;
	position: relative;
	z-index: 5;
	width: 100%;

	&::after {
		content: "";
		position: absolute;
		width: calc(100% + 8px);
		height: 110%;
		background-color: rgba(255, 255, 255, .5);
		backdrop-filter: blur(4px);
		z-index: 2;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
	}

	&::before {
		content: "";
		position: absolute;
		top: 0;
		left: 0;
		display: block;
		width: calc(100% + 32px);
		height: 100%;
		background: url("../img/implant/implant-bg.webp") no-repeat center center / cover;
		z-index: 1;
	}
}

@media screen and (max-width: 767px) {
	.implant-feature {
		width: calc(100% + 32px);
		margin-left: -16px;
		padding: min(4.26vw, 16px);
	}
}

.implant-feature-list {
	max-width: 1400px;
	margin: auto;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 8px;
	padding: 56px min(4.26vw, 16px);
	overflow: hidden;
	position: relative;
	z-index: 10;
}

@media screen and (max-width: 767px) {
	.implant-feature-list {
		grid-template-columns: repeat(1, 1fr);
	}
}

.implant-feature-list-box {
	border: .5px solid var(--color-gray-dark);
	background-color: var(--white);
	padding: min(5.33vw, 20px);
	background-color: var(--color-white);
	position: relative;
	z-index: 2;

	&::after {
		content: "";
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
		z-index: -1;
		background: url("../img/implant/implant-logo-bg-bk.svg") no-repeat center center / 100%;
		width: 120px;
		height: 120px;
		opacity: .04;
	}

	.text {
		line-height: 1.6;
		font-size: min(3.73vw, 15px);
		margin-bottom: 24px;
		letter-spacing: 0;
	}
}

@media screen and (max-width: 767px) {
	.implant-feature-list-box {

		.text {
			font-weight: 400;
		}
	}
}

.implant-feature-list-title {
	border-bottom: .5px solid var(--color-gold);
	width: 100%;
	padding: 56px 0 16px;
	position: relative;
	margin-bottom: 24px;
	display: flex;
	align-items: center;
	min-height: 160px;

	>span {
		position: absolute;
		left: 50%;
		top: 8px;
		transform: translateY(-50%);
		display: flex;
		justify-content: center;
		align-items: center;
		text-align: center;
		font-size: min(5vw, 22px);
		font-family: var(--font-serif);
		color: var(--color-white);
		width: min(8vw, 30px);
		height: min(8vw, 30px);
		line-height: min(8vw, 30px);
		transform: translateX(-50%);

		&::before {
			position: absolute;
			content: "";
			left: calc(50% - min(4vw, 15px));
			top: calc(50% + min(1.86vw, 7px));
			transform: rotate(45deg) translate(-50%, -50%);
			transform-origin: center center;
			width: min(8vw, 30px);
			height: min(8vw, 30px);
			background-color: var(--color-gold-dark);
			z-index: -1;
		}
	}

	.headline {
		font-family: var(--font-serif);
		font-size: min(5.59vw, 20px);
		line-height: 1.6;
		font-weight: 400;
		color: var(--color-gold-dark);
		width: 100%;
		text-align: center;
		letter-spacing: 0.01rem;
		position: relative;
		display: flex;
		align-items: center;
		justify-content: center;
	}
}

@media screen and (max-width: 767px) {
	.implant-feature-list-title {
		.headline {
			font-weight: 600;
		}
	}

	.implant-point-sp {
		top: 19%;
	}
}

/*================================
-リスト部分（1カラム・2カラム）
=================================*/

.implant-list,
.implant-list-2fr,
.implant-list-2fr-odd {
	display: grid;
	background-color: var(--color-gold-light);
	padding: 0 min(4vw, 20px);
	gap: 0;
	line-height: 1.4;
	width: 100%;

	>li {
		border-bottom: .5px dashed var(--color-gold);

		>span {
			height: min(14.93vw, 64px);
			display: flex;
			align-items: center;
			justify-content: flex-start;
			position: relative;
			padding-left: min(9vw, 32px);
			font-size: min(3.73vw, 15px);
			letter-spacing: 0;
			text-align: left;

			&::before {
				content: "";
				position: absolute;
				left: 0;
				top: calc(50% - 4px);
				transform: translateY(-50%);
				width: min(4.26vw, 16px);
				height: min(1.33vw, 5px);
				border-left: 2px solid var(--color-gold);
				border-bottom: 2px solid var(--color-gold);
				transform: rotate(-45deg);
				z-index: 1;
			}
		}
	}
}

.implant-list {
	grid-template-columns: repeat(1, 1fr);
	margin: 0 auto 40px;

	>li {
		&:last-child {
			border-bottom: 0;
		}
	}
}

.implant-list-2fr,
.implant-list-2fr-odd {
	grid-template-columns: repeat(2, 1fr);
	margin: 40px auto;
}

.implant-list-negative {
	background-color: var(--color-gray);

	>li {
		border-bottom: .5px dashed var(--color-gray-dark-very);

		>span {
			&::before {
				border-left: 2px solid var(--color-gray-dark-very);
				border-bottom: 2px solid var(--color-gray-dark-very);
			}
		}
	}
}

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

	.implant-list-2fr,
	.implant-list-2fr-odd {
		gap: 0 20px;
	}

	.implant-list-2fr {
		>li {

			&:last-child,
			&:nth-last-child(2) {
				border-bottom: 0;
			}
		}
	}

	.implant-list-2fr-odd {
		>li {
			&:last-child {
				border-bottom: 0;
			}
		}
	}
}

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

	.implant-list,
	.implant-list-2fr,
	.implant-list-2fr-odd {
		padding: 0 min(4vw, 20px);
	}

	.implant-list-2fr,
	.implant-list-2fr-odd {
		grid-template-columns: repeat(1, 1fr);

		>li {
			&:last-child {
				border-bottom: 0;
			}
		}
	}
}

/*================================
-リスト（実績・技術部分）
=================================*/

.implant-contents-point,
.implant-contents-point-2fr,
.implant-contents-point-3fr,
.implant-contents-point-4fr {
	display: grid;
	gap: 12px;
	margin: 40px auto;
	position: relative;

	&::before,
	&:after {
		content: "";
		position: absolute;
		width: 300px;
		height: 300px;
		background-color: var(--color-gray-dark);
		opacity: .4;
		z-index: 1;
	}

	&::before {
		top: -16px;
		left: -20px;
	}

	&::after {
		bottom: -16px;
		right: -20px;
		opacity: .3;
	}
}

.implant-contents-point-2fr {
	grid-template-columns: repeat(2, 1fr);
}

.implant-contents-point-3fr {
	grid-template-columns: repeat(3, 1fr);
}

.implant-contents-point-4fr {
	grid-template-columns: repeat(4, 1fr);
}

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

	.implant-contents-point,
	.implant-contents-point-2fr,
	.implant-contents-point-3fr,
	.implant-contents-point-4fr {
		grid-template-columns: repeat(1, 1fr);
		gap: 16px;

		&::before,
		&:after {
			width: min(40vw, 300px);
			height: min(40vw, 300px);
		}
	}
}

.implant-contents-point-box,
.implant-contents-point-box02,
.implant-contents-point-box03 {
	padding: min(10.66vw, 40px) min(5.33vw, 20px);
	position: relative;
	min-height: 300px;
	z-index: 5;

	.text,
	.text02 {
		font-size: min(3.73vw, 15px);
		color: var(--color-base);
		letter-spacing: 0;
	}

	.text {
		margin-bottom: 24px;
	}

	.image {
		width: 100%;
		margin: 40px auto;
	}
}

.implant-contents-point-box {
	border: .5px solid var(--color-white);
	background-color: var(--color-blue);
	display: flex;
	flex-direction: column;

	&::before,
	&:after {
		content: "";
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
	}

	&::before {
		width: calc(100% - 8px);
		height: calc(100% - 8px);
		border: .5px solid var(--color-gray-dark-very);
		user-select: none;
		pointer-events: none;
		z-index: 1;
	}

	&::after {
		z-index: -1;
		background: url(../img/implant/implant-logo-bg.svg) no-repeat center center / 100%;
		width: min(32vw, 120px);
		height: min(32vw, 120px);
		opacity: .1;
	}
}

@media screen and (min-width: 768px) {
	.implant-contents-point-box {
		min-height: 400px;
	}
}

@media screen and (max-width: 767px) {
	.implant-contents-point-box {
		justify-content: center;
	}
}

.implant-contents-point-box02,
.implant-contents-point-box03 {

	border: .5px solid var(--color-gray-dark);
	background-color: var(--color-white);

	.text,
	.text02 {
		color: var(--color-black);
	}
}

.implant-contents-point-box03 {
	padding: min(10.66vw, 64px) min(5.33vw, 64px);
}

@media screen and (min-width: 768px) {
	.implant-contents-point-box03 {
		.image {
			width: 70%;
		}
	}
}

.implant-contents-point-box-between {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

.implant-contents-point-space40 {
	margin-bottom: 40px !important;
}

.implant-contents-point-space120 {
	margin-bottom: 120px !important;
}

@media screen and (max-width: 767px) {
	.implant-contents-point-space40 {
		margin-bottom: 16px !important;
	}

	.implant-contents-point-space120 {
		margin-bottom: 16px !important;
	}
}


/*================================
-H2リードコンテンツ
=================================*/

.implant-sub-read {
	margin-bottom: 120px;

	>.inner,
	>.inner02 {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 0;
		position: relative;
	}
}

@media screen and (min-width: 768px) {
	.implant-sub-read {
		margin-bottom: 120px;

		>.inner {
			.implant-sub-read-contents {
				order: 1;
				left: 0;
				top: -24px;
			}

			.implant-sub-read-contents02 {
				order: 2;
			}
		}

		>.inner02 {
			.implant-sub-read-contents {
				order: 2;
				left: -24px;
				top: 24px;
			}

			.implant-sub-read-contents02 {
				order: 1;
				z-index: 5;
			}
		}

		>.inner-width {
			grid-template-columns: 58% 1fr;
		}

		>.inner-width02 {
			grid-template-columns: 1fr 65%;

			.implant-sub-read-contents {
				.image {
					border: .5px solid var(--color-gold);
				}
			}

			.implant-sub-read-contents02 {
				justify-content: flex-start;
			}
		}
	}
}

@media screen and (max-width: 767px) {
	.implant-sub-read {
		width: calc(100% + min(calc(4.26vw * 2), calc(16px * 2)));
		margin-left: min(-4.26vw, -16px);

		>.inner,
		>.inner02 {
			grid-template-columns: repeat(1, 1fr);

			.implant-sub-read-contents {
				order: 1;
				z-index: 1;
			}

			.implant-sub-read-contents02 {
				order: 2;
				margin: -20px min(5.26vw, 16px) 0;
				border: .5px solid var(--color-gray-dark);
				z-index: 2;
			}
		}

		>.inner-width02 {
			.image {
				width: calc(100% - min(calc(4.26vw * 2), calc(16px * 2)));
				margin: 0 min(calc(4.26vw * 2), 16px);
			}
		}
	}
}

.implant-sub-read-contents,
.implant-sub-read-contents02 {
	position: relative;

	.image {
		display: block;
		width: 100%;
		margin: auto;
		background-color: var(--color-gray-light);

		>img {
			width: 100%;
			height: auto;
			display: block;
			object-fit: cover;
			aspect-ratio: 141/100;
		}
	}

	.text,
	.text02 {
		text-align: justify;
	}

	.text {
		margin-bottom: 24px;
	}

	.layout-video-box {
		margin: 0 auto 16px;
	}
}

.implant-sub-read-contents {
	z-index: 2;
}

.implant-sub-read-contents02 {
	background-color: var(--color-white);
	padding: min(10.66vw, 32px) min(5.33vw, 64px);
	display: flex;
	flex-direction: column;
	justify-content: center;
	position: relative;
	z-index: 1;
}

@media screen and (min-width: 768px) {
	.implant-sub-read-contents {
		width: calc(100% + 24px);
		min-height: 200px;
	}

	.implant-sub-read {
		>.inner {
			.implant-sub-read-contents02 {
				left: 0;
				min-height: 100%;
			}
		}
	}
}

@media screen and (max-width: 767px) {
	.implant-sub-read-list-space {
		margin-bottom: 16px;
	}
}

/*================================
-モノローグボックス
=================================*/

.implant-prologue {
	position: relative;

	&::before,
	&:after {
		content: "";
		position: absolute;
		width: min(65vw, 300px);
		height: min(65vw, 300px);
		background-color: var(--color-gray-dark);
		opacity: .4;
		z-index: 1;
	}

	&::before {
		top: -16px;
		left: -20px;
	}

	&::after {
		bottom: -16px;
		right: -20px;
		opacity: .3;
	}
}


@media screen and (max-width: 767px) {
	.implant-prologue {
		width: calc(100% + min(calc(4.26vw * 2), calc(16px * 2)));
		margin-left: min(-4.26vw, -16px);
	}
}

.implant-prologue-contents {
	background-color: var(--color-white);
	padding: min(17.06vw, 80px) min(5.33vw, 104px);
	margin-bottom: 80px;
	position: relative;
	z-index: 5;

	.text,
	.text02 {
		text-align: center;
		font-family: var(--font-serif);
		line-height: 2.4;
		font-size: min(3.73vw, 18px);

		strong {
			color: var(--color-gold-dark);
			display: inline-block;
		}
	}

	.text {
		margin-bottom: 24px;
	}
}

@media screen and (max-width: 767px) {
	.implant-prologue-contents {

		.text,
		.text02 {
			line-height: 2;
		}

		.text {
			margin-bottom: 40px;
		}
	}
}

/*================================
-アニメーション
=================================*/

.implant-animation-fadeIn,
.implant-animation-fadeInFirst {
	animation-name: fadeInAnime;
	animation-duration: 1.5s;
	animation-fill-mode: forwards;
	opacity: 0;
}

.implant-animation-fadeIn02 {
	animation-name: fadeInAnime;
	animation-duration: 2s;
	animation-fill-mode: forwards;
	opacity: 0;
}

@keyframes fadeInAnime {
	from {
		opacity: 0.1;
	}

	to {
		opacity: 1;
	}
}

.implant-animation-fadeUp,
.implant-animation-fadeUpFirst {
	animation-name: fadeUpAnime;
	animation-duration: 1.2s;
	animation-fill-mode: forwards;
	animation-timing-function: ease;
	opacity: 0;
}

@keyframes fadeUpAnime {
	from {
		opacity: 0;
		transform: translateY(40px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.implant-animation-fadeLeft,
.implant-animation-fadeLeftFirst {
	animation-name: fadeLeftAnime;
	animation-duration: 1.2s;
	animation-fill-mode: forwards;
	animation-timing-function: ease;
	opacity: 0;
}

@keyframes fadeLeftAnime {
	from {
		opacity: 0;
		transform: translateX(-40px);
	}

	to {
		opacity: 1;
		transform: translateX(0);
	}
}

.implant-animation-fadeRight,
.implant-animation-fadeRightFirst,
.implant-animation-fadeRightFirst-pc {
	animation-name: fadeRightAnime;
	animation-duration: 1.2s;
	animation-fill-mode: forwards;
	animation-timing-function: ease;
	opacity: 0;
}

@keyframes fadeRightAnime {
	from {
		opacity: 0;
		transform: translateX(40px);
	}

	to {
		opacity: 1;
		transform: translateX(0);
	}
}

@include mq(tab) {
	.implant-animation-fadeRightFirst-pc {
		animation-duration: initial;
		animation-fill-mode: initial;
		animation-timing-function: initial;
		opacity: 1;
	}
}


.implant-animation-fadeDown,
.implant-animation-fadeDownFirst {
	animation-name: fadeDownAnime;
	animation-duration: 1.2s;
	animation-fill-mode: forwards;
	animation-timing-function: ease;
	opacity: 0;
}

@keyframes fadeDownAnime {
	from {
		opacity: 0;
		transform: translateY(-40px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}


.implant-animation-fadeRightUp {
	animation-name: fadeRightUpAnime;
	animation-duration: 1.2s;
	animation-fill-mode: forwards;
	animation-timing-function: ease;
	opacity: 0;
}

@keyframes fadeRightUpAnime {
	from {
		opacity: 0;
		transform: translate(40px, 0);
	}

	to {
		opacity: 1;
		transform: translate(0);
	}
}

@include mq(sp) {

	@keyframes fadeRightUpAnime {
		from {
			opacity: 0;
			transform: translate(0, 40px);

		}

		to {
			opacity: 1;
			transform: translate(0, 0);
		}
	}
}


.implant-animation-fadeUpRight {
	animation-name: fadeUpRightAnime;
	animation-duration: 1.2s;
	animation-fill-mode: forwards;
	animation-timing-function: ease;
	opacity: 0;
}

@keyframes fadeUpRightAnime {
	from {
		opacity: 0;
		transform: translate(0, 40px);
	}

	to {
		opacity: 1;
		transform: translate(0);
	}
}

@include mq(sp) {

	@keyframes fadeUpRightAnime {
		from {
			opacity: 0;
			transform: translate(40px, 0);

		}

		to {
			opacity: 1;
			transform: translate(0, 0);
		}
	}
}

.implant-animation-fadeLeftUp {
	animation-name: fadeLeftUpAnime;
	animation-duration: 1.2s;
	animation-fill-mode: forwards;
	animation-timing-function: ease;
	opacity: 0;
}

@keyframes fadeLeftUpAnime {
	from {
		opacity: 0;
		transform: translate(-40px, 0);
	}

	to {
		opacity: 1;
		transform: translate(0);
	}
}

@include mq(sp) {

	@keyframes fadeLeftUpAnime {
		from {
			opacity: 0;
			transform: translate(0, 40px);

		}

		to {
			opacity: 1;
			transform: translate(0, 0);
		}
	}
}

.implant-animation-fadeUpLeft {
	animation-name: fadeUpLeftAnime;
	animation-duration: 1.2s;
	animation-fill-mode: forwards;
	animation-timing-function: ease;
	opacity: 0;
}

@keyframes fadeUpLeftAnime {
	from {
		opacity: 0;
		transform: translate(0, 40px);
	}

	to {
		opacity: 1;
		transform: translate(0);
	}
}

@include mq(sp) {

	@keyframes fadeUpLeftAnime {
		from {
			opacity: 0;
			transform: translate(-40px, 0);

		}

		to {
			opacity: 1;
			transform: translate(0, 0);
		}
	}
}


.implant-animation-fadeRightLeft {
	animation-name: fadeRightLeftAnime;
	animation-duration: 1.2s;
	animation-fill-mode: forwards;
	animation-timing-function: ease;
	opacity: 0;
}

@keyframes fadeRightLeftAnime {
	from {
		opacity: 0;
		transform: translate(40px, 0);
	}

	to {
		opacity: 1;
		transform: translate(0);
	}
}

@include mq(sp) {

	@keyframes fadeRightLeftAnime {
		from {
			opacity: 0;
			transform: translate(-40px, 0);

		}

		to {
			opacity: 1;
			transform: translate(0, 0);
		}
	}
}

.implant-animation-fadeLeftRight {
	animation-name: fadeLeftRightAnime;
	animation-duration: 1.2s;
	animation-fill-mode: forwards;
	animation-timing-function: ease;
	opacity: 0;
}

@keyframes fadeLeftRightAnime {
	from {
		opacity: 0;
		transform: translate(-40px, 0);
	}

	to {
		opacity: 1;
		transform: translate(0);
	}
}

@include mq(sp) {

	@keyframes fadeLeftRightAnime {
		from {
			opacity: 0;
			transform: translate(40px, 0);

		}

		to {
			opacity: 1;
			transform: translate(0, 0);
		}
	}
}

.implant-animation-fadeInTrigger,
.implant-animation-fadeInFirst,
.implant-animation-fadeUpTrigger,
.implant-animation-fadeUpFirst,
.implant-animation-fadeLeftTrigger,
.implant-animation-fadeLeftFirst,
.implant-animation-fadeRightTrigger,
.implant-animation-fadeRightFirst,
.implant-animation-fadeDownTrigger,
.implant-animation-fadeDownFirst,
.implant-animation-fadeLeftUpTrigger,
.implant-animation-fadeRightUpTrigger,
.implant-animation-fadeUpLeftTrigger,
.implant-animation-fadeUpRightTrigger,
.implant-animation-fadeRightLeftTrigger,
.implant-animation-fadeLeftRightTrigger {
	opacity: 0;
}

.implant-animation-fadeDelay01s {
	animation-delay: .1s;
}

.implant-animation-fadeDelay02s {
	animation-delay: .2s;
}

.implant-animation-fadeDelay03s {
	animation-delay: .3s;
}

.implant-animation-fadeDelay04s {
	animation-delay: .4s;
}

.implant-animation-fadeDelay05s {
	animation-delay: .5s;
}

.implant-animation-fadeDelay06s {
	animation-delay: .6s;
}

.implant-animation-fadeDelay07s {
	animation-delay: .7s;
}

.implant-animation-fadeDelay08s {
	animation-delay: .8s;
}

.implant-animation-fadeDelay09s {
	animation-delay: .9s;
}

.implant-animation-fadeDelay10s {
	animation-delay: 1s;
}

.implant-animation-fadeDelay11s {
	animation-delay: 1.1s;
}

.implant-animation-fadeDelay12s {
	animation-delay: 1.2s;
}

.implant-animation-fadeDelay13s {
	animation-delay: 1.3s;
}

.implant-animation-fadeDelay14s {
	animation-delay: 1.4s;
}

.implant-animation-fadeDelay15s {
	animation-delay: 1.5s;
}

.implant-animation-fadeDelay16s {
	animation-delay: 1.6s;
}

.implant-animation-fadeDelay17s {
	animation-delay: 1.7s;
}

.implant-animation-fadeDelay18s {
	animation-delay: 1.8s;
}

.implant-animation-fadeDelay19s {
	animation-delay: 1.9s;
}

.implant-animation-fadeDelay20s {
	animation-delay: 2s;
}

.implant-animation-fadeDelay21s {
	animation-delay: 2.1s;
}

.implant-animation-fadeDelay22s {
	animation-delay: 2.2s;
}

.implant-animation-fadeDelay23s {
	animation-delay: 2.3s;
}

.implant-animation-fadeDelay24s {
	animation-delay: 2.4s;
}

.implant-animation-fadeDelay25s {
	animation-delay: 2.5s;
}

.implant-animation-fadeDelay26s {
	animation-delay: 2.6s;
}

.implant-animation-fadeDelay27s {
	animation-delay: 2.7s;
}

.implant-animation-fadeDelay28s {
	animation-delay: 2.8s;
}

.implant-animation-fadeDelay29s {
	animation-delay: 2.9s;
}

.implant-animation-fadeDelay30s {
	animation-delay: 3s;
}

@media screen and (min-width: 768px) {
	.implant-animation-fadeDelay01s-pc {
		animation-delay: .1s;
	}

	.implant-animation-fadeDelay02s-pc {
		animation-delay: .2s;
	}

	.implant-animation-fadeDelay03s-pc {
		animation-delay: .3s;
	}

	.implant-animation-fadeDelay04s-pc {
		animation-delay: .4s;
	}

	.implant-animation-fadeDelay05s-pc {
		animation-delay: .5s;
	}

	.implant-animation-fadeDelay06s-pc {
		animation-delay: .6s;
	}

	.implant-animation-fadeDelay07s-pc {
		animation-delay: .7s;
	}

	.implant-animation-fadeDelay08s-pc {
		animation-delay: .8s;
	}
}


/*================================
-旧ページCSS
=================================*/

#gNavi>li:first-child>a {
	color: #003472;
}

.mainVisual {
	background-image: url(../img/common/main_img.jpg);
}

#pagePath {
	margin-bottom: 28px;
}

#main {
	width: 983px;
}

#main .headLine02 {
	margin-bottom: 33px;
	padding-bottom: 14px;
	font-size: 23px;
	line-height: 1.4;
}

#conts {
	margin-top: 1px;
}

#conts p {
	font-size: 15px;
	line-height: 1.85;
}

#conts .comImgBoxR {
	margin-bottom: 42px;
	border-bottom: none;
}

#conts .comImgBoxR .phoBox {
	width: 260px;
}

#conts .comImgBoxR .phoBox img {
	width: 100%;
}

#conts .comImgBoxR .txtBox {
	width: 378px;
}

#main .comImgBoxR .phoBox {
	margin: 4px 1px 0 0;
}

#conts .comImgBox {
	margin-bottom: 83px;
}

#conts .comImgBox .phoBox {
	width: 260px;
}

#conts .comImgBox .phoBox img {
	width: 100%;
}

#main .comImgBox .txtBox .text01 {
	margin-bottom: 0;
}

#main .h3Ttl {
	margin-bottom: 39px;
	padding-bottom: 13px;
}

#main .comTxtArea01 {
	margin-bottom: 35px;
	padding: 30px 35px 32px 33px;
}

#main .comTxtArea01 h3 {
	margin-bottom: 20px;
	font-size: 15px;
	line-height: 1.87;
}

#main .comTxtArea01 h3 a {
	text-decoration: underline;
}

#main .comTxtArea01 h3 a:hover {
	text-decoration: none;
}

#main .comTxtArea01 p {
	margin: 0 0 25px 22px;
}

#main .comTxtArea01 .text01 {
	margin-bottom: 0;
}

#main .txt {
	margin-bottom: 90px;
}

#main .txt01 {
	margin-bottom: 51px;
}

#conts .imgBoxR01 {
	padding-bottom: 41px;
	border-bottom: 1px dashed #E7E7E7;
}

#conts .imgBoxR01 .phoBox {
	width: 150px;
}

#conts .imgBoxR01 .phoBox img {
	width: 100%;
}

#conts .imgBoxR01 .txtBox {
	width: 499px;
}

#conts .imgBoxR02 {
	margin-bottom: 0;
	padding-bottom: 0;
	border-bottom: none;
}

#gHeader {
	background-color: #fff;
}

@media all and (min-width: 0) and (max-width: 767px) {
	.mainVisual {
		margin-bottom: 25px;
		background-image: url("../img/common/sp_main_img.jpg");
	}

	#conts {
		margin-top: 0;
	}

	#main {
		margin: 0 11px 66px 18px;
		width: auto;
	}

	#main .comMenu {
		margin-bottom: 30px;
	}

	#main .headLine02 {
		margin-bottom: 18px;
		padding-bottom: 5px;
		font-size: 15px;
		line-height: 1.27;
	}

	#conts p {
		font-size: 12px;
		line-height: 1.54;
	}

	#conts .comImgBoxR {
		margin: 0 0 56px;
		padding-bottom: 0;
	}

	#main .comImgBoxR .phoBox {
		margin: 0 auto 17px;
		width: 68%;
		float: none;
	}

	#conts .comImgBoxR .phoBox img {
		width: 100%;
	}

	#conts .comImgBoxR .txtBox {
		width: auto;
	}

	#conts .comImgBox .phoBox img {
		width: 100%;
	}

	#conts .comImgBox {
		margin-bottom: 57px;
	}

	#main .h3Ttl {
		margin-bottom: 19px;
	}

	#main .comTxtArea01 {
		margin: 0 0 21px 2px;
		padding: 22px 21px 24px 23px;
	}

	#main .comTxtArea01 h3 {
		margin-bottom: 17px;
		padding-left: 1em;
		font-size: 12px;
		line-height: 1.54;
		text-indent: -1em;
	}

	#main .comTxtArea01 p {
		margin: 0 0 20px;
	}

	#main .txt {
		margin-bottom: 59px;
	}

	#conts .imgBoxR01 {
		margin: 0 6px 18px 2px;
		padding-bottom: 26px;
	}

	#conts .imgBoxR01 .phoBox {
		margin-bottom: 0;
		width: 27%;
		float: right;
	}

	#main .txt01 {
		margin-bottom: 27px;
	}

	#conts .imgBoxR02 {
		margin-bottom: 0;
		padding-bottom: 0;
	}

	#main .comImgBox .phoBox {
		width: 68%;
	}

	#gFooter {
		background-color: #fff;
	}

	#gFooter .fBox {
		border-top: 0;
	}
}