@charset "UTF-8";
/********************************************************************************

page-top.css　トップページcss

********************************************************************************/

/*============================================================
 commonカスタム
*============================================================*/
#page-top #main-contents {
    padding-bottom: 0;
}

/*============================================================
 ページ内共通
*============================================================*/
#page-top .section {
}
#page-top .sec-title {
    text-align: center;
	font-size: 40px;
	line-height: 1;
	margin-bottom: 40px;
}
#page-top .sec-lead {
	text-align: center;
	font-weight: 500;
}
#page-top .parts-btn {
    margin: 0 auto;
}

/*============================================================
 メインビジュアル
*============================================================*/
#page-top #mainvisual {
}
#page-top #mainvisual .slick-dots {
	bottom: 20px;
}
#page-top #mainvisual .slick-dots li button:before {
	opacity: 1;
	color: #fff;
	font-size: 14px;
}
#page-top #mainvisual .slick-dots li.slick-active button:before {
	color: var(--common-color-sub);
}
#page-top #mainvisual .slider .item {
}
#page-top #mainvisual .slider .item .wrap{
	height: 630px;
	background-position: center center;
	background-size: cover;
	background-repeat: no-repeat;
}
#page-top #mainvisual .slider .item:nth-child(1) .wrap{
	background-image: url(../images/top/mainvisual-bg-img-01.jpg);
}
#page-top #mainvisual .slider .item:nth-child(2) .wrap{
	background-image: url(../images/top/mainvisual-bg-img-02.jpg);
}
#page-top #mainvisual .slider .item:nth-child(3) .wrap{
	background-image: url(../images/top/mainvisual-bg-img-03.jpg);
}
#page-top #mainvisual .slider .item .info {
	padding-top: 168px;
	text-align: center;
}
#page-top #mainvisual .slider .item .info > p {
	display: inline-block;
	background: #fff;
	width: 256px;
	border-radius: 10px;
	color: var(--common-color-sub);
	font-size: 32px;
	line-height: 1;
	font-weight: bold;
	padding: 14px 0;
	text-align: center;
	margin-bottom: 32px;
}
#page-top #mainvisual .slider .item .info .page-title {
	font-size: 48px;
	line-height: 1.4;
	margin-bottom: 44px;
}
#page-top #mainvisual .slider .item .info .page-title > span {
	display: inline-block;
	position: relative;
	z-index: 1;
	letter-spacing: 0.1em;
}
#page-top #mainvisual .slider .item .info .page-title > span.forSP {
	display: none;
}
#page-top #mainvisual .slider .item .info .page-title > span:before {
	content: "";
	position: absolute;
	background: #fff;
	height: 24px;
	width: 100%;
	border-radius: 10px;
	left: 50%;
	transform: translatex(-50%);
	bottom: 0;
	z-index: -1;
}
#page-top #mainvisual .slider .item .info .page-title > span .color {
	color: var(--common-color-sub);
}
#page-top #mainvisual .slider .item .info .clinic {
	gap: 64px;
}
#page-top #mainvisual .slider .item .info .clinic div {
	width: 230px;
	height: 100px;
	padding-top: 40px;
	text-align: center;
	position: relative;
	z-index: 1;
}
#page-top #mainvisual .slider .item .info .clinic div:before {
	content: "";
	position: absolute;
	background: url(../images/top/mainvisual-clinic-image.svg) no-repeat center center / contain;
	width: 230px;
	height: 100px;
	top: 2px;
	left: 0;
}
#page-top #mainvisual .slider .item .info .clinic div p {
	padding: 16px 0;
	font-size: 24px;
	line-height: 1;
	font-weight: bold;
	background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.3) 49.7%, rgba(255, 255, 255, 0) 100%);
	backdrop-filter: blur(6.5px);
	-webkit-backdrop-filter: blur(6.5px);
	-moz-backdrop-filter: blur(6.5px);
	-ms-backdrop-filter: blur(6.5px);
}

