html{

}

body{
    margin:0;padding:0;
}

#suma{
	display:none;
}
#bira{
	position:fixed;
	top:-5px;right:-30px; width:30%;
transform: rotate( 15deg );    padding:0;margin:0;
}
.cb-slideshow,
.cb-slideshow:after {   
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    z-index: 0;
    margin:0;
    padding:0;
}
.cb-slideshow:after {
    content: '';

    margin:0;
    padding:0;
}
.cb-slideshow li span {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
    color: transparent;
    background-size: cover;
    background-position: 50% 50%;
    background-repeat: none;
    opacity: 0;
    z-index: 0;
    animation: imageAnimation 42s linear infinite 0s;
        margin:0;
    padding:0;
}
.cb-slideshow li div {
    z-index: 300;
    position: absolute;
    bottom: 30px;
    left: 0px;
    width: 100%;
    text-align: center;
    opacity: 0;
    color: #fff;
    animation: titleAnimation 42s linear infinite 0s;
}

.cb-slideshow li:nth-child(1) span {
    background-image: url(../images/01.jpg)
}
.cb-slideshow li:nth-child(2) span {
    background-image: url(../images/02.jpg);
    animation-delay: 6s;
}
.cb-slideshow li:nth-child(3) span {
    background-image: url(../images/03.jpg);
    animation-delay: 12s;
}
.cb-slideshow li:nth-child(4) span {
    background-image: url(../images/04.jpg);
    animation-delay: 18s;
}
.cb-slideshow li:nth-child(5) span {
    background-image: url(../images/05.jpg);
    animation-delay: 24s;
}
.cb-slideshow li:nth-child(6) span {
    background-image: url(../images/06.jpg);
    animation-delay: 30s;
}
 .cb-slideshow li:nth-child(7) span {
    background-image: url(../images/07.jpg);
    animation-delay: 36s;
}
 .cb-slideshow li:nth-child(8) span {
    background-image: url(../images/08.jpg);
    animation-delay: 42s;
}
.cb-slideshow li:nth-child(9) div {
    background-image: url(../images/09.jpg);
    animation-delay: 48s;
}
.cb-slideshow li:nth-child(10) div {
    background-image: url(../images/10.jpg);
    animation-delay: 54s;
}
.cb-slideshow li:nth-child(11) div {
    background-image: url(../images/11.jpg);
    animation-delay: 60s;
}
.cb-slideshow li:nth-child(12) div {
    background-image: url(../images/12.jpg);
    animation-delay: 66s;
}



@keyframes imageAnimation {
    0% { opacity: 0; animation-timing-function: ease-in; }
    8% { opacity: 1; animation-timing-function: ease-out; }
    17% { opacity: 1 }
    25% { opacity: 0 }
    100% { opacity: 0 }
}

.no-cssanimations .cb-slideshow li span{
    opacity: 1;
}



/**--左固定NAVI--**/
#koteileft{
	background:url("../img/tes.png");
	float:left;
	position:fixed; z-index:999999;
	width:200px;
	height:100%;
	margin:0;
	padding:10px 5px 0 15px;
        font-family: "ヒラギノ明朝 ProN","Hiragino Mincho ProN";
	color:gray;
	font-size:14px;
	line-height:1.5em; 

}
/**--左固定NAVIend--**/
/* 
** ALL CREDIT GOES TO 
** Craig Buckler
** http://www.sitepoint.com/css3-starwars-scrolling-text/
**
** Blame me for the music via embedded video bit
*/
#mado{ position:absolute;z-index:19;
margin:0;padding:18% 0 0 4%;width:100%;height:100%;
 font-family: "Rounded Mplus 1c"; letter-spacing:-1em;font-weight:500; 
}	
h1
{      
	position: absolute; margin:0;padding:0; 
	width:100%;
	font-size:10em;
	text-align: center;
	line-height: 0.8em;
        margin:-0.2em 0 0 0;
	color:green;
	text-shadow: -2px -2px 0 #ff6, 2px -2px 0 #ff6, -2px 2px 0 #ff6, 2px 2px 0 #ff6;
	opacity: 0;
	z-index:20;
	-webkit-animation: logo 10s ease-out 2.5s;
	-moz-animation: logo 10s ease-out 2.5s;
	-ms-animation: logo 10s ease-out 2.5s;
	-o-animation: logo 10s ease-out 2.5s;
	animation: logo 10s ease-out 2.5s;
}

