@charset "utf-8";
/***************************************************************
File name  　　　　 : 　　　common.css
Description 　　　　:　　　 共通スタイル定義
Date       　　　　 :      2015/04
Table of contents:
・body
・header
・footer
**************************************************************/
/*-------------------------------------------------------------
body
-------------------------------------------------------------*/
html{
}
/*-------------------------------------------------------------
body
-------------------------------------------------------------*/
body{
	font-family: Arial,"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","メイリオ",Meiryo,Osaka,"ＭＳ Ｐゴシック","MS PGothic",sans-serif;
	font-size:15px;
	color:#202020;
	min-width:960px;
	border:5px solid #fff;
}
/*-------------------------------------------------------------
header
-------------------------------------------------------------*/
header{
	position:relative;
	height:400px;
}
header h1{
	position:absolute;
	top:25px;
	left:35px;
	z-index:101;
}
header nav{
	float:right;
	padding:35px 30px 0 0;
	position:relative;
	z-index:101;
}
header nav ul{
}
header nav ul li{
	float:left;
	padding:0 0 0 40px;
}
header nav ul li:first-child{
	padding-left:0;
}
header nav ul li a{
	font-size:16px;
	color:#fff;
	-webkit-text-shadow:1px 1px 8px rgba(0,0,0,0.4);
	-moz-text-shadow:1px 1px 8px rgba(0,0,0,0.4);
	-ms-text-shadow:1px 1px 8px rgba(0,0,0,0.4);
	-o-text-shadow:1px 1px 8px rgba(0,0,0,0.4);
	text-shadow:1px 1px 8px rgba(0,0,0,0.4);
}
/*-------------------------------------------------------------
path-------------------------------------------------------------*/
#path{
	margin-bottom:100px;
	position:relative;
	z-index:100;
}
#path ol{
	line-height:1;
	margin:0 0 0 20px;
}
#path ol li{
	display:inline;
	line-height:1;
	font-size:14px;
	position:relative;
	margin:0 5px 0 0;
}
#path ol li a{
	color:#00a3e0;
	text-decoration:underline;
	padding:0 5px 0 0;

}
/*-------------------------------------------------------------
main
-------------------------------------------------------------*/
main{
	position:relative;
	z-index:100;
}

#lower{
	position:relative;
}
#lower .triangle{
	margin:-220px 0 0;
	/*margin:-227px 0 0;*/
	border-bottom-color:#fff;
}
#lower .ttl{
	position:absolute;
	top:-133px;
	left:0;
	width:960px;
	margin:0 auto;
}
#lower .ttl h2{
	text-align:center;
	margin:0 0 28px;
}
#lower .ttl h2 span{
	color:#4fcfff;
	font-size:60px;
	line-height:1;
	padding:0 0 5px;
	border-bottom:3px solid #4fcfff;
}
#lower .ttl h2 + p{
	color:#4fcfff;
	line-height:1;
	text-align:center;
	margin:0 0 25px;
	font-size:18px;
	font-weight:bold;
	letter-spacing:0.1em;
}
#lower .ttl + p{
	padding:15px 0 0;
}


