body {
	height: 100%;
	background-color: #fff;
}

#img-view {
	background: url("images/top/bg1.jpg") top center no-repeat;
	background-size: cover;
	width: 100%;
	min-width: 1000px;
	height: 100%;
	margin: 0 auto;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 0;
	opacity: 1;
	display: table;
}
#img-view.lp-anime {
	animation: 1s linear 0s 1 alternate fadein;
}
@keyframes fadein {
	from{
		opacity: 0;
	}
	to{
		opacity: 1;
	}
}
#img-view .blur-img {
	opacity: 0;
	background: url("images/top/bg1_blur.jpg") top center no-repeat;
	background-size: cover;
	width: 100%;
	height: 100%;
	position: fixed;
	margin: 0 auto;
	top: 0;
	left: 0;
	z-index: 10;
	transition: 0.25s;
}
#img-view .blur-img.on {
	opacity: 1;
}
#img-view .title {
	position: relative;
	z-index: 20;
	display: table-cell;
	vertical-align: middle;
}
#img-view .title h1 {
	position: relative;
	margin: 0 auto;
	width: 436px;
}

#img-view .title h1:after {
	content: "";
	background: url("images/top/pc_sabrina_logo_blur_copy_20230922.png") top center no-repeat;
	width: 440px;
	height: 260px;
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 30;
	opacity: 0;
	transition: 0.25s;
}
#img-view .title.on h1:after {
	opacity: 1;
}
#img-view .title h1 img {
	display: block;
	margin: 0 auto;
	opacity: 1;
	transition: 0.25s;
}
#img-view .title h1 img.sp {
	display: none;
}
#img-view.lp-anime .title h1 > img {
	animation: 2.5s linear 0s 1 alternate logo-fadein;
}
@keyframes logo-fadein {
	0%{
		opacity: 0;
	}
	60%{
		opacity: 0;
	}
	100%{
		opacity: 1;
	}
}
#img-view .title.on img {
	opacity: 0;
}
#img-view .title h1 span {
	display: block;
	width: 100%;
	height: 5px;
	margin: 3px auto 0;
	border-bottom: 1px solid #fff;
	transition: 0.25s;
	left: 50%;
}
#img-view .title.on h1 span {
	border-bottom: 1px solid transparent;
}
#img-view.lp-anime .title h1 span {
	animation: 3.4s linear 0s 1 alternate underline;
}
@keyframes underline {
	0%{
		width: 0;
	}
	80%{
		width: 0;
	}
	100%{
		width: 100%;
	}
}
#img-view .title h1 span img {
	display: block;
	opacity: 0;
	transition: 0.25s;
}

#img-view .title.on h1 span img {
	opacity: 1;
}
#img-view .service-img {
	opacity: 0;
	background: url("images/top/bg2.jpg") top center no-repeat;
	background-size: cover;
	width: 100%;
	height: 100%;
	margin: 0 auto;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 40;
	transition: 1.0s;
}
#img-view .service-img.on {
	opacity: 1;
}

#global-nav {
	position: fixed;
	top: 39px;
	right: 40px;
	z-index: 5000;
	padding: 0;
}

#top.section .tableCell {
	text-align: center;
	vertical-align: bottom;
}
#top.section .tableCell .scroll {
	margin-bottom: 5%;
}

#craftsman .board {
	background-color: rgba(40,19,13,0.7);
	width: 1000px;
	margin: 100px auto 0;
	padding: 141px 0;
	z-index: 1000;
	position: relative;
}
#craftsman .board .msg1 img,
#craftsman .board .msg2 img {
	opacity: 0;
}
#craftsman .board .msg1 {
	background: url("images/top/pc_message.png") center top no-repeat;
	width: 373px;
	height: 126px;
	margin: 0 auto 59px;
}
#craftsman .board .msg2 {
	background: url("images/top/pc_message2.png") center top no-repeat;
	width: 491px;
	height: 139px;
	margin: 0 auto;
}


#craftsman .board a {
	display: block;
	border: 1px solid #fff;
	width: 319px;
	margin: 83px auto 0;
	padding: 21px 0 19px;
	position: relative;
}