/*============================================================
 訪問歯科の専門家がいる 
 地域に密着したかかりつけ歯科医院
*============================================================*/
#page-top #sec-about {
	padding: 40px 0;
	margin-bottom: 32px;
}
#page-top #sec-about .inner {
	max-width: 100%;
	padding: 0;
	position: relative;
}
#page-top #sec-about .inner:before {
	content: "";
	position: absolute;
	background: url(../images/top/about-deco-img.png) no-repeat center center / contain;
	width: 272px;
	height: 234px;
	top: -170px;
	right: calc(50% - 640px);
	z-index: 3;
}
#page-top #sec-about .block {
	position: relative;
	gap: 80px;
	z-index: 1;
}
#page-top #sec-about .block .image {
	width: 43%;
	height: 453px;
	border-radius: 0 10px 10px 0;
	overflow: hidden;
	margin-bottom: 0;
}
#page-top #sec-about .block .image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center center;
}
#page-top #sec-about .block .info {
	max-width: 513px;
	/*position: relative;*/
}
#page-top #sec-about .block .info .title-en {
	font-size: 20px;
	letter-spacing: 0.1em;
	color: var(--common-color-sub);
	margin-bottom: 8px;
	font-weight: bold;
}
#page-top #sec-about .block .info .title {
	font-size: 32px;
	font-weight: bold;
	margin-bottom: 32px;
}
#page-top #sec-about .block .info .title span {
	display: inline-block;
	line-height: 1.8;
	padding-bottom: 12px;
	position: relative;
}
#page-top #sec-about .block .info .title span:before {
	content: "";
	position: absolute;
	background: url(../images/top/about-line-01.svg) no-repeat center center / contain;
	width: 104%;
	height: 8px;
	left: 0;
	bottom: 0;
}
#page-top #sec-about .block .info .title span:last-child:before {
	background: url(../images/top/about-line-02.svg) no-repeat center center / contain;
}
#page-top #sec-about .block .info .text {
	line-height: 2;
	font-weight: 500;
}

/*============================================================
 さくら歯科の特徴
*============================================================*/
#page-top #sec-merit .list {
	gap: 24px;
}
#page-top #sec-merit .item {
	width: 304px;
	text-align: center;
}
#page-top #sec-merit .item .icon {
	margin-bottom: 24px;
}

/*============================================================
 診療案内
*============================================================*/
#page-top #sec-menu {
	padding: 102px 0 72px;
	background: var(--common-color-background2);
}
#page-top #sec-menu .sec-title {
	margin-bottom: 24px;
}
#page-top #sec-menu .sec-lead {
	margin-bottom: 48px;
}
#page-top #sec-menu .list {
	gap: 40px;
}
#page-top #sec-menu .item {
	width: 460px;
	position: relative;
	background: #fff;
	border: 3px solid var(--common-color-sub);
	border-radius: 10px;
	padding: 40px 24px;
	transition: all .3s;
}
#page-top #sec-menu .item:before {
	content: "";
	position: absolute;
	background-image: url(../images/common/icon-arrow-pink.svg);
	background-size: contain;
	background-repeat: no-repeat;
	width: 8px;
	height: 8px;
	top: 50%;
	transform: translatey(-50%);
	right: 24px;
}
#page-top #sec-menu .item:hover {
	background: var(--common-color-sub);
	color: #fff;
}
#page-top #sec-menu .item:hover:before {
	background-image: url(../images/common/icon-arrow-white.svg);
}

#page-top #sec-menu .item p {
	padding-left: 42px;
	position: relative;
	font-size: 32px;
	font-weight: bold;
	line-height: 1;
}
#page-top #sec-menu .item p:before {
	content: "";
	position: absolute;
	background: url(../images/top/menu-list-img.png) no-repeat center center / contain;
	width: 32px;
	height: 32px;
	top: 0;
	left: 0;
}
#page-top #sec-menu .banner-link {
	display: block;
	position: relative;
	border: 3px solid var(--common-color-sub);
	border-radius: 10px;
	background: #fff;
	padding: 24px;
}
#page-top #sec-menu .banner-link:before {
	content: "";
	position: absolute;
	background: url(../images/top/menu-banner-link-img.png) no-repeat center center / contain;
	width: 77px;
	height: 82px;
	right: 0;
	bottom: -3px;
}
#page-top #sec-menu .banner-link .block {
	position: relative;
}
#page-top #sec-menu .banner-link .block:before {
	content: "";
	position: absolute;
	background-image: url(../images/top/banner-link-img-deco.png);
	background-size: contain;
	background-repeat: no-repeat;
	width: 92px;
	height: 256px;
	top: -28px;
	top: 50%;
	transform: translatey(-50%);
	left: -22px;
	z-index: 3;
}
#page-top #sec-menu .banner-link .image {
	width: 45%;
	margin-bottom: 0;
	overflow: hidden;
	position: relative;
	z-index: 1;
}

