@charset "utf-8";

.au_body{
	background:#d2e6ff url(/img/about/bg.png) repeat-x;
}

#head{
	background:#FFFFFF;
}

#about_usappy{
	width:970px;
	margin:10px 0 0 -10px;
	clear:both;
}

.au_head{
	width:970px;
	clear:both;
}

.au_head_fixed{
	position:fixed;
	z-index:5;
	top:0;
	background:#F5FBFF;
	-webkit-border-bottom-right-radius:10px;
    -webkit-border-bottom-left-radius:10px;
	-moz-border-radius-bottomright:10px;
    -moz-border-radius-bottomleft:10px;
}

#au_head .au_menu{
	width:970px;
	height:50px;
	float:left;
	background:#E60020;
	border-radius:10px;
	-webkit-border-radius:10px;
	-moz-border-radius:10px;
	position:relative;
}

#au_head .au_menu #usappy{
	position:absolute;
	top:-69px;
	left:80px;
}


#au_head #au_l{
	width:970px;
	height:70px;
	float:left;
	margin:10px 0 0 0;
	background:url(/img/about/menu_bg.png)  no-repeat top;
}



#au_head #au_l img{
	width:155px;
	float:left;
	margin:25px 10px 0 150px;
}

#au_head #au_l h1{
	width:560px;
	float:left;
	margin:15px 0 0 -20px;
	background:url(/img/about/head_bg.png)  no-repeat top;
	padding:10px;
	text-align:center;
	font-weight:bold;
	font-size:14px;
}

#au_head .au_menu li a{
	border-right:1px #FFFFFF solid;
	width:236px;
	float:left;
	padding:5px 0;
	margin:5px 0;
	font-weight:bold;
	font-size:18px;
	line-height:30px;
	text-align:center;
	color:#FFF;
	cursor:pointer;
}

#au_head .au_menu li a:hover{
	background:#EF8200;
	text-decoration:none;
}

.au_me_st a{
	background:#FFFFFF;
	color:#E60020 !important;
	text-decoration:none;
}


#au_head .au_menu .au_m1 a{
	border-left:1px #FFFFFF solid;
	margin-left:11px;
}

#au_contents{
	width:970px;
	clear:both;
	padding:10px 0;
}

.au_base{
	width:950px;
	height:500px;
	padding:10px;
	margin:20px 0;
	background:#FFF;
	border-radius:10px;
	-webkit-border-radius:10px;
	-moz-border-radius:10px;
}


.au_contents_fixed{
	padding-top:140px!important;
}



.bg-foot-loop {
	width: 100%;
	height: 149px; /* 画像の高さを指定 */
	position: relative;
	background: url("/img/about/foot_bg.png") repeat-x 0 0;
	background-size: auto 100%;
	animation: bg-slider 40s linear infinite; /* 23sの部分背景画像の約数だとスムーズ */
	margin:40px 0 0 0;
	padding:0;
}
@keyframes bg-slider {
	from { background-position: 0 0; }
    to { background-position: 1518px 0; } /* 1518pxとは使用した背景画像の長さ */
}

.bg-foot-loop .car{
	width:200px;
	float:left;
	position:relative;
}

.bg-foot-loop .car1{margin:75px 0 0 400px;animation: horizontal1 1s ease-in-out infinite alternate;}
.bg-foot-loop .car2{margin:75px 0 0 200px;animation: horizontal2 2s ease-in-out infinite alternate;}
.bg-foot-loop .car3{margin:75px 0 0 0;animation: horizontal3 4s ease-in-out infinite alternate;}

.car_t1{
	position:absolute;
	top:45px;
	left:12px;
}

.car_t2{
	position:absolute;
	top:45px;
	left:96px;
}

.car_c{
	position:absolute;
	top:-40px;
	left:40px;
	animation: vertical 1s ease-in-out infinite alternate;
}



.tire img{
    animation: rotate 0.1s;
    animation-iteration-count: infinite;
    -webkit-animation: rotate 0.1s;
    -webkit-animation-iteration-count: infinite;
}


#base1 .cl{
	width:335px;
	float:left;
}