#craftsman .board a:hover {
	opacity: 0.8;
}

#craftsman .board > a:after {
	content: "";
	position: absolute;
	top: 25px;
	right: 21px;
	width: 8px;
	height: 16px;
	background: url("images/top/link_arrow.png") center center no-repeat;
}

#craftsman .board a img {
	display: block;
	margin: 0 auto;
}

#service .service-list {
	padding: 124px 0;
}
#service h2 {
	background: url("images/top/pc_service.png") center top no-repeat;
	width: 135px;
	height: 58px;
	margin: 0 auto 51px;
}

#service .board {
	background-color: rgba(40,19,13,0.7);
	width: 1000px;
	margin: 0 auto;
	padding: 100px 0 120px;
	z-index: 1000;
	position: relative;
}

#service .board ul {
	list-style: none;
	overflow: hidden;
	padding-left: 35px;
	margin-bottom: 60px;
}

#service .board ul li {
	float: left;
	margin-left: 10px;
}

#service .board ul li a {
	display: block;
	position: relative;
	width: 300px;
	height: 297px;
}
#service .board ul li.polishing a {
	background: url("images/top/pc_polishing.jpg") center top no-repeat;
}
#service .board ul li.repair a {
	background: url("images/top/pc_repair.jpg") center top no-repeat;
}
#service .board ul li.cleaning a {
	background: url("images/top/pc_cleaning.jpg") center top no-repeat;
}


#service .board ul li a:before {
	content: "";
	border: 1px solid #fff;
	position: absolute;
	top: 6px;
	left: 6px;
	width: 288px;
	height: 285px;
	display: block;
	z-index: 200;
	opacity: 0;
	transition-duration: 0.5s;
}

#service .board ul li a:hover:before {
	opacity: 1;
}

#service .board ul li a:after {
	content: "";
	background-color: #000;
	opacity: 0;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: block;
	z-index: 100;
	transition: 0.5s;
}

#service .board ul li a:hover:after {
	opacity: 0.2;
}

#service .board ul li a p {
	position: absolute;
	top: 130px;
	width: 100%;
	z-index: 500;
}

#service .board ul li a p img {
	display: block;
	margin: 0 auto;
	opacity: 0;
	transition: 0.5s;
	transform: translateX(-20px);
}

#service .board ul li a:hover p img {
	opacity: 1.0;
	transform: translateX(0px);
}

#service .board > a {
	border: 1px solid #fff;
	display: block;
	width: 319px;
	height: 63px;
	margin: 0 auto;
	position: relative;
	background: url("images/top/pc_price.png") center center no-repeat;
}
#service .board > a img {
	display: none;
}
#service .board > a:hover {
	opacity: 0.8;
}
#service .board > a:after {
	content: "";
	position: absolute;
	top: 25px;
	right: 21px;
	width: 8px;
	height: 16px;
	background: url("images/top/link_arrow.png") center center no-repeat;
}

#others {
	padding-top: 449px;
	background: url("images/top/bg3.jpg") top center no-repeat;
}

#order {
	background-color: #2f2f2f;
	padding: 79px 0 81px;
}
#order p {
	text-align: center;
	color: #fff;
	line-height: 1.0;
	margin-top: 27px;
}
#order a {
	border: 1px solid #fff;
	display: block;
	width: 319px;
	height: 63px;
	margin: 0 auto;
	position: relative;
	background: url("images/top/pc_service_order.png") center center no-repeat;
}
#order a:hover {
	opacity: 0.8;
}
#order a:after {
	content: "";
	position: absolute;
	top: 25px;
	right: 21px;
	width: 8px;
	height: 16px;
	background: url("images/top/link_arrow.png") center center no-repeat;
}
#order  a img {
	display: none;
}

