@charset "utf-8";
body {
	width: 100%;
	min-width: 740px;
	max-width: 1000px;
	margin-left: auto;
	margin-right: auto;
	//margin: 0px;
	color: #151515;
	font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
	background-color: #FFFFFF;
text-align:center;

}
#wrapper {
	width: 100%;
	min-width: 740px;
	max-width: 1000px;
	margin-left: auto;
	margin-right: auto;
	//background-color: #FFFFFF;
background-image: url("../img/satoriback.png");
background-repeat: no-repeat;
background-size: contain;
background-position: center center;
background-attachment: fixed;
text-align:center;

}
#top {
    overflow: hidden;
text-align:center;
}

h1, h2 {
	color: #7a0000;
	font-style: normal;
	font-weight: 600;
	font-family: source-sans-pro;
}

h1 {
	font-size: 36px;
	margin-top: 0px;
	margin-bottom: 0px;
	text-align: center;
	text-transform: uppercase;
}
h2 {
font-size: 24px;
margin-top: 0px;
	margin-bottom: 0px;
	text-align: center;
	text-transform: uppercase;
}
#main {
	width: 100%;
	margin-left: 0%;
	float: left;
}
#sidebar {
	width: 34%;
	margin-left: 4%;
	float: left;
}


figure {
	display: block;
	width: 420px;
}
figure img {
	padding: 10px;
	
}

figcaption {
	font-size: 0.875em;
	font-weight: bold;
	text-align: center;
	display: block;
	margin-top: 0.5em;
}
.centered {
	margin-left: auto;
	margin-right: auto;
}
.floatleft {
	float: left;
	margin-left: 0px;
	margin-right: 10px;
}
.floatright {
	float: right;
	margin-left: 10px;
	margin-right: 0px;
}
footer {
	padding-top: 2px;
	padding-bottom: 2px;
	padding-left: 2%;
	background-color: #3f490d;
	color: #e3ebba;
	clear: left;
}
a {
	font-weight: bold;
	text-decoration: none;
}
a:link {
	color: #FF6600;
}
a:visited {
	color: #FF944C;

}
a:hover, a:active, a:focus {
	color: #7F3300;
	text-decoration: underline;
}
#mainnav ul {
	margin-top: 0px;
	margin-right: 0px;
	margin-bottom: 0px;
	margin-left: 0px;
	padding-top: 0px;
	padding-right: 0px;
	padding-bottom: 0px;
	padding-left: 0px;
	list-style-type: none;

text-align:center;
}
#mainnav a {
font-size: 36px;
	width: 100%;
height: 20%;
	display: block;
	float: left;
	text-align: center;
	background-color: #e3ebba;
	color: #7a0000;
	padding-top: 20px;
	padding-bottom: 20px;
opacity: 0.9;
box-shadow: 1px 1px 15px #3f490d;
}
#mainnav a:hover, #mainnav a:active, #mainnav a:focus, #mainnav a.thispage {
	background-color: #3f490d;
color: #aabbaa;
	text-decoration: none;
opacity: 0.7;
box-shadow: 1px 1px 15px #e3ebba;
}
img#floatButton1 {
width: 100%;
height: 22%;
    position: fixed;
    left: 0%;
    bottom: 0%;

}
.posit0{
position: absolute;
top:2%;
left: 2%;
}
.posit1{
position: absolute;
top:10%;
left: 2%;
}
.posit2{
position: absolute;
top:18%;
left: 3%;
}
.posit3{
position: absolute;
top:26%;
left: 4%;
}

.posit4{
position: absolute;
top:34%;
left: 6%;
}
.happa0{ position: absolute; top: -26%; left: 80%; }
.happa1{ position: absolute; top: 40%; left: 25%; }
.happa2{ position: absolute; top: 80%; left: 60%; }
.happa10{ position: absolute; top: 45%; left: 75%; }
.positnull1{
position: absolute;
top:0%;
left: 0%;
}

.corum0{
position: absolute;
top 0%;
}
.corimg{
opacity: 0.8;
}
.titset{
position: absolute;
    top: 10%;
    left: 20%;
}
.corum1{
position: relative;
}

.syasin0{
    
    position: absolute;
    top: 0%;
    left: 14%;
box-shadow: 1px 1px 15px #3f490d, 0 -10px 5px -2px #3f490d inset;
}
.syasin1{
    position: absolute;
    top: 10%;
    left: 48%;
box-shadow: 1px 1px 15px #3f490d, 0 -10px 5px -2px #3f490d inset;
}
.syasin2{
    
    position: absolute;
    top: 45%;
    left: 0%;
box-shadow: 1px 1px 15px #3f490d, 0 -10px 5px -2px #3f490d inset;
}

