/*******************************************************************
 *
 *			 全ページ共通
 *
 ********************************************************************/
 

/* --- 全体の背景・テキスト --- */
/********************************************************************/

@charset "UTF-8";

html{
    }
	
@import url(http://fonts.googleapis.com/earlyaccess/notosansjapanese.css);

body {
height:100%;
overflow:scroll;
margin: 0;
padding: 0;
background-image:url(../img/bgi.jpg) ;
font-family: 'Noto Sans Japanese', sans-serif;
font-size:16px;
color:##535353;
-webkit-font-smoothing: antialiased;
}



/* --- ヘッダとフッタのリンクテキスト --- */
a:link { color: #8d4b42; }
a:visited { color: #623641; }
a:hover { color: #70271d; }
a:active { color: #70271d; }

/* --- コンテナ --- */

#wrap { 
	width:1200px;
	margin-right: auto;
	margin-left: auto;	
}


#container {
width: 1000px;
margin-right:auto;
margin-left: auto; /* センタリング */
}




/********************************************************************
/* --- ヘッダー//メニュー---*/
/********************************************************************/

#header {
width: 1000px; /* ページの幅 */
height:120px;
margin-top: 60px;
margin-right: auto;
margin-left: auto;
margin-bottom: auto;

}

/* --- メニュー項目 --- */
ul.nl {
width: 100%; /* ヘッダメニューの幅 */
height: 45px;
padding: 0 ;
list-style-type: none;
}

ul.nl li {
display: inline-block;
vertical-align: middle;
margin-right: 30px;
float: left;
position: relative;
display:block;
}

ul.nl li a {
display: block;
position: relative; 
}


ul.nl li img {
position: relative;
z-index: 2;
}

ul.nl li p1 {
margin-top:-27px;
position: absolute;
z-index: 1;
opacity: 0;
-webkit-transition: 0.6s;
-moz-transition:0.6s;
-o-transition:0.6s;
-ms-transition:0.6s;
}

ul.nl li p2 ,p3 ,p4 {
position: absolute;
margin-top:-27px;
z-index: 1;
opacity: 0;
-webkit-transition: 0.6s;
-moz-transition:0.6s;
-o-transition:0.6s;
-ms-transition:0.6s;
}

ul.nl li p5 {
position: absolute;
}


ul.nl li:hover p1 {
text-align: center;
margin-top:0px;
opacity: 1;
display:block;
}

ul.nl li:hover p2 {
text-align: center;
margin-top:1px;
opacity: 1;
display:block;
}
ul.nl li:hover p3 {
text-align: center;
margin-top:21px;
opacity: 1;
display:block;
}
ul.nl li:hover p4 {
text-align: center;
margin-top:41px;
opacity: 1;
display:block;
}


/********************************************************************/
/* --- ページ --- */
/********************************************************************/

#page {
width: 1000px; /* ページの幅 */
height:auto;
margin: 0 auto; /* センタリング */
transform-origin:center top;
animation:pageload 1s both;

}


@keyframes pageload {
0% {
transform:translate(0,-1em);
opacity:0.5;

}

100% {
transform:translate(0,0);
opacity:1;

}
}

#page2 {
width: 1000px; /* ページの幅 */
height:auto;
margin: 0 auto; /* センタリング */

}



/* --- ページの枠・背景部分 --- */

#waku1 {
height:40px;
width:1000px;
background-repeat: no-repeat;

}

#waku2 {
width:1000px;
float: left;  
overflow: hidden;  
height: auto;  
margin-right: auto;
margin-left: auto;
}

#waku2 div {  
float: left;  
padding-bottom: 32767px;  
margin-bottom: -32767px; 
}
 

#waku2-1 {
height:100%;
width:40px;
background-repeat: no-repeat;
float : left;
overflow:hidden;

}

.b1 {
height:40px;
width:40px;
background-repeat: no-repeat;

}

.b2 {
height:100%;
width:40px;
background-repeat: repeat-y;


}

#waku2-2 {
height:100%;
width:920px;


}