#news {
	padding: 99px 0 88px;
	background-color: #fff;
	position: relative;
	z-index: 1000;
	text-align: center;
}
#news h2 {
	margin-bottom: 63px;
	background: url("images/top/pc_news.png") center top no-repeat;
	width: 125px;
	height: 53px;
}
#news h2 img {
	display: none;
}
#news ul {
	width: 920px;
	margin: 0 auto;
	list-style: none;
	padding-bottom: 48px;
	text-align: left;
}
#news ul li {
	border-bottom: 1px dotted #b2b2b2;
	margin-bottom: 19px;
	padding-bottom: 7px;
}
#news ul li dl dt {
	font-size: 12px;
	overflow: hidden;
	margin-bottom: 7px;
}
#news ul li dl dt .mark {
	float: left;
}
#news ul li dl dt .mark img {
	display: block;
}
#news ul li dl dt .date {
	float: left;
	line-height: 1.2;
	margin-left: 6px;
}
#news ul li dl dd {
	line-height: 1.1923;
}
#news .btn {
	border: 2px solid #000;
	width: 354px;
	font-size: 18px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-family: "小塚ゴシック Pro", "游ゴシック", YuGothic, Verdana, "メイリオ", Meiryo,  "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", sans-serif;
	color: #000;
	text-decoration: none;
	line-height: 1.0;
	margin: 0 20px 40px;
	text-align: center;
	box-sizing: border-box;
	height: 62px;
}
#news .facebook-btn {
	background: url(images/top/facebook_icon.png) no-repeat 27px center;
}
#news .facebook-btn .text {
	margin-right: -26px;
}
#news .twitter-btn {
	background: url(images/top/twitter_icon.png) no-repeat 24px center;
}
#news .twitter-btn .text {
	margin-right: -28px;
}
#news .instagram-btn {
	background: url(images/top/instagram_icon.png) no-repeat 25px center;
}
#news .instagram-btn .text {
	margin-right: -34px;
}
#news .btn .text span {
	font-size: 16px;
}
#news .btn:hover {
	opacity: 0.8;
}
#fullpage {
	/*height: 100%;*/
	position: relative;
}
div.section {
	display: table;
	width: 100%;
	/*height: 100%;*/
	height: 100Vh;
}
div.section .tableCell{
	display: table-cell;
	vertical-align: top;
	width: 100%;
	height: 100%;
}

#bottom-info {
	position: relative;
}