h1 sub
{
	display: block;
	font-size: 0.3em;
	letter-spacing: 0;
	line-height: 0.8em;
}

@-webkit-keyframes logo {
	0% { -webkit-transform: scale(1); opacity: 1; }
	50% { opacity: 1; }
	100% { -webkit-transform: scale(0.1); opacity: 0; }
}

@-moz-keyframes logo {
	0% { -moz-transform: scale(1); opacity: 1; }
	50% { opacity: 1; }
	100% { -moz-transform: scale(0.1); opacity: 0; }
}

@-ms-keyframes logo {
	0% { -ms-transform: scale(1); opacity: 1; }
	50% { opacity: 1; }
	100% { -ms-transform: scale(0.1); opacity: 0; }
}

@-o-keyframes logo {
	0% { -o-transform: scale(1); opacity: 1; }
	50% { opacity: 1; }
	100% { -o-transform: scale(0.1); opacity: 0; }
}

@keyframes logo {
	0% { transform: scale(1); opacity: 1; }
	50% { opacity: 1; }
	100% { transform: scale(0.1); opacity: 0; }
}
/*--h2--**/
h2
{
	position: absolute;margin:0;padding:0; 
	width:100%;
        margin:0.1em 0 0 0;
	font-size: 10em;
	text-align: center;
	line-height: 0.8em;
	letter-spacing: -0.05em;
	color:	#FF4500;
	text-shadow: -2px -2px 0 #ff6, 2px -2px 0 #ff6, -2px 2px 0 #ff6, 2px 2px 0 #ff6;
	opacity: 0;
	z-index:20;
	-webkit-animation: logo 10s ease-out 8.5s;
	-moz-animation: logo 10s ease-out 8.5s;
	-ms-animation: logo 10s ease-out 8.5s;
	-o-animation: logo 10s ease-out 8.5s;
	animation: logo 10s ease-out 8.5s;
}
.t0{
	position: absolute;margin:0;padding:0; 
	width:100%;
        font-weight:600;
	font-size:5em;
	text-align: center;
	line-height:1em;
	letter-spacing:-0.05em;
	color:#7F7FFF;
	text-shadow: -2px -2px 0 #ff6, 2px -2px 0 #ff6, -2px 2px 0 #ff6, 2px 2px 0 #ff6;
	opacity: 0;
	z-index:20;
	-webkit-animation: logo 10s ease-out 14.5s;
	-moz-animation: logo 10s ease-out 14.5s;
	-ms-animation: logo 10s ease-out 14.5s;
	-o-animation: logo 10s ease-out 14.5s;
	animation: logo 10s ease-out 14.5s;
}
.t1{
	position: absolute;margin:0;padding:0; 
	width:100%;
        margin:-0.15em 0 0 0;
	font-size:20em;
	text-align: center;
	line-height:1em;
	letter-spacing:-0.05em;
	color: yellow;
	text-shadow: -2px -2px 0 #ff6, 2px -2px 0 #ff6, -2px 2px 0 #ff6, 2px 2px 0 #ff6;
	opacity: 0;
	z-index:20;
	-webkit-animation: logo 8s ease-out 19.5s;
	-moz-animation: logo 8s ease-out 19.5s;
	-ms-animation: logo 8s ease-out 19.5s;
	-o-animation: logo 8s ease-out 19.5s;
	animation: logo 8s ease-out 19.5s;
}
.t2{
	position: absolute;margin:0;padding:0; 
	width:100%;

	font-size: 10em;
	text-align: center;
	line-height:1em;
	letter-spacing:-0.05em;
	color: yellow;
	text-shadow: -2px -2px 0 #ff6, 2px -2px 0 #ff6, -2px 2px 0 #ff6, 2px 2px 0 #ff6;
	opacity: 0;
	z-index:20;
	-webkit-animation: logo 8s ease-out 24.5s;
	-moz-animation: logo 8s ease-out 24.5s;
	-ms-animation: logo 8s ease-out 24.5s;
	-o-animation: logo 8s ease-out 24.5s;
	animation: logo 8s ease-out 24.5s;
}
.t3{
	position: absolute;margin:0;padding:0; 
	width:100%;
        margin:-0.15em 0 0 0;
	font-size:20em;
	text-align: center;
	line-height:1em;
	letter-spacing:-0.05em;
	color:#00bbff;
	text-shadow: -2px -2px 0 #ff6, 2px -2px 0 #ff6, -2px 2px 0 #ff6, 2px 2px 0 #ff6;
	opacity: 0;
	z-index:20;
	-webkit-animation: logo 8s ease-out 29.5s;
	-moz-animation: logo 8s ease-out 29.5s;
	-ms-animation: logo 8s ease-out 29.5s;
	-o-animation: logo 8s ease-out 29.5s;
	animation: logo 8s ease-out 29.5s;
}
.t4{
	position: absolute;margin:0;padding:0; 
	width:100%;

	font-size: 10em;
	text-align: center;
	line-height:1em;
	letter-spacing:-0.05em;
	color:#00bbff;
	text-shadow: -2px -2px 0 #ff6, 2px -2px 0 #ff6, -2px 2px 0 #ff6, 2px 2px 0 #ff6;
	opacity: 0;
	z-index:20;
	-webkit-animation: logo 8s ease-out 34.5s;
	-moz-animation: logo 8s ease-out 34.5s;
	-ms-animation: logo 8s ease-out 34.5s;
	-o-animation: logo 8s ease-out 34.5s;
	animation: logo 8s ease-out 34.5s;
}
.t5{
	position: absolute;margin:0;padding:0; 
	width:100%;
        margin:-0.15em 0 0 0;
	font-size:20em;
	text-align: center;
	line-height:1em;
	letter-spacing:-0.05em;
	color:	#A0522D;
	text-shadow: -2px -2px 0 #ff6, 2px -2px 0 #ff6, -2px 2px 0 #ff6, 2px 2px 0 #ff6;
	opacity: 0;
	z-index:20;
	-webkit-animation: logo 8s ease-out 39.5s;
	-moz-animation: logo 8s ease-out 39.5s;
	-ms-animation: logo 8s ease-out 39.5s;
	-o-animation: logo 8s ease-out 39.5s;
	animation: logo 8s ease-out 39.5s;
}
.t6{
	position: absolute;margin:0;padding:0; 
	width:100%;
        margin:0.4em 0 0 0;
	font-size:8em;
	text-align: center;
	line-height:1em;
	letter-spacing:-0.05em;
	color:	#A0522D;
	text-shadow: -2px -2px 0 #ff6, 2px -2px 0 #ff6, -2px 2px 0 #ff6, 2px 2px 0 #ff6;
	opacity: 0;
	z-index:20;
	-webkit-animation: logo 8s ease-out 44.5s;
	-moz-animation: logo 8s ease-out 44.5;
	-ms-animation: logo 8s ease-out 44.5s;
	-o-animation: logo 8s ease-out 44.5s;
	animation: logo 8s ease-out 44.5s;
}
.t7{
	position: absolute;margin:0;padding:0; 
	width:100%;
        margin:-0.15em 0 0 0;
	font-size:20em;
	text-align: center;
	line-height:1em;
	letter-spacing:-0.05em;
	color:#FF00FF;
	text-shadow: -2px -2px 0 #ff6, 2px -2px 0 #ff6, -2px 2px 0 #ff6, 2px 2px 0 #ff6;
	opacity: 0;
	z-index:20;
	-webkit-animation: logo 8s ease-out 49.5s;
	-moz-animation: logo 8s ease-out 49.5s;
	-ms-animation: logo 8s ease-out 49.5s;
	-o-animation: logo 8s ease-out 49.5s;
	animation: logo 8s ease-out 49.5s;
}
.t8{
	position: absolute;margin:0;padding:0; 
	width:100%;

	font-size: 10em;
	text-align: center;
	line-height:1em;
	letter-spacing:-0.05em;
	color:#FF00FF;
	text-shadow: -2px -2px 0 #ff6, 2px -2px 0 #ff6, -2px 2px 0 #ff6, 2px 2px 0 #ff6;
	opacity: 0;
	z-index:20;
	-webkit-animation: logo 8s ease-out 54.5s;
	-moz-animation: logo 8s ease-out 54.5s;
	-ms-animation: logo 8s ease-out 54.5s;
	-o-animation: logo 8s ease-out 54.5s;
	animation: logo 8s ease-out 54.5s;
}