#waku2-3 {
height:100%;
width:40px;
background-repeat: no-repeat;
float : left;
overflow:hidden;

}

#waku3 {
height:90px;
width:1000px;
background-repeat: no-repeat;
float : left;
overflow:hidden;

}


/* --- トップに戻るボタン --- */
#gtt {
float: right;
width: 920px;
text-align:center;
margin-top: 20px;
}

#gtt a {
text-decoration: none;
font-size: 14px; 
	}


/********************************************************************/
/* --- フッター・コピーライト --- */
/********************************************************************/

#footer {
clear: both;
width: 1000px; 
height:80px;

}


#address {
height:20px; 
padding: 20px 0px 0px;
font-style: normal; /* 文字のスタイル（ノーマル） */
text-align: center;
color: #e43e3e;/* 文字色 */
text-align: center;
font-size: 14px;
}


/********************************************************************/
/********************************************************************/




/*******************************************************************
 *
 *			 topページ
 *
 ********************************************************************/

#top {
width: 1000px; 
height:600px;
margin-top: 30px;

}

.mi {
margin-left: 235px; 
width: 530px;
height:520px;
background-position: center;
background-repeat: no-repeat;
float:left;
}


/* クマさんの目のアニメーション */
.fuwafuwa {
	-webkit-animation-name:fuwafuwa; 
	-webkit-animation-duration:3s;
	-webkit-animation-iteration-count:infinite;
	/*-webkit-animation-direction:alternate;*/
	-webkit-animation-timing-function:ease;
	
	-moz-animation-name:fuwafuwa;
	-moz-animation-duration:3s;
	-moz-animation-iteration-count:infinite;
	/*-moz-animation-direction:alternate;*/
	-moz-animation-timing-function:ease;
}

@-webkit-keyframes fuwafuwa {
	0% {-webkit-transform:translate(0, 0);}
	50% {-webkit-transform:translate(0, -10px);}
	100% {-webkit-transform:translate(0, 0);}
}
@-moz-keyframes fuwafuwa {
	0% {-moz-transform:translate(0, 0);}
	50% {-moz-transform:translate(0, -10px);}
	100% {-moz-transform:translate(0, 0);}
}


#sns {
width: 120px;
height:120px;
margin-right:0px;
margin-top:100px;
float:right;
}

#sns img.grow {
width: 85px;
height:85px;
-webkit-transition:0.2s ease-in-out;
-moz-transition:0.2s ease-in-out;
-ms-transition:0.2s ease-in-out;
-o-transition:0.2s ease-in-out;
transition:0.2s ease-in-out;
}

#sns img.grow:hover {
-webkit-transform:scale(1.2,1.2);
-moz-transform:scale(1.2,1.2);
-ms-transform:scale(1.2,1.2);
-o-transform:scale(1.2,1.2);
transform:scale(1.2,1.2);
}

#sns ul{
width: 140px;
height:140px;
list-style-type: none;
}


#link {
margin-right: auto;
margin-left: auto; 
margin-top: 30px;
margin-bottom:30px;
width: 800px;
height:700px;
padding:30px 30px 30px 30px;
background-color:rgba(248,151,10,0.8);
border-radius: 20px;
-webkit -border-radius: 20px;
overflow-y:auto;
}

.link_p{
width: 600px;
height:600px;
margin-right: auto;
margin-left: auto; 

}


.link_p img {
margin-right: 10px;
}

.bnr{
width:500px;
margin-top:5px;
margin-bottom:10px;

}


.link_p h { 
line-height:120%;
font-size:18px; 
color: #333333;
display: block;
padding-left:5px;
margin-top:5px;
margin-bottom:25px;
text-align:center;
}


.link_p p { 
line-height:130%;
font-size:13px; 
color: #333333;
display: block;
padding-left:5px;
margin-top:0px;
margin-bottom:0px;
}

.link_p ul { 
line-height:130%;
font-size:13px; 
color: #333333;
margin-top:0px;
margin-bottom:0px;
margin-left:-15px;
list-style-type: circle;
}

.link_p ul li{ 
marker-offset:-3em;
}


/* ---------------------------------------------------------*/