/* smart phone */
@media only screen and ( max-width: 768px ){

	#navi-btn.sp {
		top: 3%;
		position: fixed;
		z-index: 2000;
	}

	#global-nav {
		top: 0;
		right: 0;
	}

	#img-view {
		background: url("images/top/sp_bg1.jpg") center top no-repeat;
		background-size: cover;
		min-width: 0;
	}
	#img-view .title h1 {
		position: relative;
		margin: -40% auto 0;
		width: 83.3333%;
	}
	#img-view .title h1:after {
		background: url("images/top/sp_sabrina_logo_blur_copy_20230922.png") top center no-repeat;
		background-size: contain;
		width: 100%;
		height: 100%;
	}
	#img-view .title h1 img {
		width: 100%;
	}
	#img-view .title h1 img.pc {
		display: none;
	}
	#img-view .title h1 img.sp {
		display: block;
	}
	#img-view .title h1 span {
		height: 5px;
		margin: 3px auto 0;
		border-bottom: 2px solid #fff;
	}
	#img-view .blur-img {
		background: url("images/top/sp_bg1_blur.jpg") top center no-repeat;
		background-size: cover;
	}
	#img-view .service-img {
		background: url("images/top/sp_bg2.jpg") top center no-repeat;
		background-size: cover;
	}

	#top.section .tableCell .scroll {
		width: 8.6666%;
		margin: 0 auto 30%;
	}

	#craftsman .board {
		width: 84%;
		padding: 14.0612% 0 15.6327%;
		margin: 0 auto;
	}
	#craftsman .board .msg1 img,
	#craftsman .board .msg2 img {
		opacity: 1;
		width: 100%;
	}
	#craftsman .board .msg1 {
		background-image: none;
		width: 84.7761%;
		height: auto;
		margin: 0 auto 7.5294%;
	}
	#craftsman .board .msg2 {
		background-image: none;
		width: 79.4029%;
		height: auto;
		margin: 0 auto 11.2941%;
	}
	#craftsman .board a {
		border: 2px solid #fff;
		width: 50.7462%;
		margin: 0 auto 0;
		padding: 3.5820% 0;
	}
	#craftsman .board > a:after {
		top: 0;
		right: 10%;
		width: 2.3529%;
		height: 100%;
		background: url("images/top/link_arrow.png") center center no-repeat;
		background-size: contain;
	}
	#craftsman .board a img {
		display: block;
		width: 55%;
		margin: 0 0 0 19.7058%;
	}

	#service .board > h2 {
		background-image: none;
		width: 29.4029%;
		height: auto;
		margin: 0 auto 9.1044%;
	}
	#service h2 img {
		display: block;
		width: 100%;
	}
	#service .service-list {
		padding: 18.5074% 0;
	}
	#service .board {
		width: 84%;
		padding: 14.0612% 0 11.9402%;
		z-index: 1000;
	}
	#service .board > a {
		background-image: none;
		height: auto;
		padding: 3.582% 0;
	}
	#service .board > a img {
		display: block;
		width: 27.9411%;
		margin-left: 33.8235%;
	}
	#service .board ul {
		padding: 0;
		margin-bottom: 8.9552%;
	}
	#service .board ul li {
		margin: 2px 0 0;
		display: block;
		float: none;
	}
	#service .board ul li:first-child {
		margin-top: 0;
	}
	#service .board ul li a {
		background-image: none!important;
		width: 87.3015%;
		height: auto;
		margin: 0 auto;
	}
	#service .board ul li a > img {
		display: block!important;
		width: 100%;
	}
	#service .board ul li a:before,
	#service .board ul li a:after {
		content: none;
	}
	#service .board ul li a p {
		display: none;
	}
	#service .board > a {
		border: 2px solid #fff;
		display: block;
		width: 50.7462%;
		margin: 0 auto;
	}
	#service .board > a:after {
		position: absolute;
		top: 0;
		right: 10%;
		width: 2.3529%;
		height: 100%;
		background: url("images/top/link_arrow.png") center center no-repeat;
		background-size: contain;
	}

	#others {
		padding-top: 34%;
		background: url("images/top/sp_bg3.jpg") top center no-repeat;
		background-size: contain;
	}

	#order {
		padding: 10.6666% 0 10.6666%;
	}
	#order p {
		font-size: 1.2rem;
		line-height: 1.5;
		margin-top: 4.0298%;
	}
	#order a {
		background-image: none;
		width: 42.3333%;
		padding: 3.2835% 0;
		border: 2px solid #fff;
		height: auto;
	}
	#order a:after {
		top: 0;
		right: 10%;
		width: 2.3529%;
		height: 100%;
		background-size: contain;
	}
	#order a img {
		display: block;
		width: 69.4117%;
		margin-left: 8.8235%;
	}

	#news {
		padding: 11.2% 0 22.0895%;
		background-color: #fff;
		position: relative;
		text-align: center;
		z-index: 1000;
	}
	#news h2 {
		margin-bottom: 8.9333%;
		background-image: none;
		width: 24.2666%;
		height: auto;
	}
	#news h2 img {
		display: block;
	}
	#news ul {
		width: 89.3333%;
		padding-bottom: 4.1791%;
	}
	#news ul li {
		margin-bottom: 4.7761%;
		padding-bottom: 2.0895%;
	}
	#news ul li dl dt {
		font-size: 1.1rem;
	}
	#news ul li dl dt .mark img {
		width: 100%;
	}
	#news ul li dl dt .date {
		margin-left: 1.6417%;
	}
	#news ul li dl dd {
		font-size: 1.3rem;
		text-align: left;
	}
	#news .btn {
		width: 90%;
		max-width: 354px;
		margin: 0 auto 30px;
		display: flex;
	}
	#news .btn .text {
		font-size: 1.2rem;
	}
	#news .btn .text strong {
		font-size: 1.2rem;
	}
	#news .btn .text span {
		font-size: 1.0rem;
	}
	div.section .tableCell{
		vertical-align: middle;
	}
}