/*************************************************************************************************
/* さんさんプラス東北 CSS
**************************************************************************************************/

@charset "utf-8";
/*************************************************************************************************
/* 基本設定
**************************************************************************************************/
body {
	font-family:				'游ゴシック体', 'Yu Gothic', 'YuGothic', "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", Verdana, sans-serif;
	font-weight:				400;
	color:						#302b29;
	font-size:					14px;
	line-height:				1.7;
}
p, span, li {
	margin:						0;
	padding:					0;
}
h2, h3, h4 {
	font-family:				游明朝, "Yu Mincho", "游明朝体", "YuMincho", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", Verdana, serif;
	font-weight:				bold;
}
h2 {
	font-size:					28px;
}
h3 {
	font-size:					22px;
}
h4 {
	font-size:					18px;
	padding-bottom:				8px;
}
a.telcall,
a.mailto {
	color:						#00a0e9;
	font-weight:				bold;
	text-decoration:			underline;
}
/* ページトップボタン */
#pagetop {
	position:					fixed;
	width:						60px;
	height:						60px;
	right:						0;
	bottom:						0;
	z-index:					9999;
	background-color: 			#dddddd;
	opacity:					0.8;
}
/* タブレット用*/
@media print,screen and (max-width:780px){
	h2 {
		font-size:					21px;
	}
	h3 {
		font-size:					18px;
	}
	h4 {
		font-size:					16px;
	}
}
/* 携帯端末用*/
@media print,screen and (max-width:640px){
	body {
		font-size:					13px;
	}
	p, span, li {
		font-size:					13px;
	}
	h2 {
		font-size:					20px;
	}
	h3 {
		font-size:					18px;
	}
	h4 {
		font-size:					16px;
	}
	#pagetop {
		right:						0;
		bottom:						0;
	}
}
/*************************************************************************************************
/* HOME
**************************************************************************************************/
/* ヘッダー */
.header_image {					/* 基本エリア */
	width:						100%;
	height:						100vh;
	overflow: 					hidden;
}
.header_image img {				/* オーバーレイ・ロゴ */
	width:						100%;
	height:						100vh;
	object-fit:					cover;
	position:					relative;
}
.header_image .logo {
	width:						100%;
	height:						100vh;
	position:					absolute;
	top:						0;
	left:						0;
	background-image:			url("images/logo.png");
	background-position: 		center center;
	background-repeat: 			no-repeat;
}
.header_image .copyright {		/* オーバーレイ・コピーライト */
	width:						100%;
	height:						44px;
	position:					absolute;
	bottom:						0;
	left:						0;
	padding:					10px;
	background-color:			#000000;
}
.header_image .copyright img {
	width:						250px;
	height:						24px;
}
#video-back {					/* 動画背景 */
	min-width:					100%;
	min-height:					100vh;
	object-fit:					cover;
}
/* はじめに */
.top_beginning {
	width:						100%;
	height:						500px;
	position:					relative;
}
.top_beginning img {
	width:						100%;
	height:						500px;
	object-fit:					cover;
}
.top_beginning .word {
	width:						100%;
	position:					absolute;
	top:						50px;
	left:						0;
	text-align:					center;	
}
/* 動画のメリット・デメリットと解決策 */
span.top_solution_keyword {
	font-family:				游明朝, "Yu Mincho", "游明朝体", "YuMincho", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", Verdana, serif;
	font-size:					20px;
}
/* さんプラの特徴 */
.top_feature .imgWrap_rect {
	padding:					20px 20px 0;
}
.top_feature .imgWrap_zoom {
	overflow: 					hidden;
	margin-bottom:				10px;
}
.top_feature .imgWrap_zoom img {
	display:					block;
	margin:						0 auto;
	transition-duration:		0.3s;
}
.top_feature .imgWrap_zoom img:hover {
	transform:					scale(1.2);
	transition-duration:		0.3s;
}
/* 製作事例 */
.imgWrap_word {
	width:						100%;
	height:						auto;
	overflow: 					hidden;
	position:					relative;
	background-color:			#000000;
}
.imgWrap_word .caption {
	font-family:				游明朝, "Yu Mincho", "游明朝体", "YuMincho", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", Verdana, serif;
	text-align:					center;
	font-size:					20px;
	font-weight:				normal;
	color:						#fff;
}
.imgWrap_word .mask {
	width:						100%;
	height:						100%;
	position:					absolute;
	top:						0;
	left:						0;
	opacity:					0;
	background-color:			rgba(0,0,0,0.6);
	-webkit-transition:			all 0.4s ease;
	transition:					all 0.4s ease;
}
.imgWrap_word:hover .mask {
	opacity:					1;
	padding-top:				90px;
}
/* 参考費用 */
.top_cost {
	background-color: 			#464646;
}
.top_cost img {
	width:						100%;
	height:						140px;
	object-fit:					cover;
}
.top_pricebox {
	padding:					20px 50px;
	background-color:			#f9f8f8;
	border:						1px solid #eeebe9;
}
/* 納品までの流れ */
#top_flow {
	width:						100%;
}
#top_flow .textbox {
	margin:						0 auto;
	padding: 					0 0 0 30px;
	width:						40%;
}
/* お問い合わせ */
.top_info_link {
	margin-bottom:				20px;
}
.top_info_link ul {
	margin:						0;
	padding:					0;
	list-style-type:			none;
	display:					table;
	width:						100%;
}
.top_info_link ul li.tel,
.top_info_link ul li.mail {
	display:					table-cell;
	width:						33%;
	text-align:					left;
	vertical-align:				middle;
	margin-bottom:				5px;
}
.top_info_items ul {
	margin:						0;
	padding:					0;
	list-style-type:			none;
	display:					table;
	width:						100%;
}
.top_info_items ul li.pict,
.top_info_items ul li.text,
.top_info_items ul li.icon {
	display:					table-cell;
	text-align:					left;
	vertical-align:				bottom;
}
.top_info_items ul li.pict {
	width:						20%;
}
.top_info_items ul li.text {
	width:						30%;
	padding-left:				10px;
}
.top_info_items ul li.icon {
	width:						50%;
}
#top_contact {
	width:						100%;
}
#top_contact .textbox {
	margin:						0 auto;
	padding:					20px 0;
	width:						54%;
	border:						1px solid #e9e9e9;
	text-align:					center;
}
/* タブレット用*/
@media print,screen and (max-width:780px){
	.imgWrap_word .caption {
		font-size:					14px;
	}
	.imgWrap_word:hover .mask {
		padding-top:				40px;
	}
	.top_pricebox {
		padding:					10px 30px;
	}
	.top_pricebox p {
		font-size: 					13px;
	}
	.top_info_link ul li {
		display:					block;
		width:						100%;
	}
	.top_info_items ul li.pict {
		width:						25%;
	}
	.top_info_items ul li.text {
		width:						40%;
		font-size:					13px;
	}
	.top_info_items ul li.icon {
		width:						35%;
	}
}
/* 携帯端末用*/
@media print,screen and (max-width:640px){
	.header_image .logo {
		background-image:			url("images/logo_s.png");
	}
	.top_beginning {
		height:						350px;
		position:					relative;
	}
	.top_beginning img {
		height:						350px;
		object-fit:					cover;
	}
	.top_solution {
		padding-left:				40px;
	}
	.top_feature .imgWrap_rect {
		padding:					35px 35px 0;
	}
	.imgWrap_word:hover .mask {
		padding-top:				80px;
	}
	.top_cost {
		background-image:			none;
		background-color:			#411e16;
	}
	.top_cost p {
		padding:					15px 0;
		color:						#ffffff;
	}
	.top_pricebox {
		margin-bottom:				30px;
		padding:					10px 20px;
	}
	#top_flow .textbox {
		padding: 					0 0 0 15px;
		width:						100%;
	}
	.top_info_link {
		margin-bottom:				10px;
	}
	.top_info_link ul li.tel,
	.top_info_link ul li.mail {
		display:					block;
		width:						100%;
	}
	.top_info_items ul {
		display:					block;
		width:						100%;
	}
	.top_info_items ul li.pict {
		display:					inline-block;
		width:						35%;
		margin-bottom:				25px;
	}
	.top_info_items ul li.text {
		display:					inline-block;
		width:						55%;
		margin-bottom:				25px;
	}
	.top_info_items ul li.icon {
		display:					block;
		width:						100%;
		text-align:					center;
	}
	#top_contact .textbox {
		width:						100%;
	}
	#pagetop {
		right:						0;
		bottom:						0;
	}
}