/* ===========================================
ひらいで歯科医院ホームページ
トップページのスタイルシート
home.css
http://www.hiraide-shika.com/
============================================== */


/*-------------------------------
地域情報
-------------------------------*/
.ft_local {
	/* ↓トップのみ表示 */
	display: block;
}

/*================================
メインビジュアル
================================*/
#main_top {
	margin-bottom: 20px;
	background: #f9f7e9;
}
#main_top .inner {
	display: flex;
	justify-content: center;
	align-items: stretch;
	gap: 20px;
	max-width: 1000px;
	width: 100%;
	margin: 0 auto;
	padding-top: 20px;
	padding-bottom: 14px;
}
/*-------------------------------
スライド
-------------------------------*/
.mv_slider {
	max-width: 700px;
	width: 70%;
}
.slider-wrapper {}
.nivoSlider {
	position: relative;
	z-index: 1;
	max-width: calc(100% - 20px);
	width: 100%;
	height: 0;
	margin: 10px;
	padding-top: 50%;
	aspect-ratio: 1/0.515;
	background: #fff url(img/slideimg/loading.gif) no-repeat 50% 50%;
}
.nivoSlider::before {
	position: absolute;
	z-index: -1;
	content: "";
	left: 50%;
	top: 50%;
	translate: -50% -50%;
	width: calc(100% + 20px);
	height: calc(100% + 20px);
	background: #fff;
	border-radius: 4px;
	box-shadow: 0 0 6px rgba(0,0,0,0.12);
}
.nivoSlider img {
	position: absolute;
	top: 0;
	left: 0;
	display: none;
}
.nivoSlider a {
	border: 0;
	display: block;
}
.nivo-slice {
	display:block;
	position:absolute;
	z-index:5;
	height:100%;
	top:0;
}
.nivo-box {
	display:block;
	position:absolute;
	z-index:5;
	overflow:hidden;
}
.nivo-box img { display:block; }
/*ページネーション*/
.nivo-controlNav {
	padding: 10px;
	text-align: right;
}
.nivo-controlNav a {
	display: inline-block;
	width: 24px;
	height: 24px;
	background: url(img/slideimg/bullets.png) no-repeat;
	background-position: 0 -24px;
	text-indent: 100%;
	white-space: nowrap;
	overflow: hidden;
	border: 0;
	margin: 0 5px 0 0;
}
.nivo-controlNav a.active {
	background-position: 0 0;
}
/*矢印*/
.nivo-directionNav {}
.nivo-directionNav a {
	position: absolute;
	top: 45%;
	z-index: 9;
	cursor: pointer;
}
.nivo-directionNav a {
	display: block;
	width: 30px;
	height: 30px;
	background: url(img/slideimg/arrows.png) no-repeat;
	text-indent: -9999px;
	border: 0;
	transition: all 200ms ease-in-out;
}
a.nivo-nextNav {
	background-position: -30px 0;
	right: -20px;
}
a.nivo-prevNav {
	left: -20px;
}
.nivo-controlNav.nivo-thumbs-enabled {
	width: 100%;
}
.nivo-controlNav.nivo-thumbs-enabled a {
	width: auto;
	height: auto;
	background: none;
	margin-bottom: 5px;
}
.nivo-controlNav.nivo-thumbs-enabled img {
	display: block;
	width: 120px;
	height: auto;
}

/*-------------------------------
メインインフォ
-------------------------------*/
.mv_info {
	max-width: 280px;
	width: calc(100% - (70% + 20px));
	overflow: hidden;
	background: #fff;
	border-radius: 4px;
	box-shadow: 0 0 6px rgba(0,0,0,0.12);
}
.mv_info .body {
	padding: 10px;
}
.mv_info .body.-dashed {
	border-bottom: 2px dashed #f9f7e9;
}

/*================================
院長あいさつ
================================*/
.main_staff {
	display: flex;
	justify-content: center;
	align-items: stretch;
	flex-flow: row wrap;
	gap: 10px;
	padding: 20px;
	border: 1px solid #cef2e4;
	border-radius: 10px;
	box-shadow: 0 0 6px #cef2e4 inset;
}
.main_staff .pic {
	width: 140px;
}
.main_staff .article {
	width: calc(100% - (140px + 10px));
}
.staff_flex {
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-flow: row wrap;
	gap: 10px;
	margin-bottom: 10px;
}
.staff_name {}
.staff_name .job {
	padding-left: 10px;
	padding-right: 6px;
	font-size: 20px;
	font-weight: bold;
	line-height: 1.4;
	color: #a6a6a6;
}
.staff_name .name {
	position: relative;
	z-index: -1;
	padding-left: 15px;
	font-size: 20px;
	line-height: 1.4;
}
.staff_name .name::before {
	position: absolute;
	z-index: 1;
	content: "";
	left: 0;
	top: 0;
	width: 6px;
	height: 100%;
	background: #ffe599;
	border-radius: 6px;
}
.staff_link {}
.staff_comments {
	padding: 0 10px;
	text-align: left;
	line-height: 26px;
	font-size: 94%;
	background: url(img/border_blue02.gif) left top repeat;
}

