@charset "utf-8";
/* CSS Document */


/* ロゴ表示 */
#firstsighwrap {
	width:940px;
	margin:0 auto;
	position: relative;
	}

#firstsigh{
position: absolute;
width:120px;
left:10px;
top:10px;
}


#firstsigh h1{
font-size: 0.9em;
position: absolute;
top:55px;
left:5px;	
}

#firstsigh img{
width:50px;
height: auto;
position: absolute;
left:30%;
top:0;	
}

#video{
    position: absolute;
}


/* loading
--------------------------- */

#loader-bg {
  display: none;
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0px;
  left: 0px;
  background: #fff;
  z-index: 3;
}

#loader {
	width: 100px;
	height: 100px;
	display: none;
	left: 48%;
	position: absolute;
	top: 50%;
	z-index: 4;
}



/* .stageBase
--------------------------- */
.stageBase {
	width: 100%;
	position: relative;
	overflow: hidden;
}
.stageBase .fieldWrap {
	padding: 0;
	min-height:945px;	
}

.fieldWrap{
	margin:100px auto 0 auto;
}

.stageBaseend {
	width: 100%;
}



/* stage1動画
--------------------------- */
#stage1 {
   position: relative;
   overflow:hidden;
   -webkit-backface-visibility:hidden;
	}


/* stage2 新着など
--------------------------- */
#stage2{
background-image: url(../images/newsbg.jpg);
background-repeat: repeat;
position: relative;
}

/* stage３　世界が愛した日本
--------------------------- */
#stage3{
background-image: url(../images/stage3.jpg);
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	position: relative;
}

/* stage４　時代を超えるうるわしの
--------------------------- */
#stage4{
background-image: url(../images/stage4.jpg);
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
position: relative;
}

/* stage５　うるしの國から
--------------------------- */
#stage5{
background-image: url(../images/stage5.jpg);
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
position: relative;
}

#stage6s{
display: none;
}

/* stage６　漆器
--------------------------- */
#stage6{
background-image: url(../images/stage6.jpg);
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
position: relative;
}

/* stage7　お子様
--------------------------- */
#stage7{
background-image: url(../images/stage7.jpg);
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
position: relative;
}

.stage7inner{
padding-top: 60px;
}

/* stage８　海外
--------------------------- */
#stage8{
background-image: url(../images/stage8.jpg);
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
position: relative;
}

.stage8inner{
padding-top: 100px;
}

/*動画部分*/
.big-background {
    z-index:3;
    text-align:center;
    max-height:100vh;
    position:relative;
    overflow:hidden;
    background-position:center top;
}

.icatchbg{
	position: absolute;
	width: 100%;
	height:100%;
}

.icatch{
  position: absolute;
  top: 0;
  left: 0;
  right:0;
  bottom:0;
  margin: auto;
  width:750px;
  max-height:373px;
}


.icatch img{
  display:block;
  width:100%;
  max-width: 750px;
  height:auto;
}

.topfb{
background-color: #565656;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
width:22px;
height: 22px;
padding-top:1px;
margin: 0 auto 20px auto;
}

.topfbimg{
height: 100px;
overflow: hidden;
}

.topnews{
width:750px;
}

.topnewsdate{
width:120px;
padding-right: 30px;
float:left; 
}

.topnewscate{
width:110px;
float:left; 
}

.topnewscont{
width:490px;
margin-left: 15px;
float:left; 
}

/* 滴生舎ブログ*/
.toph2_blog{
	background-image: url(../images/topblogbg.jpg);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: bottom center;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	position: relative;
	min-height: 600px;
}

.topnav a{
width:300px;
display: block;
height: 65px;
background: #c90000;
border:1px solid #fff; 
color: #fff;
text-align: center;
margin: auto;
padding-top: 20px;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); 
}


.topnav a:hover{
	width: 300px;
	display: block;
	height: 65px;
	background-color: #A70707;
	border: 1px solid #fff;
	color: #fff;
	text-align: center;
	margin: auto;
	padding-top: 20px;
	text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

.topnavl a{
width:300px;
display: block;
height: 65px;
background: #c90000;
border:1px solid #fff; 
color: #fff;
text-align: center;
margin: 70px 0 0 0;
padding-top: 20px;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5); 
}