/*******************************************************************
 *
 *			 newsページ
 *
 ********************************************************************/

#n-w1 {
height:40px;
width:1000px;
background-repeat: no-repeat;

}

#n-w2 {
height: 790px; 
width:1000px;  
margin-right: auto;
margin-left: auto; 
}

 
#n-w2-1 {
height: 750px; 
width:40px;
background-repeat: no-repeat;
float : left;
}

.c1 {
height:40px;
width:40px;
background-repeat: no-repeat;
}

.c2 {
height:750px;
width:40px;
background-repeat: repeat-y;
}

#n-w2-2 {
height: 790px; 
width:920px;
margin-right: auto;
margin-left: auto; 
float : left;
}

#n-w2-3 {
height:765px;
width:40px;
background-repeat: no-repeat;
float : left;
}

#n-w3 {
height:90px;
width:1000px;
background-repeat: no-repeat;
}


.ne1 {
width:920px;
height:142px;
background-repeat: no-repeat ;
background-position: 365px 0px ;
}

.ne2 {
width:920px;
height:181px;
background-repeat: no-repeat ;
background-position: 17px 0px ;
}

.ne3 {
width:184px;
height:482px;
background-repeat: no-repeat ;
background-position: 17px 0px ;
float : left;
}

.ne4 {
width:687px;
height:331px;
background-repeat: no-repeat ;
float : left;
}

.news {
width: 490px;
height:100%;
margin-bottom:50px;
display: block;
float:left;
}



.komidashi{ 
color: #535353;
border-bottom:1px  dashed #585858;
margin-bottom:5px;
padding-bottom:5px;
display:block;
position: relative;
background-image:url(../news/img/news_maru.png);
background-position:left;
background-repeat:no-repeat;
}

.komidashi tit{ 
width:350px;
margin-left:35px;
line-height: 150%; 
font-size:16px;
display:inline-block;
}

.komidashi day{
line-height: 140%; 
font-size:14px;
position: absolute;
right: 0;
bottom: 5px;

}


.tex{
width: 490px;
height:100%;
}

.tex p{
line-height: 140%; 
color: #535353;
margin-top:10px;
}


.tex img{
width: 200px;
margin-top:5px;
margin-bottom:5px;
margin-right:15px;
float:left;
}


.ne5 {
width:687px;
height:151px;
background-repeat: no-repeat ;
float : left;
}


/* スクロールバー設定*/
/* clears */
.col-content:after{ 
clear:both; 
height: 310px;
content:"."; 
display:block; 
font-size:0; 
height:0; 
line-height:0; 
overflow:hidden; 
}


/* Examples - Tiny Scrollbar */
#scrollbar1 { 
width: 650px;
margin: 0; 
}

#scrollbar1 .viewport { 
width: 490px; 
height: 310px; 
overflow: hidden; 
position: relative;
}

#scrollbar1 .overview { 
list-style: none; 
position: absolute; 
left: 0; 
top: 0; 
padding: 0; 
margin: 0; 
}

#scrollbar1 .scrollbar{ 
background:url(../news/img/scr_stick.jpg) no-repeat; 
position: relative; 
background-position:center; 
float: right; 
width: 45px; 
}

#scrollbar1 .track { 
background:; 
height: 700px; 
width:15px; 
position: relative; 
}

#scrollbar1 .thumb { 
background: url(../news/img/scr_ball.png) no-repeat ;
background-position:top 0 ; 
height: 59px; 
width: 59px; 
cursor: pointer; 
overflow: hidden; 
position: absolute; 
top: 0;  
}

#scrollbar1 .thumb .end { 
background:; 
overflow: hidden; 
width: 25px; 
}

#scrollbar1 .disable { 
display: none; 
}



/* ---------------------------------------------------------*/

/*******************************************************************
 *
 *			 profileページ
 *
 ********************************************************************/



/* 画像設定*/
.n1 {
width:920px;
height:790px;
background-repeat:no-repeat,no-repeat,no-repeat, no-repeat;
background-position:360px 0 ,630px 0px,45px 215px,55px 555px;
padding-top:40px;
padding-left:320px;

}