#page-top #sec-menu .banner-link .image img {
	transition: transform .5s ease;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center right;
}
#page-top #sec-menu .banner-link:hover .image img {
	transform:scale(1.1,1.1);
}
#page-top #sec-menu .banner-link .info {
	width: 58%;
	margin-left: -32px;
	position: relative;
	z-index: 2;
}
#page-top #sec-menu .banner-link .info .block-title {
	font-size: 32px;
	gap: 6px;
}
#page-top #sec-menu .banner-link .info p {
	font-weight: 500;
}

/*============================================================
 お知らせ
*============================================================*/
#page-top #sec-news {
	
}

/*============================================================
 医療DXについて
*============================================================*/
#page-top #sec-other-menu {
	background: var(--common-color-background2);
	padding: 72px 0;
}
#page-top #sec-other-menu .list {
	gap: 30px;
	margin-bottom: 40px;
}
#page-top #sec-other-menu .item {
	width: 300px;
	position: relative;
	border-radius: 10px;
	overflow: hidden;
}
#page-top #sec-other-menu .item .image img {
	transition: transform .6s ease;
}
#page-top #sec-other-menu .item:hover .image img {
	transform:scale(1.2,1.2);
}
#page-top #sec-other-menu .item .text {
	position: absolute;
	background: #fff;
	padding: 10px 0;
	text-align: center;
	width: 100%;
	left: 0;
	bottom: 0;
}
#page-top #sec-other-menu .item .text p {
	font-size: 20px;
	line-height: 1;
	font-weight: bold;
}

#page-top #sec-other-menu .sec-title {
	margin-bottom: 24px;
}
#page-top #sec-other-menu .sec-lead {
	text-align: left;
}


/*============================================================
 医院紹介
*============================================================*/
#page-top #sec-clinic {
	margin-bottom: 80px;
}
#page-top #sec-clinic .list {
	gap: 72px;
}
#page-top #sec-clinic .item {
	width: 100%;
}
#page-top #sec-clinic .item .block-title {
	text-align: center;
	font-size: 32px;
	margin-bottom: 40px;
}
#page-top #sec-clinic .item .block {
	gap: 40px;
}
#page-top #sec-clinic .item .block .schedule {
	width: 46%;
	margin-bottom: 0;
}
#page-top #sec-clinic .item .block .info {
	width: 49%;
}
#page-top #sec-clinic .item .block .info .label {
	color: var(--common-color-sub);
	padding-bottom: 16px;
	line-height: 1;
	font-size;: 20px;
	font-weight: bold;
	border-bottom: 1px solid #D6D6D6;
	margin-bottom: 16px;
}
#page-top #sec-clinic .item .block .info .address {
	font-size: 20px;
	font-weight: bold;
}

@media screen and (max-width: 1280px) {
	#page-top #sec-about .block {
		gap: 40px;
	}
}

