@charset "UTF-8";


h3 {
	text-align: center;
	width: 100%;
	background: #3399ff;
	margin: 0;
	border-top: solid 5PX blue;
	border-bottom: solid 5PX blue;
	color: #fff;
	font-size: 2em;
}

.search{
	width: 190PX;
	height: 46PX;
	text-align: center;
	border: solid 1px red;
	box-sizing: border-box;
}




.article-main{
	float: left;
	margin-top: 3%;
	width: 100%;
	background: linear-gradient(#a3f7fb, #f9fba3,#fbcba3);
	background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHZpZXdCb3g9IjAgMCAxIDEiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPgo8bGluZWFyR3JhZGllbnQgaWQ9ImcyNCIgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiIHgxPSIwJSIgeTE9IjAlIiB4Mj0iMCUiIHkyPSIxMDAlIj4KPHN0b3Agc3RvcC1jb2xvcj0iI0EzRjdGQiIgb2Zmc2V0PSIwIi8+PHN0b3Agc3RvcC1jb2xvcj0iI0Y5RkJBMyIgb2Zmc2V0PSIwLjUiLz48c3RvcCBzdG9wLWNvbG9yPSIjRkJDQkEzIiBvZmZzZXQ9IjEiLz4KPC9saW5lYXJHcmFkaWVudD4KPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNnMjQpIiAvPgo8L3N2Zz4=);
	url(images/bg-cherrybrossam.jpg);
	background-size: cover;
}

.article-back {
	background-image: url(../images/generation/watch.png);
	background-size: 100%;
	padding-bottom: 1%;
	float: left;
}

.article-back .content1,
.article-back .content2{
	margin-bottom: 5%;
	float: left;
	width: 100%;
}

.article-back img{
	width: 12%;
	height: auto;
	position: fixed;
	top: 45%;
	left: 2%;
}

article h2{
	width: 100%;
	background: #3399ff;
	margin: 0;
	border-top: solid 5PX blue;
	border-bottom: solid 5PX blue;
}

/*generation
------------------------------------------------*/

.movie{
	width: 100%;
	float: left;
}

.article-main .movieS{
	display: none;
}

.article-main .movie{
	display: block;
	width: 95%;
	height: auto;
	margin: 0% 2.5%;
}

.movie2{
	float: left;
	width: 100%;
}

.movie2 img{
	position: inherit;
	width: 80%;
	height: auto;
	margin: 0 auto;
}

p {
	color: red;
	line-height: 2;
	font-size: 1.5em;
	font-weight: bold;
}

p.intro {
	font-weight: bold;
	font-size: 1.1em;
	color: red;
	z-index: 10000;
}



#enter1 {
	width: 385px;
	position: fixed;
	top: 52%;
}


.enter1 {
	background-image: url(../generation/images/generation-top.png);
	height: 427.78px;
	background-size: 100% 100%;
	background-repeat: no-repeat;
	overflow: hidden;
}


div.menu {
	margin-left: 0px;
	margin-bottom: 1em;
}
default.css:836
.fixed {
	/*position: fixed;*/
	top: 10px;
	width: 230px;
	z-index: 10000;
}

.block {
	 width: 50%;
	height: auto;
	margin: 0% 0% 10% 40%;
}

.demo{
	float: left;
	margin: 20px 0 0;
	width: 48%;
}
.demo:nth-child(odd){
	float: left;
}
.demo:nth-child(even){
	float: right;
}
.demo p {
	background-color: #ffffff;
	font-size: 1.1em;
	text-align: center;
	border-radius: 25px;
	margin: 0;
}

.content{
	box-sizing: border-box;
	padding: 0 10px;
}
.content1 p a,
.content2 p a {
	display: block;
	width: 100%;
	color: black;
	text-decoration: none;
}

.demo1 p{
	border: solid 4PX #f75353;
}
.demo1 p a{
	border-radius: 20px;
	transition: background-color 1s 0s ease-out;
}
.demo1 p a:hover {
	background-color: #f75353;
	color: white;
}

.demo2 p{
	border: solid 4PX #fd6504;
}
.demo2 p a{
	border-radius: 20px;
	transition: background-color 1s 0s ease-out;
}
.demo2 p a:hover {
	background-color: #fd6504;
	color: white;
}

.demo3 p{
	border: solid 4PX #ffd200;
}
.demo3 p a{
	border-radius: 20px;
	transition: background-color 1s 0s ease-out;
}
.demo3 p a:hover {
	background-color: #ffd200;
	color: white;
}

.demo4 p{
	border: solid 4PX #95fd51;
}
.demo4 p a{
	border-radius: 20px;
	transition: background-color 1s 0s ease-out;
}
.demo4 p a:hover {
	background-color: #95fd51;
	color: white;
}

.demo5 p{
	border: solid 4PX #01e97b;
}
.demo5 p a{
	border-radius: 20px;
	transition: background-color 1s 0s ease-out;
}
.demo5 p a:hover {
	background-color: #01e97b;
	color: white;
}

.demo6 p{
	border: solid 4PX #21daf3;
}
.demo6 p a{
	border-radius: 20px;
	transition: background-color 1s 0s ease-out;
}
.demo6 p a:hover {
	background-color: #21daf3;
	color: white;
}

.demo7 p{
	border: solid 4PX #219afb;
}
.demo7 p a{
	border-radius: 20px;
	transition: background-color 1s 0s ease-out;
}
.demo7 p a:hover {
	background-color: #219afb;
	color: white;
}

.demo8 p{
	border: solid 4PX #9b21fb;
}
.demo8 p a{
	border-radius: 20px;
	transition: background-color 1s 0s ease-out;
}
.demo8 p a:hover {
	background-color: #9b21fb;
	color: white;
}

.demo9 p{
	border: solid 4PX #fb21d0;
}
.demo9 p a{
	border-radius: 20px;
	transition: background-color 1s 0s ease-out;
}
.demo9 p a:hover {
	background-color: #fb21d0;
	color: white;
}

.content2 p{
	border: solid 4PX #8542f7;
}

.content2 p a:hover {
	background-color: #bf99ff;
	border-radius: 20px;
}


ul.content {
	margin: 2% 3% 0% 28%;
}


.section th, section td{
	padding: 10px;
	border: 1px;
	solid #ddd;
}
.section th{
	border: 1px solid #336699;
}



#container-generation {
	margin: 0 auto;
	width: 980px;
	height:auto;
  	background: linear-gradient(0deg, #f60, #3399ff),
  	url(images/bg-cherrybrossam.jpg);
  	background-size: cover;
	overflow: hidden;
	padding: 0 0 50PX;
}

.tamago {
	margin: -3vw 0vw -7vw -7vw;
	overflow: auto;
}

.linear {
	width: 10em;
	margin: -3vw 0vw -12vw -11vw;
	overflow: auto;
}

footer {
	width: 100%;
	margin-top: 2%;
	float: left;
}


/*dd.blog1 a{
	font-size:1.15em;
	color:#666633;
	font-weight:700;
}*/


}

p.return {
	text-align: right;
	position: relative;
}
p.return img {
	width: 4.2%;
	vertical-align: bottom;
	bottom: 0px;
	right: 10px;
	position: fixed;
}



p.pagetop {
	text-align: right;
	position: relative;
}

@media screen and (max-width: 764px) {
	.demo{
		width: 100%;
	}
}