#base1 .cl li{
	width:163px;
	height:190px;
	padding-top:20px;
	float:left;
	border-radius:10px;
	-webkit-border-radius:10px;
	-moz-border-radius:10px;
	text-align:center;
	overflow:hidden;
	cursor:pointer;
}

#base1 #cl1{
	background:#E4F3F2;
	margin:0 5px 5px 0;
	border: solid 1px #E4F3F2;
}

#base1 #cl2{
	background:#D9EFC7;
	margin:0 0 5px 0;
	border: solid 1px #D9EFC7;
}

#base1 #cl3{
	background:#A0C9E1;
	margin:0 5px 0 0;
	border: solid 1px #A0C9E1;
}

#base1 #cl4{
	background:#FDE8EB;
	margin:0;
	border: solid 1px #FDE8EB;
}

#base1 .cl li:hover,#base1 .cl .stay{
	border:solid 1px #FF0000 !important;
}


#base1 .cl li img {
	width:113px;
    -moz-transition: -moz-transform 0.5s linear;
    -webkit-transition: -webkit-transform 0.5s linear;
    -o-transition: -o-transform 0.5s linear;
    -ms-transition: -ms-transform 0.5s linear;
    transition: transform 0.5s linear;
	z-index:0;
}
#base1 .cl li img:hover,#base1 .cl .stay img{
    -webkit-transform: scale(1.2);
    -moz-transform: scale(1.2);
    -o-transform: scale(1.2);
    -ms-transform: scale(1.2);
    transform: scale(1.2);
	z-index:0;
}

#base1 .cl p{
	background:url(/img/about/cl_bg.png)  no-repeat;
	text-align:center;
	color:#FFFFFF;
	width:335px;
	height:65px;
	float:left;
	padding:25px 0 0 0;
	font-weight:bold;
	font-size:18px;
}

#base1 #pl{
	width:600px;
	float:right;
}

#pl .plbaes{
	width:580px;
	height:460px;
	padding:10px;
	border-radius:10px;
	-webkit-border-radius:10px;
	-moz-border-radius:10px;
	display:none;
}

#pl .plbaes h3{
	width:190px;
	height:320px;
	float:left;
	margin:70px 10px;
}

#pl .plbaes p{
	font-weight:bold;
	font-size:16px;
	width:360px;
	line-height:30px;
	float:left;
	margin:80px 10px 0 0;
}

#base1 #pl1{background:#E4F3F2;}
#base1 #pl2{background:#D9EFC7;}
#base1 #pl3{background:#A0C9E1 url(/img/about/pl1_3d.png) no-repeat right bottom; position:relative;}
#base1 #pl4{background:#FDE8EB;}

#base1 .on{
	display:block;
	animation: fadeIn 2s ease 0s 1 normal;
    -webkit-animation: fadeIn 2s ease 0s 1 normal;
}

#base1 #pl1 h3 span img,#base1 #pl2 h3 span img{
	animation:vertical2 1s ease-in-out infinite alternate;
}


#base1 #pl3 .c{
	position:absolute;
	right:50px;
	bottom:10px;
	animation:horizontal3 3s ease-in-out alternate;
}

#base1 #pl3 .c img{
	animation:rotate 3s ease-in-out alternate;
}

#base1 #pl4 .bas{
	position:relative;
}

#base1 #pl4 .a{
	margin:0 0 40px 30px;
	position:absolute;
	animation:rotate_a 2s ease-in-out infinite alternate;
	z-index:2;
}

@keyframes rotate_a {
    0% { transform:translateX(0px) translateY(-2px); }
    100% { transform:translateX(2px) translateY(0px); }
}

#base1 #pl4 .b{
	position:absolute;
	margin:135px 0 0 20px;
	animation:rotate_b 2s ease-in-out infinite alternate;
	z-index:3;
}

@keyframes rotate_b {
    0% { transform: rotate(-6deg); }
    100% { transform: rotate(6deg); }
}

#base1 #pl4 .c{
	position:absolute;
	animation:rotate_c 2s ease-in-out infinite alternate;
	margin:125px 0 0 105px;
	z-index:1;
}