#menu {
	display:none;
}
.slicknav_menu {
	display:none;
}
#himawari{
	display:none;
}
@media screen and ( max-width:479px )
{
html{
	width:100%;height:auto;}
body{
	background:url(../images/11.jpg)no-repeat;background-position:0px 150px ; 
	background-size:110%;  overflow:hidden;
}
#left{
	display:none;
}
#menu{ position:absolute; display:inline;
	z-index:9999999;  
}
#suma{
	display:inline;
}

#koteileft{
	display:none;

}

	.js #menu {
		display:none;  
	}
	
	.js .slicknav_menu {
		display:block; 
	}
/*--h2--**/
#mado{ position:relative;z-index:0;
margin:0;padding:20% 0 0 0;width:100%;height:100%; 
 font-family: "Rounded Mplus 1c"; letter-spacing:-1em;font-weight:300;
}
h1
{
	position: absolute; margin:0;padding:0; 
	width:100%;
	font-size:4em;
	text-align: center;
	line-height: 0.8em;
        margin:0.5em 0 0 0;
	color:green;
	text-shadow: -2px -2px 0 #ff6, 2px -2px 0 #ff6, -2px 2px 0 #ff6, 2px 2px 0 #ff6;
	opacity: 0;
	z-index:20;
	-webkit-animation: logo 10s ease-out 2.5s;
	-moz-animation: logo 10s ease-out 2.5s;
	-ms-animation: logo 10s ease-out 2.5s;
	-o-animation: logo 10s ease-out 2.5s;
	animation: logo 10s ease-out 2.5s;
}

