@charset "UTF-8";

/* メインビジュアル */
.sec-mv {
	position: relative;
	margin-top: 80px;
	padding: 50px 0 100px;
	background: url(../img/top/mv_bg.png) no-repeat right calc(5% + 40px) center/auto 90%;
}

.sec-mv::before {
	position: absolute;
	top: 0;
	right: 40px;
	bottom: 0;
	left: 0;
	z-index: -1;
	background: #e2e9ee;
	content: "";
}

.sec-mv__inner {
	position: relative;
	z-index: 1;
}

.sec-mv__lead {
	display: block;
	margin-bottom: 0.5em;
	font-size: 3.4rem;
	line-height: 1.3;
}

.sec-mv__lead > span {
	display: inline-block;
	overflow: hidden;
	opacity: 0;
	transition: opacity 1s cubic-bezier(0.19, 1, 0.22, 1);
}

.sec-mv__lead > span > span {
	display: block;
	transform: translateY(100%);
	transition: transform 1s cubic-bezier(0.19, 1, 0.22, 1);
}

.sec-mv__lead > span.is-active {
	opacity: 1;
}

.sec-mv__lead > span.is-active > span {
	transform: translateY(0);
}

.sec-mv__ttl {
	display: block;
	color: #fff;
	font-size: 22rem;
	line-height: 0.8;
}

.sec-mv__ttl > span {
	display: inline-block;
	overflow: hidden;
	opacity: 0;
	transition: opacity 1s cubic-bezier(0.19, 1, 0.22, 1);
}

.sec-mv__ttl > span > span {
	display: block;
	transform: translateY(100%);
	transition: transform 1s cubic-bezier(0.19, 1, 0.22, 1);
	will-change: transform;
}

.sec-mv__ttl > span.is-active {
	opacity: 1;
}

.sec-mv__ttl > span.is-active > span {
	transform: translateY(0);
}

.sec-mv-media {
	margin-bottom: 130px;
}

.sec-mv-media__inner {
	position: relative;
	margin-top: -180px;
}

.sec-mv-media__inner::before {
	display: block;
	padding-top: 56.25%;
	content: "";
}

.sec-mv-media__video {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

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

	.sec-mv__lead {
		font-size: calc((100vw - 260px) / 30);
	}

	.sec-mv__ttl {
		font-size: calc((100vw - 260px) / 6);
	}
}

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

	.sec-mv {
		margin-top: 0;
		padding: 15vw 0;
		background-position: right calc(5% + 20px) center;
	}

	.sec-mv::before {
		right: 20px;
	}

	.sec-mv__lead {
		font-size: 4vw;
	}

	.sec-mv__ttl {
		font-size: 17vw;
	}

	.sec-mv-media {
		margin-bottom: 60px;
	}

	.sec-mv-media__inner {
		width: calc(100% + 20px);
		margin: -38vw -10px 0;
		overflow: hidden;
	}

	.sec-mv-media__inner::before {
		padding-top: 83%;
	}

	.sec-mv-media__video {
		left: 50%;
		width: auto;
		transform: translateX(-50%);
	}
}

/* 診療ポリシー */
.sec-policy {
	margin-bottom: 150px;
}

.sec-policy__ttl {
	position: relative;
	margin-bottom: 3em;
	font-size: 3.6rem;
	line-height: 1;
	text-align: center;
}

.sec-policy__ttl > span:first-child {
	position: absolute;
	top: 50%;
	left: 50%;
	color: #add0e1;
	font-size: 20rem;
	white-space: nowrap;
	transform: translate(-50%, -50%);
	opacity: .6;
}

.sec-policy__ttl > span:last-child {
	position: relative;
}

.sec-policy__lead {
	margin-bottom: 2em;
	font-size: 3.6rem;
	text-align: center;
}

.sec-policy__body {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 150px;
}

.sec-policy__txt {
	margin: 0 auto;
	padding: 0 1em;
}

.sec-policy__bottom-img {
	background: url(../img/top/policy_bottom_bg.jpg) no-repeat center/100% auto fixed;
}

.sec-policy__bottom-img::before {
	display: block;
	padding-top: 41%;
	content: "";
}

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

	.sec-policy__ttl > span:first-child {
		font-size: 16rem;
	}

	.sec-policy__body {
		flex-flow: column-reverse;
		margin-bottom: 60px;
	}

	.sec-policy__img {
		margin-bottom: 30px;
	}

	.sec-policy__txt {
		padding: 0;
	}
}

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

	.sec-policy {
		margin-bottom: 100px;
	}

	.sec-policy__body {
		margin-bottom: 10px;
	}

	.sec-policy__ttl {
		font-size: 2.4rem;
	}

	.sec-policy__ttl > span:first-child {
		font-size: 20vw;
	}

	.sec-policy__lead {
		font-size: 1.8rem;
	}

	.sec-policy__img {
		max-width: calc(100% + 20px);
		margin-right: -10px;
		margin-left: -10px;
	}

	.sec-policy__bottom-img {
		background-attachment: initial;
	}
}