/*tab*/
#tab{
	margin:79px 0 70px;
	border-bottom:1px solid #dddddd;
}
#tab ul{
	position:relative;
	top:1px;
	z-index:100;
	cursor:pointer;
}
#tab ul li{
	width:240px;
	height:68px;
	border-top:1px solid #dddddd;
	border-bottom:1px solid #dddddd;
	float:left;
	background:#f8f8f8;
}
#tab ul li:hover div{
	cursor:pointer;
	opacity:0.7;
	filter: alpha(opacity=70);      
	-ms-filter: "alpha(opacity=70)"; 
	-moz-opacity:0.7;                 
	-khtml-opacity: 0.7;             
	zoom:1;
}
#tab ul li:hover a{
	opacity:1;
	filter: alpha(opacity=100);      
	-ms-filter: "alpha(opacity=100)"; 
	-moz-opacity:1;                 
	-khtml-opacity: 1;             
	zoom:1;
}
#tab ul .tabOn{
	background:#fff;
	border-bottom:none;
	height: 69px;
}
#tab ul .tabOn a{
	color:#a37239;
}
#tab ul #tab1{
	width:203px;
	border-left:1px solid #dddddd;
	padding:0 0 0 36px;
	border-top-left-radius: 8px;
	-moz-border-top-left-radius: 8px;
	-webkit-border-top-left-radius: 8px;
	-ms-border-top-left-radius: 8px;
}
#tab ul #tab2{
	width:202px;
	border-left:1px solid #dddddd;
	padding:0 0 0 36px;
}
#tab ul #tab3{
	width:215px;
	border-left:1px solid #dddddd;
	padding:0 0 0 23px;
}
#tab ul #tab4{
	width:203px;
	border-left:1px solid #dddddd;
	border-right:1px solid #dddddd;
	padding:0 0 0 36px;
	border-top-right-radius: 8px;
	-moz-border-top-right-radius: 8px;
	-webkit-border-top-right-radius: 8px;
	-ms-border-top-right-radius: 8px;
}
#tab ul li div{
	font-size:18px;
	font-weight:bold;
	line-height:68px;
}
#tab ul #tab1 div{
	background:url(../img/common/fujitozanTab/tab1.gif) left no-repeat;
	padding:0 0 0 38px;
}
#tab ul #tab2 div{
	background:url(../img/common/fujitozanTab/tab2.gif) left no-repeat;
	padding:0 0 0 38px;
}
#tab ul #tab3 div{
	background:url(../img/common/fujitozanTab/tab3.gif) left no-repeat;
	padding:0 0 0 27px;
}
#tab ul #tab4 div{
	background:url(../img/common/fujitozanTab/tab4.gif) left no-repeat;
	margin:15px 0 0;
	padding:0px 0 0 40px;
	line-height:1.2;
}


/*fContact*/
#fContact{
	background:url(../img/common/bg_contact.gif) top left repeat;
	padding:40px 0;
	margin:0 0 40px;
}
#fContact #fContactTtl{
	text-align:center;
	font-size:20px;
	line-height:1;
	font-weight:bold;
	padding:0 0 25px;
}
#fContact #fContactTtl span{
	border-bottom:2px solid #404040;
	padding:0 0 7px;
}
#fContact ul{
	width:960px;
}
#fContact ul li{
	float:left;
	width:387px;
	width:470px;
	height:100px;
	background:#fff;
	border-radius: 8px;
	-moz-border-radius: 8px;
	-webkit-border-radius: 8px;
	-ms-border-radius: 8px;
	box-shadow:rgba(0, 0, 0, 0.1) 0px 0px 6px 0px;
	-webkit-box-shadow:rgba(0, 0, 0, 0.1) 0px 0px 6px 0px;
	-moz-box-shadow:rgba(0, 0, 0, 0.1) 0px 0px 6px 0px;
}
#fContact ul li:first-child{
	margin:0 20px 0 0;
}

#fContact ul li div{
	float:left;
	width:315px;
	padding:20px 0 0;
}
#fContact ul li div:first-child{
	width:115px;
	padding:25px 0 0 40px;
}
#fContact ul li:first-child div{
	width:315px;
	padding:25px 0 0 0;
}
#fContact ul li:first-child div:first-child{
	width:115px;
	padding:25px 0 0 40px;
}
#fContact ul li:first-child div p{
	width:280px;
	height:50px;
	line-height:50px;
	color:#fff;
	text-align:center;
	background:#404040;
	border-radius: 8px;
	-moz-border-radius: 8px;
	-webkit-border-radius: 8px;
	-ms-border-radius: 8px;
	position:relative;
}
#fContact ul li:first-child div p img{
	position:absolute;
	top:20px;
	right:15px;
	border-left:2px solid #888;
	padding:0 0 0 10px;
}

