﻿#wrap{
width: 1120px;
margin: 20px auto;
}
#wrap1{
width: 960px;
margin: 20px auto;
}
.smallimage {
background-color : #000;
border: 2px solid #1F8F1F;
padding: 3px;
margin: 0px 0px 0 0;
}

.line3{
padding-top: 20px; 
padding-bottom: 60px;
}

/* html,bodyタグの設定 */
html, body{
    margin: 0;         /* 余白の削除 */
    padding: 0;        /* 余白の削除 */
    width:100%;
    height:100%;
}

/* ヘッダーの固定 */
div#header-fixed
{
    position: fixed;            /* ヘッダーの固定 */
    top: 10px;                   /* 位置(上0px) */
    left: 10%;                  /* 位置(右0px) */
    width: 80%;                /* 横幅100%　*/
    height: 120px;              /* 縦幅140px */
}
 
 div#header-fixed-1
{
    position: fixed;            /* ヘッダーの固定 */
    top: 0px;                   /* 位置(上0px) */
    left: 0%;                  /* 位置(右0px) */
    width: 100%;                /* 横幅100%　*/
    height: 100%px;              /* 縦幅140px */
}

div#header-bk { 
	background-color:rgba(0,0,0,0.00);     /* 背景色(黒) */
	padding:10px 0 20px;       /* 上10px、下20pxをあける */
	height:120px;              /* 縦の高さ110px */
	width:70%%;                /* 横の幅を100% */
}
 
div#header { 
	
	height: 100%;              /* 縦の表示領域はheader-bkと同じ */
	width: 960px;              /* 横の幅970px */
	margin: auto;              /* 中央揃え */
}


div#header_t { 
	margin-top: 0px;
	font-size: 250%;
	font-weight: bold;
	text-align: left;
	color: rgba(255,255,255,1.00);
	padding : 20px ;
	font-family: "HG正楷書体-PRO","HG正楷書体-PRO",serif;
}
div#header_ymd { 
	margin-top: 0px;
	font-size: 120%;
	font-weight: bold;
	text-align: left;
	color: rgba(255,255,255,0.60);
 	padding : 5px ;
	font-family: "ＭＳ ゴシック","ＭＳ ゴシック",serif;
}
div#header_msgt { 
	margin-top: 0px;
	font-size: 200%;
	font-weight: bold;
	vertical-align: top;
	color: rgba(239,239,49,0.60);
	background-image: url(../Image/msgBackimage.png);
	background-repeat:  no-repeat;              /* 背景の繰り返し設定 */
	padding-left : 0px;
	padding-right : 20px;
	padding-top : 20px;
	padding-bottom : 20px;
	font-family: "HG正楷書体-PRO","HG正楷書体-PRO",serif;
}

div#header_msgtx { 
	margin-top: 0px;
	/*font-size: 250%;*/
	font-weight: bold;
	vertical-align: bottom;
	color: rgba(20,20,239,0.6);
	background-image:  url(../Image/msgBackimage.png);
	background-repeat:  no-repeat;              /* 背景の繰り返し設定 */
	padding-left : 0px;
	padding-right : 20px;
	padding-top : 20px;
	padding-bottom : 20px;
	/*font-family: "HG正楷書体-PRO","HG正楷書体-PRO",serif;*/
	text-shadow: 1px 1px 2px black, 0 0 1em blue, 0 0 0.2em blue;
    /*text-shadow: 1px 1px 1px white, 0 0 1em white, 0 0 0.1em white;*/
  	color: #ffffff;
  	font: bold 1.2em Georgia, serif;
}
div#header_msg { 
	margin-top: 0px;
	font-size: 100%;
	font-weight: bold;
	text-align: left;
	vertical-align: top;
	color: rgba(0,255,0,0.60);
 	padding : 5px ;
	font-family: "ＭＳ ゴシック","ＭＳ ゴシック",serif;
}
div#header_msgtt { 
	margin-top: 0px;
	font-size: 140%;
	font-weight: bold;
	vertical-align: top;
	color: rgba(255,255,255,0.60);
 	padding : 5px ;
	font-family: "ＭＳ ゴシック","ＭＳ ゴシック",serif;
}