/* 当院のインプラント治療 */
.sec-advantage {
	position: relative;
	margin-bottom: 190px;
}

.sec-advantage__inner {
	margin-left: -70px;
	padding: 0 0 140px 70px;
	background: #e2e9ee;
}

.sec-advantage__ttl {
	position: relative;
	top: -1.5em;
	margin-bottom: 1em;
	font-size: 3.6rem;
	line-height: 1;
	white-space: nowrap;
	text-align: center;
}

.sec-advantage__ttl > span:first-child {
	color: #add0e1;
	font-size: 20rem;
	opacity: .8;
}

.sec-advantage__ttl > span:last-child {
	position: absolute;
	top: 50%;
	left: 50%;
	white-space: nowrap;
	transform: translate(-50%, -50%);
}

.sec-advantage__lead {
	margin-bottom: 2em;
	font-size: 3.6rem;
	text-align: center;
}

.sec-advantage__body {
	display: flex;
}

.sec-advantage__list {
	flex: 1;
}

.sec-advantage__item {
	position: relative;
}

.sec-advantage__item:not(:last-child) {
	padding-bottom: 200px;
}

.sec-advantage__img {
	position: relative;
}

.sec-advantage__img-main {
	display: block;
	width: 70%;
}

.sec-advantage__img-sub {
	position: absolute;
	right: 0;
	width: 40%;
}

.sec-advantage__item:nth-child(odd) .sec-advantage__img-sub {
	top: 40px;
}

.sec-advantage__item:nth-child(even) .sec-advantage__img-sub {
	bottom: 40px;
}

.sec-advantage__item-cnt {
	display: none;
}

.sec-advantage-cnt {
	position: sticky;
	top: 0;
	z-index: 1;
	width: 40%;
	height: 100vh;
}

.sec-advantage-cnt__item {
	position: absolute;
	bottom: 50px;
	left: 0;
	width: 100%;
	padding-right: 20px;
}

.sec-advantage-cnt__item::before {
	position: absolute;
	top: 20px;
	bottom: 0;
	left: -70px;
	width: 15px;
	background: #253a4b;
	content: "";
}

.sec-advantage-cnt__ttl-en {
	width: calc(100vw - 430px);
	color: #fff;
	font-size: 12rem;
	white-space: nowrap;
	text-shadow:
		rgba(0, 0, 0, 0.2) 1px 1px 10px,
		rgba(0, 0, 0, 0.2) -1px 1px 10px,
		rgba(0, 0, 0, 0.2) 1px -1px 10px,
		rgba(0, 0, 0, 0.2) -1px -1px 10px;
}

.sec-advantage-cnt__ttl-en > span {
	display: block;
	overflow: hidden;
}

.sec-advantage-cnt__ttl-en > span > span {
	display: block;
	transform: translate(0, 110%) scale(1, 2);
	transition: 0.7s;
	will-change: transform;
}

.sec-advantage-cnt__ttl-ja {
	display: block;
	margin-bottom: 0.5em;
	overflow: hidden;
	font-size: 3.2rem;
	white-space: nowrap;
}

.sec-advantage-cnt__ttl-ja span {
	display: block;
	transform: translate(0, 110%) scale(1, 2);
	transition: 0.7s;
	will-change: transform;
}

.sec-advantage-cnt__txt {
	padding-left: 60px;
}

.sec-advantage-cnt__link {
	float: right;
	margin-top: 1em;
	font-size: 3.6rem;
}

.sec-advantage-cnt__txt,
.sec-advantage-cnt__link {
	visibility: hidden;
	opacity: 0;
	transition: 0.7s;
}

.sec-advantage-cnt__item.is-visible {
	z-index: 1;
}

.sec-advantage-cnt__item.is-visible .sec-advantage-cnt__ttl-en > span > span,
.sec-advantage-cnt__item.is-visible .sec-advantage-cnt__ttl-ja > span {
	transform: none;
}