/*recommend*/
.recommend .triangle{
	margin:-110px 0 0;
	/*margin:-227px 0 0;*/
}
.recommend #recommendContents{
	background:#4fcfff;
	padding:0 0 80px;
}
.recommend #recommendContents div h2{
	text-align:center;
	margin:0 0 25px;
	position:relative;
	top:-45px;
}
.recommend #recommendContents div h2 span{
	color:#fff;
	font-size:42px;
	line-height:1;
	padding:0 0 5px;
	border-bottom:3px solid #fff;
}
.recommend #recommendContents div h2 + p{
	color:#fff;
	line-height:1;
	text-align:center;
	margin:0 0 50px;
	font-size:18px;
	font-weight:bold;
	letter-spacing:0.1em;
	position:relative;
	top:-45px;
}
.recommend #recommendContents #recommendWrap{
	overflow:hidden;
	min-width:960px;
	margin:-45px auto 0;
}
.recommend #recommendContents #recommendWrap ul{
	width:960px;
	margin:0 auto;
	position:relative;
}
.recommend #recommendContents #recommendWrap ul li{
	float:left;
	width:480px;
	position:relative;
	left:13px;
}
.recommend #recommendContents #recommendWrap ul li:first-child{
	float:left;
	width:480px;
	position:relative;
	left:-10px;
}


/*-------------------------------------------------------------
footer
-------------------------------------------------------------*/
footer{
	height:320px;
	background:#fff;
	padding:0 0 50px;
	position:relative;
	z-index:100;
}
footer > div{
	text-align:center;
	padding:60px 0 50px;
}
footer nav{
	text-align:center;
}
footer nav span{
	font-size:14px;
	line-height:1;
	background:url(../img/footer/ico_arrow.gif) left no-repeat;
	margin:0 25px 0 0;
	padding:0 0 0 13px;
}
footer nav div{
	padding:15px 0 48px;
}

footer #copyright{
	text-align:center;
	font-size:12px;
	color:#999;
	line-height:1;
	letter-spacing:0.1em;
}


/*-------------------------------------------------------------
slidein
-------------------------------------------------------------*/
#slidein{
	width:100%;
	height:51px;
	line-height:50px;
	background:#fff;
	position:fixed;
	bottom:-51px;
	left:0;
	z-index:1000;
}
#slidein ul{
	padding:0 0 0 150px;
}
#slidein ul li{
	float:left;
}
#slidein ul li{
}

#slidein ul #slideinTel{
	padding:12px 40px 0 0;
}
#slidein ul #slideinCart{
	padding:10px 10px 0 0;
}
#slidein ul #slideinFb{
	padding:10px 10px 0 0;
}
#slidein ul #slideinBlog{
	padding:10px 0 0;
}
#slidein ul #slideinTelSp{
	display:none;
}

#slidein #pagetop{
	position:absolute;
	top:1px;
	right:0px;
}
/*-------------------------------------------------------------
a hover
-------------------------------------------------------------*/
a,
.blkLink{
	color:#333;
	text-decoration:none;
	opacity:1;
	filter: alpha(opacity=100);      
	-ms-filter: "alpha(opacity=100)"; 
	-moz-opacity:1;                 
	-khtml-opacity: 1;             
	zoom:1;
}
a:hover,
a > img:hover,
.blkLink:hover{
	cursor:pointer;
	opacity:0.7;
	filter: alpha(opacity=70);      
	-ms-filter: "alpha(opacity=70)"; 
	-moz-opacity:0.7;                 
	-khtml-opacity: 0.7;             
	zoom:1;
}
.blkLink > a{
	width:100%;
	height:100%;
	display:block;
}




a img{
	box-shadow: #000 0 0 0;
}

/*-------------------------------------------------------------
other
-------------------------------------------------------------*/
.webfont{
	font-family: 'Roboto', sans-serif;
}

/*wrap*/
.wrap{
	width:960px;
	margin:0 auto;
	position:relative;
}
/* clear */
.clear{
	clear: both;
}
/* clearfix */
.clearfix:after {
	display: block;
	visibility: hidden;
	content: ".";
	clear: both;
	height: 0;
	font-size: 0;
	line-height: 0;
}
* html .clearfix { zoom: 1; } /* IE6 */
*:first-child+html .clearfix { zoom: 1; } /* IE7 */

input{
	vertical-align: middle;
	position:relative;
	top:-1px;
}