@keyframes rotate_c {
    0% {  transform:translateY(2px) rotate(20deg); }
    100% {  transform:translateY(-2px) rotate(-6deg); }
}

#base1 #pl4 .d{
	position:absolute;
	animation:rotate_d 2s ease-in-out infinite alternate;
	margin:200px 0 0 60px;
	z-index:1;
}

@keyframes rotate_d {
   0% { transform:translateX(40px) translateY(0px) rotate(-20deg); }
   100% { transform:translateX(15px) translateY(-2px) rotate(40deg); }
}

#base1 #pl4 .e{
	position:absolute;
	animation:rotate_e 2s ease-in-out infinite alternate;
	margin:210px 0 0 100px;
	z-index:1;
}

@keyframes rotate_e {
     0% { transform:translateX(-30px) translateY(-5px) rotate(10deg); }
    100% { transform:translateX(0px) translateY(0px) rotate(-20deg); }
}

#base1 #pl4 .pln{
	position:relative;
	bottom:-250px;
}


#base2_in,#base3_in,#base4_in{
	width:930px;
	height:480px;
	padding:10px;
	border-radius:10px;
	-webkit-border-radius:10px;
	-moz-border-radius:10px;
}
#base2_in{background:#D9EFC7;}
#base3_in{background:#A0C9E1;}
#base4_in{background:#FDE8EB;}

#base2_in h2{
	font-size:26px;
	margin:5px 10px 0 10px;
}


#base2_area{
	width:930px;
	float:left;
	overflow:auto;
	-webkit-overflow-scrolling:touch;
}

#base2_area::-webkit-scrollbar {
    width:15px;
}
#base2_area::-webkit-scrollbar-track {
  border-radius:10px;
	background:#f2f2f2;
}
#base2_area::-webkit-scrollbar-thumb {
    border-radius:10px;
	background:#c1c1c1;
}


#base2_area ul{
	margin:0;
	float:left;
	height:440px;
}


#base2_area ul li{
	width:300px;
	height:400px;
	float:left;
	margin:0 0 0 10px;
	padding:10px;
	background:#D9EFC7;
}

#base2_area ul li p{
	font-size:14px;
	font-weight:bold;
	padding:0;
}

#base2_area li .wa_img{
  margin:0;
  padding:0;
  width:300px;
}
#base2_area li span{
	text-align:left;
	float:left;
	font-size:12px;
	min-height: 42px;
}

#base2_area li .bt{
	background:#336600;
	color:#FFFFFF;
	padding:5px;
	float:right;
	border-radius:5px;
	-webkit-border-radius:5px;
	-moz-border-radius:5px;
	margin-top:5px;
}



#base2_w,#base3_w,#base4_w{
	background:#FFF;
	width:930px;
	height:480px;
	float:left;
}

#base3_w h2{
	font-size:26px;
	padding:30px 10px 0 10px;
}

#base3_w p{
	padding:10px;
	font-size:16px;
}

#base3_l{
	width:340px;
	background:#FFF;
	padding:20px;
	float:left;
}

#base3_r{
	width:510px;
	background:#FFF;
	padding:10px;
	float:right;
}

#base3_l a{
	width:338px !important;
}


#base4_in #base4_l{
	width:340px;
	height:440px;
	float:left;
	background:#FFFFFF;
}

#base4_in #base4_r{
	width:580px;
	height:440px;
	float:left;
	background:#FFFFFF;
}

#base4_in #base4_r img{
	width:540px;
	margin:10px 10px 20px 10px;
	float:left;
}

#base3_l a{
	width:560px;
	float:left;
	background:#006837;
	padding:5px;
	font-size:18px;
	text-align:center;
	color:#FFFFFF;
	border-radius:10px;
	-webkit-border-radius:10px;
	-moz-border-radius:10px;
	font-weight:bold;
}
#base4_in #base4_r a{
	margin-top:10px;
}

#base3_l a:hover{
	text-decoration:none;
	background:#009900;
}
#base4_in #base4_r a:hover{
	opacity: 0.8;
}

#base4_in h2{
	padding:30px 10px 0 10px;
	font-size:24px;
}