h1 sub
{
	display: block;
	font-size: 0.3em;
	letter-spacing: 0;
	line-height: 0.8em;
}
h2
{
	position: absolute;margin:0;padding:0; 
	width:100%;
        margin:0.7em 0 0 0;
	font-size:5em;
	text-align: center;
	line-height: 0.8em;
	letter-spacing: -0.05em;
	color:#FF4500;
	text-shadow: -2px -2px 0 #ff6, 2px -2px 0 #ff6, -2px 2px 0 #ff6, 2px 2px 0 #ff6;
	opacity: 0;
	z-index:20;
	-webkit-animation: logo 10s ease-out 8.5s;
	-moz-animation: logo 10s ease-out 8.5s;
	-ms-animation: logo 10s ease-out 8.5s;
	-o-animation: logo 10s ease-out 8.5s;
	animation: logo 10s ease-out 8.5s;
}
.t0{
	position: absolute;margin:0;padding:0; 
	width:100%;
   
	font-size:3.5em;
	text-align: center;
	line-height:1em;
	letter-spacing:-0.05em;
	color:#7F7FFF;
	text-shadow: -2px -2px 0 #ff6, 2px -2px 0 #ff6, -2px 2px 0 #ff6, 2px 2px 0 #ff6;
	opacity: 0;
	z-index:20;
	-webkit-animation: logo 10s ease-out 14.5s;
	-moz-animation: logo 10s ease-out 14.5s;
	-ms-animation: logo 10s ease-out 14.5s;
	-o-animation: logo 10s ease-out 14.5s;
	animation: logo 10s ease-out 14.5s;
}
.t1{
	position: absolute;
	top:-20%;left:0;margin:0;padding:0; 
	width:100%;
        margin:0.1em 0 0 0;
	font-size: 20em;
	text-align: center;
	line-height:1em;
	letter-spacing:-0.05em;
	color: yellow;
	text-shadow: -2px -2px 0 #ff6, 2px -2px 0 #ff6, -2px 2px 0 #ff6, 2px 2px 0 #ff6;
	opacity: 0;
	z-index:20;
	-webkit-animation: logo 8s ease-out 19.5s;
	-moz-animation: logo 8s ease-out 19.5s;
	-ms-animation: logo 8s ease-out 19.5s;
	-o-animation: logo 8s ease-out 19.5s;
	animation: logo 8s ease-out 19.5s;
}
.t2{
	position: absolute;
	top:20%;left:0;margin:0;padding:0; 
	width:100%;
        margin:1.8em 0 0 0;
	font-size: 4em;
	text-align:center;
	line-height:1em;
	letter-spacing:-0.05em;
	color: yellow;
	text-shadow: -2px -2px 0 #ff6, 2px -2px 0 #ff6, -2px 2px 0 #ff6, 2px 2px 0 #ff6;
	opacity: 0;
	z-index:20;
	-webkit-animation: logo 8s ease-out 24.5s;
	-moz-animation: logo 8s ease-out 24.5s;
	-ms-animation: logo 8s ease-out 24.5s;
	-o-animation: logo 8s ease-out 24.5s;
	animation: logo 8s ease-out 24.5s;
}
.t3{
	position: absolute;
	top:-20%;left:0;margin:0;padding:0; 
	width:100%;
        margin:0.1em 0 0 0;
	font-size: 20em;
	text-align: center;
	line-height:1em;
	letter-spacing:-0.05em;
	color:#00bbff;
	text-shadow: -2px -2px 0 #ff6, 2px -2px 0 #ff6, -2px 2px 0 #ff6, 2px 2px 0 #ff6;
	opacity: 0;
	z-index:20;
	-webkit-animation: logo 8s ease-out 29.5s;
	-moz-animation: logo 8s ease-out 29.5s;
	-ms-animation: logo 8s ease-out 29.5s;
	-o-animation: logo 8s ease-out 29.5s;
	animation: logo 8s ease-out 29.5s;
}
.t4{
	position: absolute;
	top:10%;left:0;
	margin:0;padding:0; 
	width:100%;
        margin:1.8em 0 0 0;
	font-size: 4em;
	text-align: center;
	line-height:1em;
	letter-spacing:-0.05em;
	color:#00bbff;
	text-shadow: -2px -2px 0 #ff6, 2px -2px 0 #ff6, -2px 2px 0 #ff6, 2px 2px 0 #ff6;
	opacity: 0;
	z-index:20;
	-webkit-animation: logo 8s ease-out 34.5s;
	-moz-animation: logo 8s ease-out 34.5s;
	-ms-animation: logo 8s ease-out 34.5s;
	-o-animation: logo 8s ease-out 34.5s;
	animation: logo 8s ease-out 34.5s;
}
.t5{
	position: absolute;
	top:-20%;left:0;margin:0;padding:0; 
	width:100%;
        margin:0.1em 0 0 0;
	font-size: 20em;
	text-align: center;
	line-height:1em;
	letter-spacing:-0.05em;
	color:	#A0522D;
	text-shadow: -2px -2px 0 #ff6, 2px -2px 0 #ff6, -2px 2px 0 #ff6, 2px 2px 0 #ff6;
	opacity: 0;
	z-index:20;
	-webkit-animation: logo 8s ease-out 39.5s;
	-moz-animation: logo 8s ease-out 39.5s;
	-ms-animation: logo 8s ease-out 39.5s;
	-o-animation: logo 8s ease-out 39.5s;
	animation: logo 8s ease-out 39.5s;
}
.t6{
	position: absolute;
	top:10%;left:0;margin:0;padding:0; 
	width:100%;
         margin:1.8em 0 0 0;
	font-size: 4em;
	text-align: center;
	line-height:1em;
	letter-spacing:-0.05em;
	color:	#A0522D;
	text-shadow: -2px -2px 0 #ff6, 2px -2px 0 #ff6, -2px 2px 0 #ff6, 2px 2px 0 #ff6;
	opacity: 0;
	z-index:20;
	-webkit-animation: logo 8s ease-out 44.5s;
	-moz-animation: logo 8s ease-out 44.5;
	-ms-animation: logo 8s ease-out 44.5s;
	-o-animation: logo 8s ease-out 44.5s;
	animation: logo 8s ease-out 44.5s;
}
.t7{
	position: absolute;
	top:-20%;left:0;
	margin:0;padding:0; 
	width:100%;
        margin:0.1em 0 0 0;
	font-size: 20em;
	text-align: center;
	line-height:1em;
	letter-spacing:-0.05em;
	color:#FF00FF;
	text-shadow: -2px -2px 0 #ff6, 2px -2px 0 #ff6, -2px 2px 0 #ff6, 2px 2px 0 #ff6;
	opacity: 0;
	z-index:20;
	-webkit-animation: logo 8s ease-out 49.5s;
	-moz-animation: logo 8s ease-out 49.5s;
	-ms-animation: logo 8s ease-out 49.5s;
	-o-animation: logo 8s ease-out 49.5s;
	animation: logo 8s ease-out 49.5s;
}
.t8{
	position: absolute;
	top:10%;left:0;margin:0;padding:0; 
	width:100%;
        margin:1.8em 0 0 0;
	font-size:4em;
	text-align: center;
	line-height:1em;
	letter-spacing:-0.05em;
	color:#FF00FF;
	text-shadow: -2px -2px 0 #ff6, 2px -2px 0 #ff6, -2px 2px 0 #ff6, 2px 2px 0 #ff6;
	opacity: 0;
	z-index:20;
	-webkit-animation: logo 8s ease-out 54.5s;
	-moz-animation: logo 8s ease-out 54.5s;
	-ms-animation: logo 8s ease-out 54.5s;
	-o-animation: logo 8s ease-out 54.5s;
	animation: logo 8s ease-out 54.5s;
}