.triangle{
	position:relative;
	width: 0;
	height: 0;
	border-top: 110px solid transparent;
	border-right: 480px solid transparent;
	border-bottom: 110px solid #4fcfff;
	border-left: 480px solid transparent;
}

.boxTxt{
	text-align:center;
	padding:9px 0 0;
	max-height:99999px;
}
.boxTxt span{
	color:#fff;
	background:#404040;
	line-height:1;
	padding:4px 10px;
	letter-spacing:0.1em;
}

/*tooltip*/
.tooltip li{
	cursor:pointer;
}
.tooltip div{
	width:96px;
	height:45px;
	background:#a37239;
	position:absolute;
	top:-50px;
	text-align:center;
	font-size:13px;
	color:#fff;
	line-height:1;
	display:table;
}
.tooltip div:after{
	width:0;
	height:0;
	border: 6px solid transparent;
	border-top: 6px solid #a37239;
	content:'';
	position:absolute;
	top:45px;
	left:50%;
	margin:0 0 0 -3px;
}
.tooltip p{
	display:table-cell;
    vertical-align: middle;
	line-height:1.3;
	text-align:center;
}


/*SP用テーブル画像*/
.tblImg{
	text-align:center;
	line-height:1;
	padding:20px 0;
	text-decoration:underline;
	display:none;
}
.tblImg a{
	color:#00a3e0;
}

/*SP用メニュー*/
#spNavWrap{
	width:100%;
	overflow:hidden;
	position: absolute;
	top:0;
	left:0;
	z-index:100;
	height:100px;
}
#spNav{
	display: block;
	position: absolute;
	top:0;
	right:-270px;
	background:#404040;
	width:270px;
	z-index:9999;
}
#spNav li{
	float:none;
	width:100%;
	height:50px;
	line-height:50px;
	box-sizing:border-box;
	border-bottom:1px solid #fff;
}
#spNav li a{
	color:#fff;
	width:100%;
	height:100%;
	box-sizing:border-box;
	margin:0 20px 0 0;
	padding:0 0 0 20px;
	display:block;
	position:relative;
}
#spNav li a img{
	position:absolute;
	top:20px;
	right:20px;
}
#spNav li #spNavClose{
	position:absolute;
	top:13px;
	right:13px;
	cursor:pointer;
}
/*フッターバナー*/
#cmmBnr{
	width: 860px;
	margin: 50px auto 0 auto;
}

#cmmBnr ul{
	margin: 0 -20px 0 0;
}

#cmmBnr ul li{
	float:left;
	width:200px;
	margin:0 20px 0 0;
}

#cmmBnr ul .bottom {
	margin-top: 30px;
}

/*SP用改行*/
.spBr{
	display:none;
}


@media screen and (max-width: 480px ) {
/* ----------------------------------
		common
---------------------------------- */
	.triangle {
		border-bottom-width: 50px;
	}
	body {
		min-width: 0px;
	}

	.boxTxt span{
		font-size:14px;
		line-height:2;
	}
/* ----------------------------------
		header
---------------------------------- */
	header {
		width: 100%;
		height: 200px;
	}
	header h1 {
		top: 2%;
		left: 2%;
	}
	header h1 img {
		width: 100%;
		height: auto;
	}
	body>header nav {
		padding: 0px;
		position: absolute;
		right: 20px;
		top: 10px;
		width: 35px;
		height: 25px;
		border-bottom: 5px solid #fff;
	}
	body>header nav:before {
		content: '';
		display: block;
		position: absolute;
		top: 0px;
		left: 0px;
		width: 35px;
		height: 5px;
		background-color: #fff;
	}
	body>header nav:after {
		content: '';
		display: block;
		position: absolute;
		top: 13px;
		left: 0px;
		width: 35px;
		height: 5px;
		background-color: #fff;
		z-index: 50;
	}
	body>header nav ul {
		display:none;
	}
/* ----------------------------------
		main
---------------------------------- */
	body>main {
		width: 100%;
	}
	body>main #lower .triangle {
		top: 60px;
	}
	body>main #lower .wrap {
		width: 100%;
		box-sizing:border-box;
		padding:0 10px;
		margin-top: 68px;
	}
	body>main #lower .wrap .ttl {
		width: 100%;
		margin-top: 60px;
	}
	body>main #lower .wrap .ttl h2 span {
		font-size: 26px;
	}
	body>main #lower .wrap .ttl .wrap p {
		font-size: 14px;
	}
	body>main #lower .wrap .boxTxt {
		margin: 0 auto;
		font-size: 12px;
	}