#base4_in .mini_game{
	width:320px;
	float:left;
	margin:0 !important;
}

#base4_in .mini_game ul{
	width:320px;
	float:left;
	margin:10px 0 !important;
}

#base4_in .mini_game ul li{
	width:140px !important;
	margin:5px 10px;
}

#base4_in .mini_game ul li:last-child a{
	width:130px !important;
}

#base4_in .mini_game ul li:last-child a img{
	margin:0 0 5px 0;
}

#base4_in .mini_game p{
	font-size:15px;
}

#base5{
	width:950px;
	height:3400px;
	padding:10px;
	margin:0px 0 20px -10px;
	background:#FFF;
	border-radius:10px;
	-webkit-border-radius:10px;
	-moz-border-radius:10px;
}
#base5 h2{
    padding: 10px 10px 0 10px;
    font-size: 24px;
}

#base5 ul{
	width:930px;
	margin:0;
	padding:0;
}

#base5 ul li{
	margin:5px 4px;
	float:left;
	width:300px;
	height: 540px;
	min-height: 520px;
}

#base5 ul li iframe{
	width:300px !important;
	min-width:inherit !important;
}

#base6{
	width:950px;
	padding:10px;
	background:#FFF;
	border-radius:10px;
	-webkit-border-radius:10px;
	-moz-border-radius:10px;
}
#base6 h2{
    padding: 10px 10px 0 10px;
    font-size: 24px;
}

#base6 .base6_in{
	width: 930px;
	padding:20px 10px 120px 10px;
	background: #D71417;
	border-radius:10px;
	-webkit-border-radius:10px;
	-moz-border-radius:10px;
}
#base6 .base6_in iframe{
	width: 700px;
	margin: 0 115px;
}

#base6 .base6_in a{
	width:690px;
	margin: 10px 115px;
	float:left;
	background:#fff;
	padding:5px;
	font-size:18px;
	text-align:center;
	color:#D71417;
	border-radius:10px;
	-webkit-border-radius:10px;
	-moz-border-radius:10px;
	font-weight:bold;
}



/* CSS　アニメーション */

/* ローテション */
@keyframes rotate {
    0% { transform: rotate(360deg); }
    100% { transform: rotate(0deg); }
}
@-webkit-keyframes rotate {
    0% { -webkit-transform: rotate(360deg); }
    100% { -webkit-transform: rotate(0deg); }
}

@keyframes rotate2 {
    0% { transform: rotate(-5deg); }
    100% { transform: rotate(5deg); }
}
@-webkit-keyframes rotate2 {
    0% { -webkit-transform: rotate(-5deg); }
    100% { -webkit-transform: rotate(5deg); }
}

/* 横の動き */
@keyframes horizontal1 {
    0% { transform:translateX( -10px); }
  100% { transform:translateX(  0px); }
}
@keyframes horizontal2 {
    0% { transform:translateX( -80px); }
  100% { transform:translateX(  0px); }
}
@keyframes horizontal3 {
    0% { transform:translateX( -100px); }
  100% { transform:translateX(  0px); }
}


/* 縦の動き */
@keyframes vertical {
    0% { transform:translateY(-5px); }
  100% { transform:translateY(  0px); }
}
@keyframes vertical2 {
    0% { transform:translateY(-20px); }
  100% { transform:translateY(  0px); }
}
/* フェードイン */
@keyframes fadeIn {
    0% {opacity: 0}
    100% {opacity: 1}
}
@-webkit-keyframes fadeIn {
    0% {opacity: 0}
    100% {opacity: 1}
}

/* 点滅 */
.blinking{
	-webkit-animation:blink 1.5s ease-in-out infinite alternate;
    -moz-animation:blink 1.5s ease-in-out infinite alternate;
    animation:blink 1.5s ease-in-out infinite alternate;
}
@-webkit-keyframes blink{
    0% {opacity:0;}
    100% {opacity:1;}
}
@-moz-keyframes blink{
    0% {opacity:0;}
    100% {opacity:1;}
}
@keyframes blink{
    0% {opacity:0;}
    100% {opacity:1;}
}