/*================================
5つの取り組み
================================*/
.points {
	padding-bottom: 10px;
	margin-bottom: 20px;
	background: url(img/point_bg02.gif) left bottom no-repeat;
}
.points h3 {
	height: 93px;
	padding: 0;
	margin: 0;
	background: url(img/point_title.gif) left top no-repeat;
	overflow: hidden;
	text-indent: 100%;
	white-space: nowrap;
	margin-bottom: -10px;
}
.points_cont {
	padding: 5px 0 0;
	background: url(img/point_bg01.gif) left top repeat-y;
}
.points_cont li {
	padding: 18px 20px 18px;
	overflow: hidden;
	background: url(img/border_white.gif) left bottom repeat-x;
}
.photo_l {
	float: left;
	margin-right: 10px;
}
.photo_r {
	float: right;
	margin-left: 10px;
}
.points_comment {
	width: 460px;
	text-align: left;
	overflow: hidden;
}
.points_comment img {
	display: block;
	margin-bottom: 10px;
}

/*================================
お口の健康を守るお手伝
================================*/
.help_service {
	margin-bottom: 20px;
	overflow: hidden;
}
.help_service h3 {
	max-width: 584px;
	height: 0;
	padding-top: 4.8%;
	margin: 0 auto 15px;
	background: url(img/help_catch.gif) left top/100% auto no-repeat;
	overflow: hidden;
	text-indent: 100%;
	white-space: nowrap;
}
.help_service .box_l {
	display: block;
	overflow: hidden;
	float: left;
	width: 352px;
	aspect-ratio: 1/0.398;
	margin-bottom: 6px;
	white-space: nowrap;
	text-indent: 100%;
}
.help_service .box_r {
	display: block;
	overflow: hidden;
	float: right;
	width: 352px;
	aspect-ratio: 1/0.398;
	margin-bottom: 6px;
	white-space: nowrap;
	text-indent: 100%;
}
.help_service .help01 {
	background: url(img/help01.jpg) left top/100% auto no-repeat;
}
.help_service .help02 {
	background: url(img/help02.jpg) left top/100% auto no-repeat;
}
.help_service .help03 {
	background: url(img/help03.jpg) left top/100% auto no-repeat;
}
.help_service .help04 {
	background: url(img/help04.jpg) left top/100% auto no-repeat;
}

/*================================
新着情報
================================*/
.whats_new {
	padding: 2px 2px 12px;
	background: url(img/whatsnew_pattern.jpg) left top;
	border: 1px solid #dddddd;
	box-shadow: 0 0 0 2px #fff inset;
	border-radius: 10px;
}
.whats_new h3 {
	overflow: hidden;
	border-radius: 10px;
	text-align: left;
}
.whats_new_cont {
	height: 155px;
	margin: 0 10px;
	padding: 10px !important;
	background: #fff;
	text-align: left;
	box-sizing: border-box;
	max-width: 100%;
	width: calc(100% - 20px) !important;
}
.jspContainer {
	box-sizing: border-box;
	width: 100% !important;
	height: 100% !important;
}
.jspPane {
	box-sizing: border-box;
	width: 100% !important;
	padding-right: 10px !important;
}
.whats_new_cont li {
	padding: 10px 10px 15px 0;
	background: url(common/img/border_gray.gif) left bottom repeat-x;
}
.whats_new_cont li .whatsnew_title {
	min-height: 18px;
	padding-left: 20px;
	margin-bottom: 15px;
	background: url(img/whatsnew_icon.gif) left top no-repeat;
	overflow: hidden;
	font-size: 94%;
	width: 6.5em;
	float: left;
}
.whatsnew_title .date {
	width: 95px;
	float: left;
}
.whats_new_cont li .cont {
	overflow: hidden;
	zoom: 1;
	margin-left: 20px;
}


/*================================
TABLET横 1080px～0px
================================*/
@media screen and (max-width: 1080px) {}