/* ----------------------------------
		fContact
---------------------------------- */

	#fContact{
		padding:30px 0 0;
		margin:0 0 40px;
	}

	#fContact .wrap {
		width: 95%;
		margin: 0 auto !important;
	}
	#fContact .wrap #fContactTtl {
		font-size: 18px;
		line-height: 30px;
	}
	#fContact .wrap #fContactTtl span {
		padding: 0 0 2px;
	}
	#fContact .wrap ul {
		width: 100%;
		margin: 0 auto;
		padding:0 0 30px;
	}
	#fContact .wrap ul li {
		width: 100% !important;
		float: none !important;
		text-align: center !important;
		padding-right: 0px !important;

	}
	#fContact .wrap ul li div  {
		font-size: 12px;
	}
	#fContact .wrap ul li div:first-child  {
		display: none;
	}
	#fContact .wrap ul li div  {
		width: 90%;
		margin: 0 auto;
		float: none;
	}
	#fContact .wrap ul li:first-child div .blkLink {
		width: 100%;
		text-align: center;
		padding-right: 0;
		line-height: 50px !important;
	}
	#fContact .wrap ul li:last-child div {
		margin-top: 20px;
	}
	#fContact .wrap ul li:first-child div .blkLink img {
		margin-top: 0px;
		position: relative;
		left: 10px;
	}
	#fContact .wrap ul li:last-child div img {
		/*width: 100%;
		height: auto;*/
		height:60px;
		width:auto;
		margin-top: 0px;
		top: 0px;
		position: relative;
	}
/* ----------------------------------
		path
---------------------------------- */
	body>#path {
		width: 100%;
	}
	body>#path ol {
		margin-left: 2%;
	}
	body>#path li {
		font-size: 12px;
	}
/* ----------------------------------
		recommend
---------------------------------- */
	body>.recommend {
		width: 100%;
	}
	body>.recommend .triangle {
		margin: -150px 0 0;
	}
	body>.recommend #recommendContents {
		width: 100%;
	}
	body>.recommend #recommendContents .wrap {
		width: 100%;
		padding-top: 40px;
	}
	body>.recommend #recommendContents .wrap h2 span {
		font-size: 24px;
	}
	body>.recommend #recommendContents .wrap p {
		font-size: 16px;
		margin-bottom: 0px;
	}
	body>.recommend #recommendContents #recommendWrap {
		min-width: 0px;
		width: 90%;
		margin: 0 auto;
	}
	body>.recommend #recommendContents #recommendWrap ul {
		width: 100%;
	}
	body>.recommend #recommendContents #recommendWrap ul li:first-child {
		float: none;
		width: 100%;
		left: 0px;
	}
	body>.recommend #recommendContents #recommendWrap ul li {
		width: 100%;
		margin: 0;
		left: 0px;
		float: none;
	}
	body>.recommend #recommendContents #recommendWrap ul li img {
		width: 100%;
		height: auto;
	}
/* ----------------------------------
		footer
---------------------------------- */
	body>footer {
		display: none;
	}
/* ----------------------------------
		slidein
---------------------------------- */
	body>#slidein {
		height: 65px;
	}
	body>#slidein .wrap {
		width: 100%;
	}
	body>#slidein .wrap ul {
		padding: 0px;
		padding-left:20px;
	}
	body>#slidein .wrap ul li {
		float: left;
		margin-right: 10px;
	}
	body>#slidein .wrap ul #slideinTel {
		display:none;
	}
	body>#slidein .wrap ul #slideinCart {
		padding-top: 15px;
		padding-left: 5%;
		transform: scale(1.2);
	}
	body>#slidein .wrap ul #slideinFb {
		padding-top: 15px;
		padding-left: 10px;
		transform: scale(1.2);
	}
	body>#slidein .wrap ul #slideinBlog {
		padding-top: 15px;
		padding-left: 10px;
		padding-right: 10px;
		transform: scale(1.2);
	}
	body>#slidein .wrap ul #slideinTelSp{
		padding-top: 15px;
		padding-left: 10px;
		transform: scale(1.2);
	}
	body>#slidein #pagetop{
		position:absolute;
		top:1px;
		right:10px;
	}