.topnavl a:hover{
	width: 300px;
	display: block;
	height: 65px;
	background-color: #A70707;
	border: 1px solid #fff;
	color: #fff;
	text-align: center;
	padding-top: 20px;
	text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

.topjobojinav{
	position: relative;
	width: 221px;
	height: 145px;
	overflow: hidden;
	margin-left: 16px;
	box-shadow:0px 0px 6px 0px #000;
-moz-box-shadow:0px 0px 6px 0px #000;
-webkit-box-shadow:0px 0px 6px 0px #000;
border-left: 1px solid #333;
border-top: 1px solid #333;
border-bottom: 1px solid #333;
opacity: 1; 
background: #333;
margin-bottom: 19px;
}

.topjobojinav img {
  width: 220px;
  height: 145px;
  position: absolute; /* 親要素を基点に配置 */
  top: 0;
  left: 0;
  z-index: 0; /* 一番下に配置 */
   -moz-transition: -moz-transform 0.5s linear;
    -webkit-transition: -webkit-transform 0.5s linear;
    -o-transition: -o-transform 0.5s linear;
    -ms-transition: -ms-transform 0.5s linear;
    transition: transform 0.5s linear;
}
.topjobojinav a:hover img {
  opacity: 1; 
  background: white;
  -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -o-transform: scale(1.1);
    -ms-transform: scale(1.1);
    transform: scale(1.1);
}

.topjobojinav h4 {
  margin: 0;
  padding: 15px 10px;
  width: 221px;
  position: absolute;  /* 親要素を基点に配置 */
  bottom: 0;
  left: 0;
  background-color: rgba(200, 0, 0, 0.8);
  color: white;
  z-index: 1;  /* 画像の上に配置 */
  font-size: 1.2em;
  text-align: center;
}

.toptekinav{
	position: relative;
	width:219px;
	height: 310px;
	overflow: hidden;
	box-shadow:0px 0px 6px 0px #000000;
-moz-box-shadow:0px 0px 6px 0px #000000;
-webkit-box-shadow:0px 0px 6px 0px #000000;
border-left: 1px solid #333;
border-top: 1px solid #333;
border-bottom: 1px solid #333;
opacity: 1; 
background: #333;
}

.toptekinav img {
  width: 220px;
  position: absolute; /* 親要素を基点に配置 */
  top: 0;
  left: 0;
  z-index: 0; /* 一番下に配置 */
  -moz-transition: -moz-transform 0.5s linear;
    -webkit-transition: -webkit-transform 0.5s linear;
    -o-transition: -o-transform 0.5s linear;
    -ms-transition: -ms-transform 0.5s linear;
    transition: transform 0.5s linear;

}
.toptekinav a:hover img {
  -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -o-transform: scale(1.1);
    -ms-transform: scale(1.1);
    transform: scale(1.1);
	opacity: 1; 
}
.toptekinav h4 {
  margin: 0;
  padding: 15px 10px;
  width: 220px;
  position: absolute;  /* 親要素を基点に配置 */
  bottom: 0;
  left: 0;
  background-color: rgba(200, 0, 0, 0.8);
  color: white;
  z-index: 1;  /* 画像の上に配置 */
  font-size: 1.2em;
  text-align: center;
}


.topsikki a{
padding-top: 40px;
border: 1px solid #fff;
position: relative;
width:250px;
height:607px;
margin-bottom: 20px;
display: block;
}

.topsikki a:hover{
padding-top: 40px;
border: 1px solid #fff;
position: relative;
width:250px;
height:607px;
display: block;
background-color: rgba(0, 0, 0, 0.5);
}

.topsikki a:hover img{
 z-index: 1; 
 opacity: 1; 
}

.topsikki h4{
margin: 0;
  padding: 20px;
  line-height: 2em;
  width: 248px;
  position: absolute;  /* 親要素を基点に配置 */
  bottom: 0;
  left: 0;
  background-color: rgba(200, 0, 0, 0.8);
  color: white;
  font-size: 1em;
  text-align: left;
}

.pattern {
    background-image:url(../images/pattern.png);
    background-repeat: repeat;
    background-attachment:scroll;
    width:100%;
    height:100%;
    position:absolute;
    top:0;
    left:0
}

.toplife{
padding-top: 60px;
line-height: 2em;
}

/*TOPのみSNSフッター*/
.topsns ul li{
font-size:1.4em;
}


/* #pageDown（下スクロール）
--------------------------- */
#down {
	bottom: 0;
	left: 0;
	width: 100%;
	height: 100px;
	text-align: center;
	overflow: hidden;
	z-index: 100;
	position:absolute;
}

#down span{
	margin: 0 auto;
	width: 80px;
	height: 100px;
	background: transparent url(../images/scroll.png) no-repeat center center;
	display: block;
	text-decoration:none;
	cursor: pointer;
}


/* #pageDown（下スクロール）
--------------------------- */
#down2,#down3,#down4,#down5,#down6,#down7,#down8 {
	bottom: 20px;
	left: 0;
	width: 100%;
	height: 42px;
	text-align: center;
	overflow: hidden;
	z-index: 100;
	position:absolute;
}

#down2 span,#down3 span,#down4 span,#down5 span,#down6 span,#down7 span,#down8 span{
	margin: 0 auto;
	width: 42px;
	height: 42px;
	display: block;
	text-decoration:none;
	cursor: pointer;
	background: transparent url(../images/scroll2.png) no-repeat center center;
	background-size: 42px;
}

/*タブレットのとき*/	
@media screen and (min-width:768px) and ( max-width:1024px) {
.spstage1 {
   background-image: url(../images/smtopbg.jpg);
   background-color:#000;
   background-repeat:no-repeat;
    background-position:center center;
    background-size:cover;
    width:auto;
    height:600px;
	position: relative;
	padding-top: 50px;
	}

.icatchbg{
	position: absolute;
	width: 100%;
	height:100%;
}

.icatch{
  position: absolute;
  top: 0;
  left: 0;
  right:0;
  bottom:0;
  margin: auto;
  width:60%;
}


.icatch img{
  display:block;
  width:100%;
  max-width: 800px;
  height:auto;
}

.stageBase .fieldWrap {
	padding: 0;
	min-height:600px;	
}

.fieldWrap{
	margin:10px auto 0 auto;
}

#down2,#down3,#down4,#down5,#down6,#down7,#down8 {
	display: none;
}