.sec-advantage-cnt__item.is-visible .sec-advantage-cnt__txt,
.sec-advantage-cnt__item.is-visible .sec-advantage-cnt__link {
	visibility: visible;
	opacity: 1;
	transition: opacity 1.7s;
}

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

	.sec-advantage__inner {
		margin-left: -55px;
	}

	.sec-advantage-cnt__ttl-en {
		font-size: 5.5vw;
	}

	.sec-advantage__item:not(:last-child) {
		padding-bottom: 10vw;
	}
}

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

	.sec-advantage__ttl > span:first-child {
		font-size: 16rem;
	}

	.sec-advantage__inner {
		padding-left: 30px;
	}

	.sec-advantage-cnt {
		display: none;
	}

	.sec-advantage__item-cnt {
		position: relative;
		display: block;
		padding-right: 10px;
	}

	.sec-advantage__item-cnt::before {
		position: absolute;
		top: 20px;
		bottom: 0;
		left: -30px;
		width: 10px;
		background: #253a4b;
		content: "";
	}

	.sec-advantage__item-ttl-en {
		color: #fff;
		font-size: 7vw;
		text-shadow: rgba(0, 0, 0, 0.2) 1px 1px 10px, rgba(0, 0, 0, 0.2) -1px 1px 10px, rgba(0, 0, 0, 0.2) 1px -1px 10px, rgba(0, 0, 0, 0.2) -1px -1px 10px;
	}

	.sec-advantage__item-ttl-ja {
		font-size: 3rem;
	}
}

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

	.sec-advantage {
		margin-bottom: 140px;
	}

	.sec-advantage__ttl {
		margin-bottom: 0;
		font-size: 2.4rem;
	}

	.sec-advantage__ttl > span:first-child {
		font-size: 15vw;
	}

	.sec-advantage__lead {
		font-size: 1.8rem;
	}

	.sec-advantage__inner {
		margin-right: -10px;
		margin-left: 0;
		padding: 0 10px 30px;
		padding-right: 10px;
	}

	.sec-advantage__item-ttl-en {
		font-size: 8vw;
	}

	.sec-advantage__item-ttl-ja {
		margin-bottom: 1em;
		font-size: 2rem;
		line-height: 1.5;
	}

	.sec-advantage__item-link {
		font-size: 2rem;
	}
}

/* 歯科医師紹介 */
.sec-doctor__ttl {
	position: relative;
	top: -1.5em;
	z-index: 1;
	margin-bottom: -1em;
	font-size: 3.6rem;
	line-height: 1;
	text-align: center;
}

.sec-doctor__ttl > span:first-child {
	position: absolute;
	top: 50%;
	left: 50%;
	color: #add0e1;
	font-size: 20rem;
	white-space: nowrap;
	transform: translate(-50%, -50%);
	opacity: .8;
}

.sec-doctor__ttl > span:last-child {
	position: relative;
}

.sec-doctor__list {
	position: relative;
	padding: 0 50px 100px 0;
}

.sec-doctor__list::before {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	z-index: -1;
	width: 100px;
	background: #e2e9ee;
	content: "";
}

.sec-doctor-box {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
}

.sec-doctor-box:nth-child(odd) {
	flex-flow: row-reverse;
}

.sec-doctor-box:not(:last-child) {
	margin-bottom: 60px;
}

.sec-doctor-box__img {
	width: calc(50% - 20px);
}

.sec-doctor-box__cnt {
	margin: 0 auto;
}

.sec-doctor-box:nth-child(even) .sec-doctor-box__cnt {
	padding-right: 60px;
}

.sec-doctor-box:nth-child(odd) .sec-doctor-box__img {
	margin-left: 40px;
}

.sec-doctor-box:nth-child(even) .sec-doctor-box__img {
	margin-right: 50px;
}

.sec-doctor-box__ttl {
	position: relative;
	z-index: 1;
	margin-bottom: 2em;
	font-size: 3.2rem;
	line-height: 1.3;
}

.sec-doctor-box__ttl > span:first-child {
	display: block;
	font-size: 1.5em;
}

.sec-doctor-box__lead {
	margin-bottom: 1em;
	font-size: 3.1rem;
	line-height: 1.7;
}

.sec-doctor-box__link {
	float: right;
	margin-top: 1.5em;
	font-size: 3.6rem;
}

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

	.sec-doctor__ttl {
		margin-bottom: 1em;
	}

	.sec-doctor__ttl > span:first-child {
		font-size: 16rem;
	}

	.sec-doctor__list {
		padding-right: 60px;
	}

	.sec-doctor__list::before {
		width: 50px;
	}

	.sec-doctor-box {
		display: block;
	}

	.sec-doctor-box__img {
		display: block;
		width: 100%;
		max-width: 400px;
		margin: 0 auto 30px;
	}

	.sec-doctor-box:nth-child(odd) .sec-doctor-box__img,
	.sec-doctor-box:nth-child(even) .sec-doctor-box__img {
		margin: 0 auto 30px;
	}

	.sec-doctor-box__ttl {
		text-align: center;
	}

	.sec-doctor-box:nth-child(odd) .sec-doctor-box__cnt,
	.sec-doctor-box:nth-child(even) .sec-doctor-box__cnt {
		padding-right: 0;
	}

	.sec-doctor-box__lead {
		text-align: center;
	}
}

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

	.sec-doctor__ttl {
		font-size: 2.4rem;
	}

	.sec-doctor__ttl > span:first-child {
		font-size: 20vw;
	}

	.sec-doctor__list {
		padding-right: 0;
		padding-bottom: 40px;
	}

	.sec-doctor__list::before {
		right: -10px;
		width: 25px;
	}

	.sec-doctor-box:nth-child(odd) .sec-doctor-box__cnt,
	.sec-doctor-box:nth-child(even) .sec-doctor-box__cnt {
		padding-right: 20px;
	}

	.sec-doctor-box__ttl {
		font-size: 2rem;
	}

	.sec-doctor-box__lead {
		font-size: 2rem;
	}

	.sec-doctor-box__link {
		font-size: 2rem;
	}
}