/* ----------------------------------
		tab
---------------------------------- */
	#tab{
		margin:79px 0 0px;
		border-bottom:1px solid #dddddd;
	}
	#tab ul{
		width:100%;
		box-sizing:border-box;
		position:relative;
		top:1px;
		z-index:100;
		cursor:pointer;
	}
	#tab ul li{
		width:25%;
		box-sizing:border-box;
		height:68px;
		border-top:1px solid #dddddd;
		border-bottom:none;
		float:left;
		background:#f8f8f8;
	}
	#tab ul li:hover div{
		cursor:pointer;
		opacity:0.7;
		filter: alpha(opacity=70);      
		-ms-filter: "alpha(opacity=70)"; 
		-moz-opacity:0.7;                 
		-khtml-opacity: 0.7;             
		zoom:1;
	}
	#tab ul li:hover a{
		opacity:1;
		filter: alpha(opacity=100);      
		-ms-filter: "alpha(opacity=100)"; 
		-moz-opacity:1;                 
		-khtml-opacity: 1;             
		zoom:1;
	}
	#tab ul a{
		font-size:0px;
	}

	#tab ul .tabOn{
		background:#fff;
		border-bottom:none;
		height: 69px;
	}
	#tab ul .tabOn a{
		color:#a37239;
	}
	#tab ul #tab1{
		width:25%;
		border-left:1px solid #dddddd;
		padding:0;
		border-top-left-radius: 8px;
		-moz-border-top-left-radius: 8px;
		-webkit-border-top-left-radius: 8px;
		-ms-border-top-left-radius: 8px;
	}
	#tab ul #tab2{
		width:25%;
		border-left:1px solid #dddddd;
		padding:0;
	}
	#tab ul #tab3{
		width:25%;
		border-left:1px solid #dddddd;
		padding:0;
	}
	#tab ul #tab4{
		width:25%;
		border-left:1px solid #dddddd;
		border-right:1px solid #dddddd;
		padding:0;
		border-top-right-radius: 8px;
		-moz-border-top-right-radius: 8px;
		-webkit-border-top-right-radius: 8px;
		-ms-border-top-right-radius: 8px;
	}
	#tab ul li div{
		font-weight:bold;
		line-height:68px;
	}
	#tab ul #tab1 div{
		/*font-size:0px;*/
		background:url(../img/common/fujitozanTab/tab1.gif) center no-repeat;
		margin:0;
		padding:0;
	}
	#tab ul #tab2 div{
		/*font-size:0px;*/
		background:url(../img/common/fujitozanTab/tab2.gif) center no-repeat;
		margin:0;
		padding:0;
	}
	#tab ul #tab3 div{
		/*font-size:0px;*/
		background:url(../img/common/fujitozanTab/tab3.gif) center no-repeat;
		margin:0;
		padding:0;
	}
	#tab ul #tab4 div{
		background:url(../img/common/fujitozanTab/tab4.gif) center no-repeat;
		margin:0;
		padding:0;
		line-height:1.2;
		padding:20px 0 0;
	}
	#tab ul li div span{
		font-size:0;
	}


	a:hover,
	a > img:hover,
	.blkLink:hover{
		cursor:pointer;
		opacity:1;
	}
	#cmmBnr{
			width: 100%;
			margin: 0 auto;
			background:#fff;
	}
	#cmmBnr ul{
			padding: 20px 0 80px 0;
			margin:0;
	}
	#cmmBnr ul li{
			float:none;
			width:70%;
			margin: 15px auto 0 auto;
	}
	#cmmBnr ul li img{
			width:100%;
			height:auto;
	}

	/*SP用改行*/
	.spBr{
		display:block;
	}


}