.kn{
width:520px;
height:55px;
font-size:24pt;
color:#f3a3a3;
display:block;
margin-top:185px;
margin-bottom:5px;
border-bottom:2px  dashed #f7d1d1;
}

.knr{
width:520px;
height:35px;
font-size:14pt;
color:#f7d1d1;
display:block;
}


p.prof { 
width: 520px;
line-height: 180%; 
color: #eeeeee;
}


p.prof a:link { color: #541405; }
p.prof a:visited { color: #3e0f04; }
p.prof a:hover { color: #70271d; }
p.prof a:active { color: #70271d; }


/* -------------------------------------------------------


/*******************************************************************
 *
 *			 worksページ
 *
 ********************************************************************/



/* 画像設定*/
.w1 {
width:920px;
height:160px;
background-repeat: no-repeat ;
background-position: 365px 0px ;
display: block;

}

.w2 {
width:920px;
height:80px;
margin-top: 10px;
float: left;
display: block;
}

.w2 ul.km{
width: 700px; 
height: 60px;
margin-right:auto;
margin-left: auto;
list-style-type: none;
display: block;
}

.w2 ul.km li{
display: block;
float: left;

}


.w3 {
width:920px;
height:100%;
display: block;
padding-top:20px;


}

.film {
width:920px;
margin-left:60px;
padding-bottom:20px;
}

.film p1 { 
width: 800px;
color: #585858;
display: block;
font-weight:bold;
font-size:18px;
border-bottom:1px  dashed #585858;
padding-bottom:5px;
margin-bottom:15px;
}

.film p2 { 
width: 800px;
line-height: 180%; 
color: #585858;
display: block;
padding-left:2em;
text-indent:-2em;
}

.brank {
width: 800px;
height:40px;
margin-bottom:0px;
}


.check {
width:800px;
height: 100%;
margin-top: 10px;
display: block;
margin-left: 60px;

}

.check ul.ch{
width: 830px; 
height: ;
margin : 0;
padding : 0;
overflow:hidden;
display: block;
margin-top:10px;

}

.check ul.ch li{
width: 275px;
height: 200px;
float: left;
display:block;
margin-left: 0px;
list-style-type: none;
padding-bottom:5px;
}

.check ul.ch li img{
width: 240px; 
height:135px;

}

.check ul.ch li p{
width: 240px; 
line-height: 120%; 
color: #585858;
font-size:10pt;
display: block;
margin-top:0px;
padding-top:0px;
}


.check ul.ch li a.cap{ 
background-color:#000000;
width: 239px; 
height:135px;
display: block;
margin-bottom:5px;
}

.check ul.ch li a.cap img {
transition:all 0.7s ease;

}

.check ul.ch li a:hover.cap img{
opacity: 0.5;
filter: alpha(opacity=70);
}



/* -------------------------------------------------------


/*******************************************************************
 *
 *			gallery-Aページ
 *
 ********************************************************************/

.hikari{
position: relative;
width:30px;
height:30px;
background-repeat:no-repeat;
}

.hikari img{
animation:kira 3s both;
animation-delay:2s;
}

.hoshi {
width:30px;
height:30px;
position:absolute;
margin:-38px 0 0 -2px;
}

.hoshi a{
color: rgba(239,192,67,0);
font-size:20pt;
text-decoration:none;
-webkit-transition: 0.4s;
-moz-transition: 0.4s;
-o-transition: 0.4s;
-ms-transition: 0.42s;
transition: 0.4s;
}
 
.hoshi a:hover {
color: rgba(255,214,103,0);
opacity:0.8;
text-shadow: -1px 1px 5px #ffd667, 1px -1px 5px #ffd667;
}



.con2-2-f {
width:550px;
height:360px;
background-repeat: no-repeat;
background-position:1px 285px;
float : left;
display:block;
position: relative;
overflow:hidden;
}

.con2-2-cap{
margin:75px 0 0 75px;
width:400px;
position: absolute;
animation:kira 3s both;
animation-delay:2s;
text-align:center;

}


.butai{
position: absolute;
left: 0px;
top: 0px;
}

.maku {
width:550px;
height:360px;
margin-top:10px;
transform-origin:center top;
animation:show 3s both;
animation-delay:1s;

}

.np {
width:920px;
height:80px;
margin-top: 15px;
float: left;
display: block;
animation:kira 3s both;
animation-delay:2s;
}

.np ul.npl{
width: 700px; 
height: 60px;
margin-left: 190px;
list-style-type: none;
display: block;
}

.np ul.npl li{
display: block;
float: left;

}


@keyframes show {
0% {
transform:translate(0,0);
opacity:1;	
}
	
80% {		
opacity:0.3;
}
	
100% {
transform:translate(0,-280px);
opacity:0;
}
}

@keyframes kira {
0% {
transform:translate(0,0);
opacity:0;	
}
	
100% {
transform:translate(0,0);
opacity:1;
}
}


/* -------------------------------------------------------


/*******************************************************************
 *
 *			gallery-illページ
 *
 ********************************************************************/
 
 .kmi {
width:920px;
height:100px;
margin-top:5px;
float: left;
display: block;
}

.kmi ul{
width: 700px; 
height: 60px;
margin-left: 300px;
list-style-type: none;
display: block;
}

.kmi ul li{
display: block;
float: left;

}


.ill {
width:825px;
height: 100%;
margin-top: 10px;
display: block;
margin-left: 60px;
}

.ill ul.pen{
width: 825px; 
margin : 0;
padding : 0;
overflow:hidden;
display: block;
margin-top:10px;
float: left;

}

.ill ul.pen li{
width: 275px;
float: left;
display:block;
margin-left: 0px;
list-style-type: none;
padding-bottom:5px;
}

.ill ul.pen li.clr{
width: 185px;
float: left;
display:block;
margin-left: 0px;
margin-right:12px;
list-style-type: none;
padding-bottom:20px;
}

.ill ul.pen li.tate{
width: 205px;
float: left;
display:block;
margin-left: 0px;
list-style-type: none;
padding-bottom:5px;
}

.ill ul.pen li.yoko{
width: 412px;
float: left;
display:block;
margin-left: 0px;
list-style-type: none;
padding-bottom:5px;

}



.ill ul.pen li p{
width: 236px; 
line-height: 120%; 
color: #c9c9c9;
font-size:10pt;
display: block;
text-align:right;
margin-top:0px;
}

.ill ul.pen li.clr p{
width: 185px; 
line-height: 120%; 
color: #c9c9c9;
font-size:10pt;
display: block;
text-align:center;
margin-top:0px;
}

.ill ul.pen li.tate p{
width: 166px; 
line-height: 120%; 
color: #c9c9c9;
font-size:10pt;
display: block;
text-align:right;
margin-top:0px;
}

.ill ul.pen li.yoko p{
width: 374px; 
line-height: 120%; 
color: #c9c9c9;
font-size:10pt;
display: block;
text-align:right;
margin-top:0px;
}


.ill ul.pen li a.cap{ 
background-color:#000000;
width: 239px; 
display: block;
}

.ill ul.pen li a.cap img {
transition:all 0.7s ease;
}

.ill ul.pen li a:hover.cap img{
opacity: 0.5;
filter: alpha(opacity=70);
}

.ill ul.pen li a.cap2{ 
background-color:#53190b;
width: 239px; 
display: block;
}

.ill ul.pen li a.cap2 img {
transition:all 0.7s ease;
}

.ill ul.pen li a:hover.cap2 img{
opacity: 0.5;
filter: alpha(opacity=70);
}


 .fukuro {
width:920px;
height:90px;
background-repeat:no-repeat;
background-position:710px 0px;
}


/* -------------------------------------------------------


/*******************************************************************
 *
 *			gallery-dollページ
 *
 ********************************************************************/
 
.doll {
width:800px;
height: 100%;
margin-top: 30px;
display: block;
margin-left: 60px;
}

.doll ul.dl{
width: 830px; 
height:100%;
margin : 0;
padding : 0;
overflow:hidden;
display: block;
margin-top:30px;

}

.doll ul.dl li{
width: 275px;
float: left;
display:block;
margin-left: 0px;
list-style-type: none;
padding-bottom:5px;
}

.doll ul.dl li.tate{
width: 170px;
float: left;
display:block;
margin-right: 37px;
list-style-type: none;
padding-bottom:5px;
}

.doll ul.dl li.yoko{
width: 412px;
float: left;
display:block;
margin-left: 0px;
list-style-type: none;
padding-bottom:5px;
}



.doll ul.dl li p{
width: 236px; 
line-height: 120%; 
color: #c9c9c9;
font-size:10pt;
display: block;
text-align:right;
margin-top:0px;
}

.doll ul.dl li.tate p{
width: 170px; 
line-height: 120%; 
color: #c9c9c9;
font-size:10pt;
display: block;
text-align:right;
margin-top:0px;
}

.doll ul.dl li.yoko p{
width: 374px; 
line-height: 120%; 
color: #c9c9c9;
font-size:10pt;
display: block;
text-align:right;
margin-top:0px;
}

.doll ul.dl li.tate img{
width:170px;
}

.doll ul.dl li.yoko img{
width:377px;
}

.doll ul.dl li a.cap3{ 
background-color:#372016;
width: 239px; 
display: block;
}

.doll ul.dl li a.cap3 img {
transition:all 0.7s ease;
}

.doll ul.dl li a:hover.cap3 img{
opacity: 0.5;
filter: alpha(opacity=70);
}

.dl_cap_s{
max-height:100%;
max-width:920px;
display:block;
padding:30px 30px 30px 30px;
background-color:rgba(57,57,57,0.8);
border-radius: 20px;
-webkit -border-radius: 20px;
overflow-y:auto;
}

.dl_cap_s img{
max-width:100%;
max-height:600px;
}

.dl_cap_s h{
line-height: 120%; 
color: #c9c9c9;
font-size:14pt;
display: block;
margin-top:20px;
}

.dl_cap_s p{
line-height: 120%; 
color: #c9c9c9;
font-size:12pt;
display: block;
margin-top:5px;
text-indent: 1.5em;
}

 
 


/* -------------------------------------------------------

/*******************************************************************
 *
 *			 diaryページ
 *
 ********************************************************************/
 
.diary_link {
width:250px;
height:160px;
padding-top:40px;
padding-left:60px;

} 

.diary_link p{
	margin-top: 0px;
	line-height: 120%;
	color: #33012a;
	font-size: 11pt;
} 
 


/* -------------------------------------------------------

/*******************************************************************
 *
 *			 contactページ
 *
 ********************************************************************/


#con1 {
width:1000px;
height:40px;
background-repeat: no-repeat;

}

#con2 {
width:1000px;
height:880px;
}

#con2-1 {
width:40px;
height:880px;
background-repeat: no-repeat;
float : left;

}

#con2-2 {
width:920px;
height:880px;
background-repeat: no-repeat;
float : left;
}

.con2-2-a {
width:920px;
background-repeat: no-repeat ;
display: block;

}

.con2-2-b {
width:180px;
height:360px;
background-repeat: no-repeat;
display:block;
float : left;
}

.con2-2-c {
width:550px;
height:360px;
background-repeat: no-repeat;
float : left;
display:block;
overflow:hidden;
}

.con2-2-d {
width:190px;
height:360px;
background-repeat: no-repeat ;
display: block;
float : left;
}

.con2-2-e {
width:920px;
height:180px;
background-repeat: no-repeat ;
background-position:0 0 ,180px 0px,730px 0px;
clear:both;
}

p.con-p { 
font-size: 16px;
width: 260px;
color: #eeeeee;

}

p.con-p2 { 
width: 280px;

}


#con2-3 {
height:880px;
width:40px;
float : left;
background-repeat: no-repeat;
}


/* -------------------------------------------------------






/* --- ▼その他の設定開始 --- */

/* --- clearfix --- */
.clearFix:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearFix {
min-height: 1px;
}

/* --- ▲その他の設定終了 --- */