/* 治療の流れ、治療費 */
.sec-flow,
.sec-fees {
	overflow: hidden;
}

.sec-flow {
	margin-bottom: 110px;
}

.sec-fees {
	margin-bottom: 150px;
}

.sec-flow__inner,
.sec-fees__inner {
	display: flex;
	align-items: center;
}

.sec-flow__inner {
	flex-flow: row-reverse;
}

.sec-flow__img,
.sec-fees__img {
	width: 60%;
	max-width: 800px;
}

.sec-flow__cnt,
.sec-fees__cnt {
	position: relative;
	z-index: 1;
	flex: 1;
	max-width: 570px;
}

.sec-flow__cnt {
	margin: 0 30px 0 auto;
}

.sec-fees__cnt {
	margin: 0 auto 0 30px;
	padding-right: 10px;
}

.sec-flow__ttl,
.sec-fees__ttl {
	position: relative;
	margin: 1.5em 0 1em;
	font-size: 4.1rem;
	line-height: 1;
}

.sec-flow__ttl > span:first-child,
.sec-fees__ttl > span:first-child {
	position: absolute;
	top: -0.2em;
	left: -0.3em;
	z-index: -1;
	color: #add0e1;
	font-size: 24rem;
	white-space: nowrap;
	opacity: .8;
}

.sec-flow__link,
.sec-fees__link {
	float: right;
	margin-top: 0.5em;
	font-size: 3.6rem;
}

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

	.sec-flow__ttl > span:first-child, .sec-fees__ttl > span:first-child {
		font-size: 16rem;
	}
}

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

	.sec-flow,
	.sec-fees {
		margin-bottom: 40px;
	}

	.sec-flow__inner,
	.sec-fees__inner {
		display: block;
	}

	.sec-flow__img,
	.sec-fees__img {
		width: calc(100% + 20px);
		max-width: none;
		margin: 0 -10px;
	}

	.sec-flow__ttl, .sec-fees__ttl {
		font-size: 2.4rem;
	}

	.sec-flow__ttl > span:first-child,
	.sec-fees__ttl > span:first-child {
		left: 0;
		font-size: 20vw;
	}

	.sec-flow__link,
	.sec-fees__link {
		font-size: 2rem;
	}
}

/* Implant Movie */
.sec-movie {
	padding-bottom: 180px;
	background: #c9d7b9;
}

.sec-movie__ttl {
	position: relative;
	top: -40px;
	padding-top: 140px;
	color: #fff;
	font-size: 6rem;
	line-height: 1;
	text-align: center;
	text-shadow: 4px 4px 8px rgba(0, 0, 0, 0.4);
	background: url(../img/top/movie_logo.svg) no-repeat top;
	background-size: auto 60%;
}

.sec-movie__ttl span {
	display: block;
	font-size: 1.5em;
}

.sec-movie__media {
	position: relative;
	max-width: 900px;
	margin: 0 auto;
}

.sec-movie__media::before {
	display: block;
	padding-top: 56.25%;
	content: "";
}

.sec-movie__media iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

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

	.sec-movie {
		padding-bottom: 80px;
	}

	.sec-movie__ttl {
		top: -25px;
		padding-top: 80px;
		font-size: 6vw;
		background-size: 70px;
	}
}

/* フッターギャラリー */
.parts-gallery {
	background-image: url(../img/top/gallery_bg.jpg);
}

/* 無料カウンセリング */
.parts-counseling {
	margin-bottom: 120px;
}

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

	.parts-counseling {
		margin-bottom: 40px;
	}
}

/* 250630追加 */
.mv__bnr {
	width: 200px;
	position: absolute;
	top: -20px;
	right: 5%;
	z-index: 1;
}

.mov__bnr {
	text-align: center;
}
.mov__bnr img {
	width: 100vw;
}
.mov__bnr.sp {
	display: none;
}

@media screen and (max-width: 796px) {
	.mv__bnr {
		width: 90px;
		top: -50px;
		right: 8%;
	}
	.mov__bnr.sp {
		display: block;
		width: calc(100% + 20px);
		margin: 0 -10px 0;
	}
}