#stage8{
padding-top: 200px;
}

}

/*スマホのとき*/	
@media screen and (max-width: 768px) {

.stageBase .fieldWrap {
	padding: 0;
	min-height:300px;	
}

.fieldWrap{
	margin:10px auto 0 auto;
}

#down2,#down3,#down4,#down5,#down6,#down7,#down8 {
	display: none;
}

/*スマホの時に表示する画像部分*/
.spstage1 {
   background-image: url(../images/smtopbg.jpg);
   background-color:#000;
   background-repeat:no-repeat;
    background-position:center center;
    background-size:cover;
    width:auto;
    height:450px;
	position: relative;
	padding-top: 50px;
	}

.icatchbg{
	position: absolute;
	width: 100%;
	height:100%;
}

.stage7inner,
.stage8inner{
padding-top: 0px;
}

.icatch{
  position: absolute;
  top: 0;
  left: 0;
  right:0;
  bottom:0;
  margin: auto;
  width:300px;
  max-height:200px;
}


.icatch img{
  display:block;
  width:100%;
  max-width: 300px;
  height:auto;
}

.topnews{
width:auto;
}

.topnewsdate{
width:100px;
padding-right: 0px;
float:left; 
padding-top: 4px;
}

.topnewscate{
width:110px;
margin-left: 110px;
float:none; 
font-size: 0.9em;
}

.topnewscate span{
padding: 3px 7px;
}

.topnewscont{
width:auto;
margin-left: 0px;
margin-top:8px;
float:none; 
}

.topfbimg{
width:80%;
height: 45%;
margin: 0 auto;
overflow: hidden;
}

.topfbtitle{
width:80%;
margin: 0 auto 10px auto;
}

#stage3,#stage4{
padding-bottom: 20px;
}

#stage3 .titlel,
#stage4 .titlel,
#stage5 .titlel,
#stage8 .titlel{
font-size: 1.5em;
}

#stage3 .titlem,#stage4 .titlem{
font-size: 1.4em;
}

#stage3 p,
#stage4 p{
font-size: 1.2em;
padding: 0 15px;
}

#stage3 .titlegm,
#stage4 .titlegm,
#stage5 .titlegm,
#stage7 .titlegm,
#stage8 .titlegs{
font-size: 1.3em;
}

#stage6{
display: none;
}

.topnav a{
width:70%;
}


.topnav a:hover{
width:70%;
}

.topnavl a{
width:70%;
margin: auto;
}


.topnavl a:hover{
width:70%;
}

#stage5 .row{
margin-bottom: 0;
}

.topjobojinav{
	position: relative;
	width: 300px;
	height: 200px;
	overflow: hidden;
	margin-left: auto;
	margin-right: auto;
}

.topjobojinav img {
  width: 300px;
  height: 200px;
}

.topjobojinav h4 {
  padding: 15px 10px;
  width: 300px;
}

.toptekinav{
	position: relative;
	width:300px;
	height: 200px;
	margin:0 auto 10px auto;
}

.toptekinav img {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  width: 100%;
  height: auto;
}	

.toptekinav img {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  width: 100%;
  height: auto;
}	

.toptekinav a:hover img {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  width: 100%;
  height: auto;
}

.toptekinav h4 {
  padding: 15px 10px;
  width: 300px;
}

#stage6s{
display: inline;
background: #fff;
}



.stopsikki{
background-image: url(../images/topswashoku.jpg);
background-repeat:no-repeat;
background-position:center center;
background-size:cover;
min-height: 250px;
margin: 0;
position: relative;
}

.stopsikki h3,
.stopsake h3{
padding-top: 30px;
}

.stopsikki h4,
.stopsake h4{
margin: 0;
  padding: 20px;
  line-height: 2em;
  width: auto;
  position: absolute;  /* 親要素を基点に配置 */
  bottom: 0;
  left: 0;
  background-color: rgba(200, 0, 0, 0.8);
  color: white;
  font-size: 1em;
  text-align: left;
}


.stopsake{
background-image: url(../images/topsake.jpg);
background-repeat:no-repeat;
background-position:center center;
background-size:cover;
min-height: 250px;	
	padding: 10px auto;
	margin: 0;
	position: relative;
}

#stage7{
background-position: center bottom;
background-size: 700px;
padding-top: 30px;
padding-bottom: 20px;
}

#stage8{
background-color:#000; 
background-image: url(../images/stage8s.jpg);
background-position: center top;
background-size: 500px;
padding-top: 0px;
padding-bottom: 20px;
}

#stage8 p{
text-align: left;
}

#stage8 h2{
margin-top:10px;
}

#stage8 h3{
margin-bottom:10px;
}

#stage8 .mtop-xxl{
margin: 10px auto;
}



}