/*================================
TABLET縦 834px～0px
================================*/
@media screen and (max-width: 834px) {


	/*================================
	メインビジュアル
	================================*/
	#main_top {}
	#main_top .inner {}
	/*-------------------------------
	スライド
	-------------------------------*/
	.mv_slider {}
	.slider-wrapper {}
	.nivoSlider {}
	.nivoSlider::before {}
	.nivoSlider img {}
	.nivoSlider a {}
	.nivo-slice {}
	.nivo-box {}
	.nivo-box img {}
	/*ページネーション*/
	.nivo-controlNav {}
	.nivo-controlNav a {}
	.nivo-controlNav a.active {}
	/*矢印*/
	.nivo-directionNav {}
	.nivo-directionNav a {}
	.nivo-directionNav a {}
	a.nivo-nextNav {}
	a.nivo-prevNav {}
	.nivo-controlNav.nivo-thumbs-enabled {}
	.nivo-controlNav.nivo-thumbs-enabled a {}
	.nivo-controlNav.nivo-thumbs-enabled img {}

	/*-------------------------------
	メインインフォ
	-------------------------------*/
	.mv_info {}
	.mv_info .body {}
	.mv_info .body.-dashed {}

	/*================================
	院長あいさつ
	================================*/
	.main_staff {}
	.main_staff .pic {}
	.main_staff .article {}
	.staff_flex {
		justify-content: center;
	}
	.staff_name {
		width: 100%;
	}
	.staff_name .job {}
	.staff_name .name {}
	.staff_name .name::before {}
	.staff_link {}
	.staff_comments {}

	/*================================
	5つの取り組み
	================================*/
	.points {}
	.points h3 {}
	.points_cont {}
	.points_cont li {}
	.photo_l {}
	.photo_r {}
	.points_comment {}
	.points_comment img {}

	/*================================
	お口の健康を守るお手伝
	================================*/
	.help_service {}
	.help_service h3 {}
	.help_service .box_l {}
	.help_service .box_r {}

	/*================================
	新着情報
	================================*/
	.whats_new {}
	.whats_new h3 {}
	.whats_new_cont {}
	.jspContainer {}
	.jspPane {}
	.whats_new_cont li {}
	.whats_new_cont li .whatsnew_title {}
	.whatsnew_title .date {}
	.whats_new_cont li .cont {}
	
	
}


/*================================
SP表示 667px～0px
================================*/
@media (max-width: 667px)  {


	/*================================
	メインビジュアル
	================================*/
	#main_top {}
	#main_top .inner {
		flex-flow: row wrap;
	}
	/*-------------------------------
	スライド
	-------------------------------*/
	.mv_slider {
		width: 100%;
	}
	.slider-wrapper {}
	.nivoSlider {}
	.nivoSlider::before {}
	.nivoSlider img {}
	.nivoSlider a {}
	.nivo-slice {}
	.nivo-box {}
	.nivo-box img {}
	/*ページネーション*/
	.nivo-controlNav {}
	.nivo-controlNav a {
		width: 10px;
		height: 10px;
		background-size: 10px;
		background-position: 0px -10px;
	}
	.nivo-controlNav a.active {}
	/*矢印*/
	.nivo-directionNav {}
	.nivo-directionNav a {}
	.nivo-directionNav a {}
	a.nivo-nextNav {}
	a.nivo-prevNav {}
	.nivo-controlNav.nivo-thumbs-enabled {}
	.nivo-controlNav.nivo-thumbs-enabled a {}
	.nivo-controlNav.nivo-thumbs-enabled img {}

	/*-------------------------------
	メインインフォ
	-------------------------------*/
	.mv_info {
		width: 100%;
	}
	.mv_info .body {}
	.mv_info .body.-dashed {}

	/*================================
	院長あいさつ
	================================*/
	.main_staff {}
	.main_staff .pic {
		width: 100%;
	}
	.main_staff .article {
		width: 100%;
	}
	.staff_flex {}
	.staff_name {}
	.staff_name .job {}
	.staff_name .name {}
	.staff_name .name::before {}
	.staff_link {}
	.staff_comments {}

	/*================================
	5つの取り組み
	================================*/
	.points {}
	.points h3 {
		background-size: 140% auto;
		height: 0;
		padding-top: 21%;
	}
	.points_cont {}
	.points_cont li {}
	.photo_l,
	.photo_r {
		display: block;
		float: none;
		margin: 0 auto 10px;
	}
	.points_comment {
		width: 100%;
	}
	.points_comment img {}

	/*================================
	お口の健康を守るお手伝
	================================*/
	.help_service {}
	.help_service h3 {}
	.help_service .box_l,
	.help_service .box_r {
		float: none;
		width: 100%;
	}

	/*================================
	新着情報
	================================*/
	.whats_new {}
	.whats_new h3 {}
	.whats_new_cont {}
	.jspContainer {}
	.jspPane {}
	.whats_new_cont li {}
	.whats_new_cont li .whatsnew_title {
		float: none;
		width: 100%;
	}
	.whatsnew_title .date {}
	.whats_new_cont li .cont {
		margin-left: 0;
	}

}