.ran0{

//display: flex;
    //justify-content: center;
    //align-items: center;
    //cursor: pointer;
    
    position: absolute;
    top: -20%;
    left: 40%;
width: 72%;
height: 32%;
background-image: url("../img/kizi.png");
opacity: 0.8;
//background-color: rgba(255,255,255,0.6);
background-repeat: no-repeat;
background-size: contain;
background-position: center center;
//background-attachment: fixed;

}
.bun1{
    position: absolute;
    top: 10%;
    left: 10%;
width: 80%;
    height: 80%;
    color: #004400;
    //background-color: #2779bd;
    //display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.5rem;
    border-radius: 50%;
    cursor: pointer;
    text-align: left;


}


.ran1{
    position: absolute;
    top: 35%;
    left: 38%;
width: 62%;
height: 42%;
background-image: url("../img/kizi.png");
opacity: 0.8;
background-repeat: no-repeat;
background-size: contain;
background-position: center center;
}
.happa3{ position: absolute; top: 70%; left: 75%; }
.happa4{ position: absolute; top: 25%; left: 30%; }
.positnull2{
position: absolute;
top:0%;
left: 0%;
}

.ran2{
position: absolute;
    top: -29%;
    left: 30%;
width: 72%;
height: 72%;
background-image: url("../img/kizi.png");
opacity: 0.8;
background-repeat: no-repeat;
background-size: contain;
background-position: center center;
//background-attachment: fixed;
}
.bun2{
    position: absolute;
    top: 20%;
    left: 11%;
width: 80%;
    height: 80%;
    color: #004400;
    //background-color: #2779bd;
    //display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.2rem;
    border-radius: 50%;
    cursor: pointer;
    text-align: left;
}
.syasin3{
    position: absolute;
    top: -12%;
    left: -6%;
box-shadow: 1px 1px 15px #3f490d, 0 -10px 5px -2px #3f490d inset;
}

.syasin4{
    
    position: absolute;
    top: 10%;
    left: -3%;
box-shadow: 1px 1px 15px #3f490d, 0 -10px 5px -2px #3f490d inset;
}
.ran3{
position: absolute;
    top: 5%;
    left: -3%;
width: 42%;
height: 82%;
background-image: url("../img/kizi.png");
opacity: 0.8;
background-repeat: no-repeat;
background-size: contain;
background-position: center center;
//background-attachment: fixed;
}
.bun3{
    position: absolute;
    top: 35%;
    left: 10%;
width: 80%;
    height: 80%;
    color: #004400;
    //background-color: #2779bd;
    //display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.2rem;
    border-radius: 50%;
    cursor: pointer;
    text-align: left;
}
.syasin5{
    position: absolute;
    top: 28%;
    left: 38%;
box-shadow: 1px 1px 15px #3f490d, 0 -10px 5px -2px #3f490d inset;
}
.happa5{ position: absolute; top: 60%; left: 50%; }
.happa6{ position: absolute; top: 20%; left: 20%; }

.positnull3{
position: absolute;
top:0%;
left: 0%;
}
.ran4{
position: absolute;
    top: -40%;
    left: 4%;
width: 92%;
height: 92%;
background-image: url("../img/kizi.png");
opacity: 0.8;
background-repeat: no-repeat;
background-size: contain;
background-position: center center;
//background-attachment: fixed;
}
.bun4{
    position: absolute;
    top: 20%;
    left: 10%;
width: 80%;
    height: 80%;
    color: #004400;
    //background-color: #2779bd;
    //display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.2rem;
    border-radius: 50%;
    cursor: pointer;
    text-align: left;
}





.happa7{ position: absolute; top: 40%; left: 32%; }
.happa8{ position: absolute; top: 30%; left: 17%; }
.happa9{ position: absolute; top: 10%; left: 85%; }

.positnull4{
position: absolute;
top:-1476px;
left: 0%;
}

//.rotate_happa0 {
//    transform: rotate(180deg);
//    transition: 5s; 
//}

#interval {
    position:fixed;
//position:absolute;
    top:0;
    right:0;
}

#wrap {
    position:relative;
    height:2000px;
}
.object span {
    z-index:10;
    position:absolute;
    -webkit-transition: all 2s ease;
    -moz-transition: all 2s ease;
    -o-transition: all 2s ease;
    -ms-transition: all 2s ease;
    transition: all 2s ease;
}
.pos0 {
    top:0px;
    left:0px;
}
.pos1 {
    top:500px;
    left:200px;
}
.pos2 {
    top:1000px;
    left:400px;
}
.pos3 {
    top:1500px;
    left:200px;
}