/* フッターの固定 */
div#footer-fixed
{
    position: fixed;            /* フッターの固定 */
    bottom: 0px;                /* 位置(下0px) */
    left: 10%;                  /* 位置(左0px) */
    width: 100%;                /* 横幅100%　*/
    height: 40px;              /* 縦幅140px */
}
div#footer-fixed_1
{
    position: fixed;            /* フッターの固定 */
    bottom: 0px;                /* 位置(下0px) */
    left: 0%;                  /* 位置(左0px) */
    width: 100%;                /* 横幅100%　*/
    height: 40px;              /* 縦幅140px */
}
div#footer-fixed_2
{
    position: fixed;            /* フッターの固定 */
    bottom: 0px;                /* 位置(下0px) */
    left: 25%;                  /* 位置(左0px) */
    width: 100%;                /* 横幅100%　*/
    height: 40px;              /* 縦幅140px */
}
div#footer-bk
{
	background-color:rgba(0,0,0,0.0);     /* 背景色(黒) */
	padding:0px 0 0px;       /* 上10px、下20pxをあける */
	height:60px;              /* 縦の高さ140px */
	width:80%;                /* 横の幅を100% */
}
 
div#footer { 
	width: 960px;
	margin-top: 10px;
	font-size: 120%;
	font-weight: bold;
	text-align: center;
	color: rgba(255,255,255,1.00);
	padding : 0px ;
	font-family: "HG正楷書体-PRO","HG正楷書体-PRO",serif;
}
/* ボディの定義 */
div#body-bk{
    padding:220px 0 10px 0;    /* 上下に160pxを余白を取る */
    background-color:rgba(0,0,0,1.00);     /* 背景色(黒) */
}
 
div#body{
    width:960px;
    margin:auto;
	background-color:rgba(0,0,0,1.00);     /* 背景色(黒) */
}

td.top1 { vertical-align: top; }

.background_jump {
    background: radial-gradient(rgb(169, 214, 255), rgb(0, 0, 0));

}

.sample {
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    background:#000000;
    z-index:-1;
}

.sample li {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: 50% 50%;
    background-repeat: none;
    opacity: 0;
    -webkit-animation: anime 40s linear 0s infinite ;
    animation: anime 40s linear 0s infinite ;
}

.sample li:nth-child(1) { 
	background-image: url(../topPhoto/miharu.png);
}
.sample li:nth-child(2) {
    background-image: url(../topPhoto/skytree.png);
    -webkit-animation-delay: 10s;
    animation-delay: 10s;
}
.sample li:nth-child(3) {
    background-image: url(../topPhoto/uedajo.png);
    -webkit-animation-delay: 20s;
    animation-delay: 20s;
}
.sample li:nth-child(4) {
    background-image: url(../topPhoto/miharu.png);
    -webkit-animation-delay: 30s;
    animation-delay: 30s;
}


@-webkit-keyframes anime { 
	0% {
	    -webkit-animation-timing-function: ease-in;
		opacity: 0;
	}
	10% {
	    -webkit-transform: scale(1.1);
		opacity: 1;
	}
	40% {
	    -webkit-transform: scale(1.2);
            -webkit-animation-timing-function: ease-out;
		opacity: 1;
	}
	50% {
	    -webkit-transform: scale(1.3);
		opacity: 0;
	}
	100% { opacity: 0 }
}
@keyframes anime { 
	0% {
	    animation-timing-function: ease-in;
		opacity: 0;
	}
	10% {
	    transform: scale(1.1);
		opacity: 1;
	}
	40% {
	    transform: scale(1.2);
            animation-timing-function: ease-out;
		opacity: 1;
	}
	50% {
	    transform: scale(1.3);
		opacity: 0;
	}
	100% { opacity: 0 }
}