/*_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/
 Tablet
_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/*/
@media screen and (max-width: 1080px) {
    /*============================================================
     メインビジュアル
    *============================================================*/
    #page-top #mainvisual {
    }
	
	#page-top #sec-about .inner {
		max-width: 816px;
		padding: 0 24px;
	}
	#page-top #sec-about .inner:before {
		right: -152px;
	}
	#page-top #sec-about .block .image {
		width: 100%;
		border-radius: 10px;
	}
	#page-top #sec-about .block .info {
		max-width: 100%;
	}
	
	#page-top #sec-merit .item {
		width: 30%;
	}
	
	#page-top #sec-menu .list {
		gap: 24px;
	}
	#page-top #sec-menu .item {
		width: 48%;
	}
	#page-top #sec-menu .item p {
		font-size: 28px;
	}
	#page-top #sec-menu .banner-link .info {
		width: 63%;
		margin-left: -60px;
	}
	
	#page-top #sec-other-menu .list {
		gap: 24px;
	}
	#page-top #sec-other-menu .item {
		width: 48%;
	}

	#page-top #sec-clinic .item .block {
		max-width: 480px;
		margin: 0 auto;
	}
	#page-top #sec-clinic .item .block .schedule {
		width: 100%;
	}
	#page-top #sec-clinic .item .block .info {
		width: 100%;
	}

}



/*_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/
 SP
_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/_/*/
@media screen and (max-width: 767px) {
	#page-top .section {
		margin-bottom: 64px;
	}
	#page-top .sec-title {
		font-size: 32px;
	}
    /*============================================================
     メインビジュアル
    *============================================================*/
    #page-top #mainvisual {
    }
	#page-top #mainvisual .slider .item .info > p {
		font-size: 24px;
		width: 204px;
	}
	#page-top #mainvisual .slider .item .info .page-title {
		font-size: 32px;
	}
	#page-top #mainvisual .slider .item .info .page-title > span.forSP {
		display: inline-block;
	}
	#page-top #mainvisual .slider .item .info .page-title > span:before {
		height: 16px;
		bottom: -1px;
	}
	#page-top #mainvisual .slider .item .info .clinic {
		gap: 24px;
		position: absolute;
		left: 50%;
		transform: translatex(-50%);
		bottom: 120px;
		width: 100%;
	}
	#page-top #mainvisual .slider .item .info .clinic div {
		width: 178px;
		height: 81px;
	}
	#page-top #mainvisual .slider .item .info .clinic div p {
		font-size: 18px;
		padding: 14px 0;
	}
	#page-top #mainvisual .slider .item .info .clinic div:before {
		background: url(../images/top/mainvisual-clinic-image-sp.svg) no-repeat center center / contain;
		width: 178px;
		height: 81px;
		top: 9px;
	}
	
	#page-top #sec-about .inner {
		max-width: 592px;
		padding: 0 16px;
	}
	#page-top #sec-about .inner:before {
		width: 180px;
		height: 158px;
		right: -18px;
		top: -158px;
	}
	#page-top #sec-about .block .image {
		height: initial;
	}
	#page-top #sec-about .block .info .title {
		font-size: 20px;
		margin-bottom: 16px;
	}
	#page-top #sec-about .block .info .title-en {
		font-size: 16px;
	}
	
	#page-top #sec-merit .item {
		width: 240px;
	}
	#page-top #sec-merit .item .block-title {
		margin-bottom: 0;
	}
	
	#page-top #sec-menu {
		padding: 56px 0 64px;
	}
	#page-top #sec-menu .item {
		width: 100%;
	}
	#page-top #sec-menu .banner-link .block {
		flex-direction: column;
		align-items: center;
		gap: 16px;
	}
	#page-top #sec-menu .banner-link .block:before {
		display: none;
	}
	#page-top #sec-menu .banner-link .block-title {
		font-size: 28px;
		margin-bottom: 0;
	}
	#page-top #sec-menu .banner-link .block-title img {
		margin-left: 4px;
	}
	#page-top #sec-menu .banner-link .image {
		width: 100%;
	}
	#page-top #sec-menu .banner-link .info {
		width: 100%;
		margin-left: 0;
	}

	#page-top #sec-other-menu {
		padding: 48px 0;
	}
	#page-top #sec-other-menu .item {
		width: 300px;
	}
	
	#page-top #sec-clinic .item .block {
		max-width: 100%;
	}

}

@media screen and (max-width: 480px) {
	#page-top #mainvisual .slider .item .info .clinic {
		gap: 10px;
	}
	
	#page-top #sec-menu .banner-link .block:before {
		display: block;
		width: 23%;
		height: 50%;
		top: 46px;
		transform: none;
	}
}