.border1,
.border2,
.border3 {
    //border-top:1px #ccc solid;
    //position:absolute;
    //width:100%;
}
.border1 {
    //z-index:1;
    top:500px;  
}
.border2 {
    //z-index:2;
    top:1000px;  
}
.border3 {
    //z-index:3;
    top:1500px;  
}
/* ??????????? */
.object span {
    -webkit-transform-origin: top center;
    transform-origin: top center;
    -webkit-animation-name: swing;
    animation-name: swing;
    -webkit-animation-duration: 2s;
    animation-duration: 2s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    animation-iteration-count:infinite;
    -webkit-animation-iteration-count:infinite;
}
@-webkit-keyframes swing {
    20%, 40%, 60%, 80%, 100% {
        -webkit-transform-origin: top center;
    }
    20% {
        -webkit-transform: rotate(15deg);
    }
    40% {
        -webkit-transform: rotate(-10deg);
    }
    60% {
        -webkit-transform: rotate(5deg);
    }
    80% {
        -webkit-transform: rotate(-5deg);
    }
    100% {
        -webkit-transform: rotate(0deg);
    }
}
@keyframes swing {
    20% {
        transform: rotate(15deg);
    }
    40% {
        transform: rotate(-10deg);
    }
    60% {
        transform: rotate(5deg);
    }
    80% {
        transform: rotate(-5deg);
    }
    100% {
        transform: rotate(0deg);
    }
}

#aspslide{
      position: absolute;
margin-left:auto; 
margin-right:auto;
//left: 50%;      
      width: 1000px;
      height: 882px;
      overflow:hidden;
      padding:0!important;
}

.asnakami{
      position: absolute;
      top: 0px;
margin-left:auto; 
margin-right:auto; 
//left: 50%;
      //left: 50px;
      width: 100%;
      height: 100%;
      padding:0!important;
}   


#asnakami1{
      -moz-animation: fadeinout 30s 0s infinite;
      -webkit-animation: fadeinout 30s 0s infinite;
      -o-animation: fadeinout 30s 0s infinite;
      animation: fadeinout 30s 0s infinite;
}

#asnakami2{
      -moz-animation: fadeinout 30s 5s infinite;
      -webkit-animation: fadeinout 30s 5s infinite;
      -o-animation: fadeinout 30s 5s infinite;
      animation: fadeinout 30s 5s infinite;
}

#asnakami3{
      -moz-animation: fadeinout 30s 10s infinite;
      -webkit-animation: fadeinout 30s 10s infinite;
      -o-animation: fadeinout 30s 10s infinite;
      animation: fadeinout 30s 10s infinite;
}

#asnakami4{
      -moz-animation: fadeinout 30s 15s infinite;
      -webkit-animation: fadeinout 30s 15s infinite;
      -o-animation: fadeinout 30s 15s infinite;
      animation: fadeinout 30s 15s infinite;
}

#asnakami5{
      -moz-animation: fadeinout 30s 20s infinite;
      -webkit-animation: fadeinout 30s 20s infinite;
      -o-animation: fadeinout 30s 20s infinite;
      animation: fadeinout 30s 20s infinite;
}

#asnakami6{
      -moz-animation: fadeinout 30s 25s infinite;
      -webkit-animation: fadeinout 30s 25s infinite;
      -o-animation: fadeinout 30s 25s infinite;
      animation: fadeinout 30s 25s infinite;
}

@-moz-keyframes fadeinout {
 0% { left:0%; opacity:0;}
 5% { left:0%;opacity:1; }
 20% { left:0%; opacity:1;}
 25% { left:0%;opacity:0; }
 26% { opacity:0;left:100%; }
 99.99% { opacity:0;left:100%; }
 100% { opacity:0;left:0%; }
}

@-webkit-keyframes fadeinout {
 0% { left:0%; opacity:0;}
 5% { left:0%;opacity:1; }
 20% { left:0%; opacity:1;}
 25% { left:0%;opacity:0; }
 26% { opacity:0;left:100%; }
 99.99% { opacity:0;left:100%; }
 100% { opacity:0;left:0%; }
}

@-o-keyframes fadeinout {
 0% { left:0%; opacity:0;}
 5% { left:0%;opacity:1; }
 20% { left:0%; opacity:1;}
 25% { left:0%;opacity:0; }
 26% { opacity:0;left:100%; }
 99.99% { opacity:0;left:100%; }
 100% { opacity:0;left:0%; }
}

@keyframes fadeinout {
 0% { left:0%; opacity:0;}
 5% { left:0%;opacity:1; }
 20% { left:0%; opacity:1;}
 25% { left:0%;opacity:0; }
 26% { opacity:0;left:100%; }
 99.99% { opacity:0;left:100%; }
 100% { opacity:0;left:0%; }
}
view raw