.cb-slideshow,
.cb-slideshow:after {
display:none;
}
.cb-slideshow:after {
    content: '';

    margin:0;
    padding:0;
}
.cb-slideshow li span {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
    color: transparent;
    background-size: cover;
    background-position: 50% 50%;
    background-repeat: none;
    opacity: 0;
    z-index: 0;
    animation: imageAnimation 42s linear infinite 0s;
        margin:0;
    padding:0;
}
.cb-slideshow li div {
    z-index: 300;
    position: absolute;
    bottom: 30px;
    left: 0px;
    width: 100%;
    text-align: center;
    opacity: 0;
    color: #fff;
    animation: titleAnimation 42s linear infinite 0s;
}

.cb-slideshow li:nth-child(1) span {
    background-image: url(../images/01.jpg)
}
.cb-slideshow li:nth-child(2) span {
    background-image: url(../images/02.jpg);
    animation-delay: 6s;
}
.cb-slideshow li:nth-child(3) span {
    background-image: url(../images/03.jpg);
    animation-delay: 12s;
}
.cb-slideshow li:nth-child(4) span {
    background-image: url(../images/04.jpg);
    animation-delay: 18s;
}
.cb-slideshow li:nth-child(5) span {
    background-image: url(../images/05.jpg);
    animation-delay: 24s;
}
.cb-slideshow li:nth-child(6) span {
    background-image: url(../images/06.jpg);
    animation-delay: 30s;
}
 .cb-slideshow li:nth-child(7) span {
    background-image: url(../images/07.jpg);
    animation-delay: 36s;
}
 .cb-slideshow li:nth-child(8) span {
    background-image: url(../images/08.jpg);
    animation-delay: 42s;
}
.cb-slideshow li:nth-child(9) div {
    background-image: url(../images/09.jpg);
    animation-delay: 48s;
}
.cb-slideshow li:nth-child(10) div {
    background-image: url(../images/10.jpg);
    animation-delay: 54s;
}
.cb-slideshow li:nth-child(11) div {
    background-image: url(../images/11.jpg);
    animation-delay: 60s;
}
.cb-slideshow li:nth-child(12) div {
    background-image: url(../images/12.jpg);
    animation-delay: 66s;
}



@keyframes imageAnimation {
    0% { opacity: 0; animation-timing-function: ease-in; }
    8% { opacity: 1; animation-timing-function: ease-out; }
    17% { opacity: 1 }
    25% { opacity: 0 }
    100% { opacity: 0 }
}

.no-cssanimations .cb-slideshow li span{
    opacity: 1;
}
#bira{
	position:fixed;
	top:-5px;left:-30px; width:100%;
transform: rotate(-15deg );
}
#himawari{
	display:inline;
	position:absolute;  z-index:220;
	bottom:-50px;left:0;  width:100%;
}

}