.sm {
    display: none !important;
  }
.md {
    
    display: block !important;
  }

img {
    vertical-align: bottom;
}
* {
	margin: 0;
	padding: 0;
}
*::after,
* {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

ul {
    list-style:none;
}

.backgrounds {
  width: 100%;
  height: 100%;
  position: fixed;
  -webkit-transform: translateZ(0);
          transform: translateZ(0);
  z-index: -1; }
  .backgrounds .background {

    width: 100%;
    height: 100%;
    background-size: cover;
    position: absolute;
    left: 0;
    top: 0;
    background-attachment: fixed; }

.overlay:after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  opacity: 0.8; 
}


body {
	font-family: 'Lato', sans-serif;
}
article {
	height: 1000px;
	margin: 100px auto;
	text-align: center;
	line-height: 1.9;
}
article p {
	margin-bottom: 1em;
}
a {
	color: #0b8793;
}
#main-visual {
	background: #e6b715;

	height: 700px;
}

footer {
	padding: 30px;
	text-align: center;
}
footer a {
	text-decoration: none;
}

/* a?2a?2a?2a?“a?“a??a?§a?￣a??a?“a?2a??a?・a?§a?3a?≪e?￠a??a?aa??e¨-aR?a?2a?2a?2 */

.inner {
	width: 980px;
	margin: 0 auto;
}
.inner:after {
	content: "";
	clear: both;
	display: block;
}

/* header */
#top-head {
	font-size: 14px;
	top: -80px;
	position: absolute;
	width: 100%;
	margin: 100px auto 0;
	padding: 30px 0 0;
	line-height: 1;
	z-index: 999;
}
#top-head a,
#top-head {
	color: #000;
	text-decoration: none;
}
#top-head .inner {
	position: relative;
}
#top-head .logo {
	float: left;
	font-size: 36px;
}
#global-nav ul {
	list-style: none;
	position: absolute;
	right: 0;
	bottom: 0;
	font-size: 14px;
}
#global-nav ul li {
	float: left;
	position: relative;
}
#global-nav ul li a {
	padding: 0 30px;
}

/* Btn Hover */
#global-nav ul li:after {
	position: absolute;
	content: "";
	display: block;
	width: 100%;
	height: 3px;
	bottom: -20px;
	transition: all 0.3s ease;
	-webkit-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
}
#global-nav ul li:hover:after {
	background: #fff;
	bottom: -30px;
}


/* Fixed */
#top-head.fixed {
	margin-top: 0;
	top: 0;
	position: fixed;
	/* padding-top: 40px; */
	height: 55px;
	background: #fff;
	background: rgba(255,255,255,.7);

	transition: top 0.65s ease-in;
	-webkit-transition: top 0.65s ease-in;
	-moz-transition: top 0.65s ease-in;
}
#top-head.fixed .logo {
	font-size: 24px;
	color: #333;
}
#top-head.fixed #global-nav ul li a {
	color: #333;
	padding: 0 20px;
}

/* Fixed Btn Hover */
#top-head.fixed #global-nav ul li:after {
	bottom: -10px;
}
#top-head.fixed #global-nav ul li:hover:after {
	background: #0062B8;
	bottom: -20px;
}
div#rogorogo {
    text-align: left;
    margin-left: 50px;
}


/* Toggle Button */
#nav-toggle {
	display: none;
	position: absolute;
	right: 12px;
	top: 14px;
	width: 34px;
	height: 36px;
	cursor: pointer;
	z-index: 101;
}

#nav-toggle div {
	position: relative;
}
#nav-toggle span {
	display: block;
	position: absolute;
	height: 4px;
	width: 100%;
	background: #000;
	left: 0;
	-webkit-transition: .35s ease-in-out;
	-moz-transition: .35s ease-in-out;
	transition: .35s ease-in-out;
}
#nav-toggle span:nth-child(1) {
	top: 0;
}
#nav-toggle span:nth-child(2) {
	top: 11px;
}
#nav-toggle span:nth-child(3) {
	top: 22px;
}




/**目次↓↓**/ 
    
 section.mokuji_contents {
    margin-top: 2%;
    margin-bottom: 8%;
}   
    
.mokuji_g {
    text-align: center;
    margin-top: 20px;
    margin-bottom: 15px;
    
} 

    h2 {
    font-size: 160%;
    font-weight: bold;    
}

p.mokuji {
    border-style: solid;
    border-width: 1px;
    width: 15%;
    margin: auto;
    font-size: 160%;
} 
p {
    font-size: 130%;
    line-height: 1.8em;
    }
.mokuji_g {
    margin-left: 8%;
    margin-right: 8%;
    margin-bottom: 50px;
} 
img {
    max-width: 100%;
} 
    
.font_f {
    font-size: 200%;

    line-height: 1.5em;
}
h1 {
    font-size: 300%;
 	font-family: sans-serif;   
    line-height: 2em;
    letter-spacing: 0.2em;
    font-weight: lighter;
}
.osha_g {
    margin-right: 10%;
    margin-left: 10%;
    text-align: center;
    margin-bottom: 70px;
    display: inline-block;
}
.osha_g2 {
    margin: 70px auto 70px auto;
    text-align: center;
    width: 50%;
 
}
    
p.font_big {
    font-family: "ヒラギノ明朝 ProN W6", "HiraMinProN-W6", "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", serif;
    font-size: 220%;
}  
p.font_regular {
    line-height: 2.5em;
    letter-spacing: 0.1em;
    font-size: 20px
}  
span.orengi {
    color: #e8b716;
} 

    
    
/* 職場環境ページ */ 
    
.top_main_g {
    border: 5px;
    border-style: solid;
    border-color: #e8b716;
    padding: 2% 2% 1% 2%;
    margin: 10% auto 5% auto;
    border-radius: 50%;
    border-radius: 50px;
    -webkit-border-radius: 50px;
    -moz-border-radius: 50px;
    max-width: 25%;
    text-align: center;
    

}        
p.top_main_t {
    font-size: 420%;
    font-family: "ヒラギノ明朝 ProN W6", "HiraMinProN-W6", "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", serif;
    letter-spacing: 0.2em;
        line-height: 0em;
}
    
p.top_main_t2 {
    line-height: 0em;
    font-size: 180%;
} 
.t3{
    font-size: 350% !important;   
}    
.work_top_t {
    font-size: 300%;
    font-family: "ヒラギノ明朝 ProN W6", "HiraMinProN-W6", "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", serif;
    line-height: 1.8em;
}

.work_top_t2 {
    font-size: 30px;
    font-family: "ヒラギノ明朝 ProN W6", "HiraMinProN-W6", "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", serif;
    line-height: 1.8em;
}
    
section.mokuji_contents2 {
    background-color: #e8b716;
    margin-bottom: -4%;
    border-bottom-style: solid;
    border-bottom-width: 2px;
    text-align: center;
    padding-top: 3%;
    padding-bottom: 5%;
}    
    
.work_gul {
    display: -webkit-flex;
    display: flex;
    margin: 20px auto 20px auto;
    width: 100% 
    width: 100%;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap
}
    
.work_gli img {
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
}
    
.work_gli:hover {
    background-color: #e8b716;      
    }       
    
.work_gli {
    margin: auto;    
}
    
p.staff_t2 {
    margin-top: -5%;
    font-size: 80%;
}
    
    
/* BUTTON 5 */
.bt-5 {
  overflow: hidden;
}

.bt-5::after {
  /*background-color: #f00;*/
  height: 100%;
  left: -35%;
  top: 0;
  transform: skew(50deg);
  transition-duration: 0.6s;
  transform-origin: top left;
  width: 0;
}

.bt-5:hover:after {
  height: 100%;
  width: 135%;
}
    
section.mokuji_contents3 {
    background-color: #e8b716;
    margin-bottom: 6%;
    text-align: center;
    padding-top: 3%;
    padding-bottom: 5%
}  


dl.dl_g{
width:50%;
list-style:none;
font-size: 150%; 
line-height: 2em;    

background:repeat-y left top;
overflow:auto;
margin: auto; 
}

dt.line{
clear:both;
width:20%;
float:left;
margin-top: 4%;
margin-bottom: %;
}

dd.line2{
border-bottom: 1px solid #FFFFFF;
padding:20px 0% 5px 25%;
text-align: left;
margin-top: 4%;
margin-bottom: %;
}



dl.dl_g2{
width:55%;
list-style:none;
font-size: 150%; 
line-height: 2em;    
   

background:repeat-y left top;
overflow:auto;
margin: auto; 
}

dt.line3{
clear:both;
width:25%;
float:left;
margin-top: 4%;
text-align: center;
font-weight: bold;
font-size: 16px;
height: 40px;
}

dd.line4 {
    border-bottom: 1px solid #000000;
    text-align: left;
    margin-top: 4%;
    padding: 0px 0% 15px 0%;
    font-size: 15px;
}   


.foot_text {
    line-height: 2.5em;
    font-size: 15px;
} 
.urukuma_foot {
    width: 15%;
    margin: 15px auto 0 auto;
}
.foot_text2 {
    margin-top: 5px;
}
        
/********************* ここからNEW事業内容PC **********************/    
    
.down_yajirushi {
    width: 100%;
    position: absolute;
    top: 70% !important;
    left: 0; 
}        
   
.business_g_content {
    margin-bottom: 10%;
}    
ul.business_g_content_table {
    margin-top: 2%;
    background: #e8b716;
    width: 100%;
    border-radius: 15px;
    display: flex;
    align-items: center;
}  
li.business_g_content_imag {
    display: table-cell;
    list-style-type: none;
    vertical-align: middle;
    padding: 3%;
    width: 30%;
}
ul.business_g_content_lists {
    margin: 1% 10% 1% 10%;
}
li.business_g_content_li {
    width: 100%;
    text-align: left;
}    
p.business_g_h2 {
    font-size: 170%;
    font-weight: bold;
    margin-top: 2%;
}
.business_g_h2_b {
    background-color: #efe6c8;
    padding: 2%;
    margin-bottom: 2%;
    margin-right: 2%;
}
.business_g_h2_waku {
    border-color: #efe6c8;

}
li.business_g_h2_a {
    font-size: 120%;
}
ul.business_g_h2_waku {
    border-style: solid;
    border-width: 1px;
    border-color: #efe6c8;
    margin-bottom: 3%;
    margin-right: 3%;
    padding-left: 2%;
    padding-top: 2%;
} 
.business_g_urukuma {
    margin-left: 20%;
    margin-bottom: -25px;
    margin-top: -50px;
    text-align: left;
} 
.Company_g_content {
    background-color: #e8b716;
} 
.shibuya_tenpo {
    position: relative;
}
.shibuya_tenpo img {
    margin: auto;
    width: 100%;
}
p.urukuma_shibuya img {
    width: 50%;
}
p.urukuma_shibuya {
    position: absolute;
    padding-bottom: 5%;
    bottom: -70px;
    width: 40%;
    padding-left: 10%;
}
.shibuya_staff {
    text-align: center;
}
    
p.staff_t {
    margin-top: 3%;
    text-align: center;
}
.gaiyou_font {    
    font-size: 170%;
    font-weight: bold;
    margin-top: 2%;
    margin-bottom: 2%; 
    text-align: center;
} 
.gaiyou {
    margin-top: 10%;
    padding-bottom: 15%;
}
p.business_g_text {
    margin-bottom: 1%;
    margin-right: 2%;
}    

/*アニメーション用CSS*/
.updown{
  /* アニメーションの名前 */
  animation-name:UpDown;
  /* アニメーションの１回分の長さ */
  animation-duration: 1.5s;
  /* アニメーションの回数 */
  animation-iteration-count: infinite;
  /* アニメーションの進行具合 */
  animation-timing-function: ease-in-out;
  /* アニメーション再生の向き */
  animation-direction: alternate;
}
  /* アニメーションの設定 */
@keyframes UpDown{
  /* 開始地点 */
  0%{
  /* Y軸0px */
  transform: translateY(0);
  }
  /* 終了地点 */
  100%{
  /* Y軸50px */
  transform: translateY(20px);
  }
}     
    
 /************************************************************/

@media screen and (max-width: 980px) {
	article {
		padding: 0 30px;
	}
	.inner {
		width: 100%;
		padding: 0 20px;
	}
	#global-nav ul li a {
		padding: 0 20px;
	}
	#top-head.fixed #global-nav ul li a {
		padding: 0 15px;
	}
    
    
    
/*中間の職場環境*/
.top_main_g {
    border-style: solid;
    border-color: #e8b716;
    padding: 1% 0% 1% 0%;
    margin: 8% auto 5% auto;
    border-radius: 50%;
    border-radius: 50px;
    -webkit-border-radius: 50px;
    -moz-border-radius: 50px;
    max-width: 30%;
    text-align: center;
    

}        
    
.business_g_urukuma {
    margin-left: 20%;
    margin-bottom: -15px;
    margin-top: -50px;
    text-align: left;
}     

}




/*********** 経営理念ページ ************/


.font30{
    font-size: 40px;
}
p.font_big {
    font-family: "ヒラギノ明朝 ProN W6", "HiraMinProN-W6", "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", serif;
    font-size: 25px;
    line-height: 3em;
}
section.mokuji_contents {
    text-align: center;
}
span.font_big2 {
    font-size: 40px;
}
.yellow_waku {
    background-color: #e8b716;
    padding: 50px 0 50px 0;
}
.white_waku {
    width: 800px;
    background-color: white;
    margin: 10px auto 10px auto;
    padding: 10px;
    border-radius: 40px;
}
.yellow_waku3 {
    width: 800px;
    background-color: #e8b716;
    margin: 10px auto 10px auto;
    padding: 10px;
    border-radius: 40px;
}
.yellow_waku2 {
    background-color: #e8b716;
    padding: 50px 0 70px 0;
    margin-top: -40px;
    margin-bottom: -50px;
}
span.red {
    color: #fc9a99;
}
span.green {
    color: #80cca6;
}
span.blue {
    color: #82b0d4;
}
span.purple {
    color: #cd8ec5;
}
.top_tyousei {
    margin-top: -30px;
}
.nikoniko2_img {
    text-align: center;
    background-color: white;
    padding: 10px;
    margin-top: -140px;
}
p.font_big2 {
    font-family: "ヒラギノ明朝 ProN W6", "HiraMinProN-W6", "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", serif;
    font-size: 30px;
    line-height: 2em;
}
span.big_f35 {
    font-size: 35px;
    margin-left: 5px;
    font-family: "ヒラギノ明朝 ProN W6", "HiraMinProN-W6", "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", serif;
}
img.king_icon_img {
    width: 50px;
}
.font_35m{
    font-size: 35px;
    font-family: "ヒラギノ明朝 ProN W6", "HiraMinProN-W6", "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", serif;        
}
.mr_left5{
    margin-left: 5px;
}
.font_60{
    font-size: 60px;
}
.font_40{
    font-size: 40px;
    font-family: "ヒラギノ明朝 ProN W6", "HiraMinProN-W6", "HG明朝E", "ＭＳ Ｐ明朝", "MS PMincho", "MS 明朝", serif;
}
.font_20{
    font-size: 20px;
}
.font_22{
    font-size: 22px;
}
.mini_font2{
    font-size: 15px;
}
.mr_top_50{
    margin-top: -40px;
}
.business_box {
    margin: 70px auto 0px auto;
}
.white_font{
    color: white;
}
.line_space{
    line-height: 0;
}
p.mokuji_orengi_mini {
    color: #deb00f;
    margin-top: -10px;
}
.map_g {
    text-align: center;
    margin-bottom: 80px;
}








/********************* ここからスマホサイズ **********************/

@media screen and (max-width: 780px) {
	#main-visual {
		height: 350px;
	}


	#top-head,
	.inner {
		width: 100%;
		padding: 0;
	}
	#top-head {
		top: 0;
		position: fixed;
		margin-top: 0;
	}
	/* Fixed reset */
	#top-head.fixed {
		padding-top: 0;
		background: transparent;
	}
   div#rogorogo {
   text-align: left;
   margin-left: 20px;
   margin-top: 20px;
   position: absolute;
   z-index: 100000;
}

	#mobile-head {
		width: 100%;
		height: 56px;
		z-index: 999;
		position: relative;
	}
	#top-head.fixed .logo,
	#top-head .logo {
display: none;
	}

	#global-nav {
		position: absolute;
		/* e??a??a?|a?aa??a?¨a??a?￣c”≫e?￠a??a?≪e…?c?R */
		top: -500px;
		background: #000;
		width: 100%;
		text-align: center;
		padding: 10px 0;
		-webkit-transition: .5s ease-in-out;
		-moz-transition: .5s ease-in-out;
		transition: .5s ease-in-out;       
        color: black;
        background-color: #eeeeef;
        border-style: double;
        opacity: 0.8;
	}
	#global-nav ul {
		list-style: none;
		position: static;
		right: 0;
		bottom: 0;
		font-size: 11px;
	}
	#global-nav ul li {
		float: none;
		position: static;
	}
	#global-nav ul li:after  {
		display: none;
	}
	#top-head #global-nav ul li a,
	#top-head.fixed #global-nav ul li a {
		width: 100%;
		display: block;
		color: #000;
		padding: 18px 0;
	}
	#nav-toggle {
		display: block;
	}
	/* #nav-toggle a?‡a??a??a??a?￠a??a?!a??a?・a?§a?3 */
	.open #nav-toggle span:nth-child(1) {
		top: 11px;
		-webkit-transform: rotate(315deg);
		-moz-transform: rotate(315deg);
		transform: rotate(315deg);
	}
	.open #nav-toggle span:nth-child(2) {
		width: 0;
		left: 50%;
	}
	.open #nav-toggle span:nth-child(3) {
		top: 11px;
		-webkit-transform: rotate(-315deg);
		-moz-transform: rotate(-315deg);
		transform: rotate(-315deg);
	}
	/* #global-nav a?1a?ca??a?‰a?￠a??a?!a??a?・a?§a?3 */
	.open #global-nav {
		/* #global-nav top + #mobile-head height */
		-moz-transform: translateY(556px);
		-webkit-transform: translateY(556px);
		transform: translateY(556px);
	}

.sm {
    display: block !important;
  }
.md {
    display: none !important;
  }
    
 .backgrounds background{
    background:none;  /* 一旦、PC用の背景画像を消す。 */
  }
  .background::before {
    background:url("img/top/work_top.jpg") repeat center center;
    background-size: cover;
    display: block;
    position: fixed;  /* ★スマホ用にコレで代替。 */
    top: 0;
    left: 0;
    width: 100vw;  /* ★サイズ指定。 */
    height: 100vh;  /* ★サイズ指定。 */
    content: "\A";  /* ★大事 */
    z-index: -1;  /* ★大事 */
    opacity: 0.8; 
  }    
    
    
/**目次↓↓**/ 
    
 section.mokuji_contents {
    margin-top: 3%;
    margin-bottom: 15%;
}   
    
.mokuji_g {
    text-align: center;
    margin-top: 20px;
    margin-bottom: 15px;
    
} 

    h2 {
    font-size: 160%;
    font-weight: bold;    
}

p.mokuji {
    border-style: solid;
    border-width: 1px;
    width: 15%;
    margin: auto;
    font-size: 160%;
} 
p {
    font-size: 130%;
    line-height: 1.8em;
    }
.mokuji_g {
    margin-left: 8%;
    margin-right: 8%;
    margin-bottom: 50px;
} 
img {
    max-width: 100%;
} 
    
h1 {
    font-size: 300%;
	font-family: sans-serif;
    line-height: 2em;
    letter-spacing: 0.2em;
    font-weight: lighter;
}
.osha_g {
    margin-right: auto;
    margin-left: auto;
    text-align: center;
    margin-bottom: 80px;
    width: 100%;
}
.osha_g2 {

    text-align: center;
    margin-bottom: 70px;
    width: 75%
}
     
  
/*sm会社概要*/
    
dl.dl_g{
width:85%;
list-style:none;
font-size: 100%; 
line-height: 2em;    

background:repeat-y left top;
overflow:auto;
margin: auto; 
}

dt.line{
clear:both;
width:20%;
float:left;
margin-top: 4%;
margin-bottom: %;
}

dd.line2{
border-bottom: 1px solid #FFFFFF;
padding:20px 0% 5px 25%;
text-align: left;
margin-top: 4%;
margin-bottom: %;
}



dl.dl_g2{
width:85%;
list-style:none;
font-size: 100%; 
line-height: 2em;    
   

background:repeat-y left top;
overflow:auto;
margin: auto; 
}

dt.line3{
clear:both;
width:25%;
float:left;
margin-top: 4%;
text-align: center;
font-weight: bold;
font-size: 120%;
height: 40px;
}

dd.line4 {
    border-bottom: 1px solid #000000;
    text-align: left;
    margin-top: 4%;
    padding: 0px 0% 15px 0%;
    font-size: 120%;
}   
    
.foot_text {
    line-height: 2.5em;
    font-size: 110%;
} 
.urukuma_foot {
    width: 50%;
    margin: 5% auto 0 auto;
}
.foot_text2 {
    margin-top: 2%;
}    

/*sp_NEW_事業内容*/


.down_yajirushi {
    width: 100% !important;
    position: absolute !important;
    top: 70% !important;
    left: 0 !important; 
}    
.business_g_content {
    margin-bottom: 20%;
}    
ul.business_g_content_table {
    margin-top: 2%;
    background: #e8b716;
    width: 100%;
    border-radius: 15px;
    display: flex;
    align-items: center;
}  
li.business_g_content_imag {
    display: table-cell;
    list-style-type: none;
    vertical-align: middle;
    padding: 3%;
    width: 30%;
}
ul.business_g_content_lists {
    margin: 1%;
} 
li.business_g_content_li {
    width: 100%;
    text-align: left;
}    
p.business_g_h2 {
    font-size: 170%;
    font-weight: bold;
    margin-top: 2%;
}
.business_g_h2_b {
    background-color: #efe6c8;
    padding: 2%;
    margin-bottom: 2%;
    margin-right: 2%;
}
.business_g_h2_waku {
    border-color: #efe6c8;

}
li.business_g_h2_a {
    font-size: 120%;
}
ul.business_g_h2_waku {
    border-style: solid;
    border-width: 1px;
    border-color: #efe6c8;
    margin-bottom: 3%;
    margin-right: 3%;
    padding-left: 2%;
    padding-top: 2%;
} 
.business_g_urukuma {
    margin-left: 3%;
    margin-bottom: -2%;
    margin-top: -70px;
    text-align: left;
} 
.Company_g_content {
    background-color: #e8b716;
} 
.shibuya_tenpo {
    position: relative;
} 
p.urukuma_shibuya {
    position: absolute;
    padding-bottom: 5%;
    bottom: -70px;
    width: 40%;
    padding-left: 3%;
} 
p.urukuma_shibuya img {
    width: 100%;
}    
.shibuya_staff {
    margin-top: 10%;
    text-align: center;
}
.work_gul {
    display: flex;
    display: -webkit-flex;
    width: 100%;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
    margin: auto;
}
    
.work_gli img {
    border-radius: 50%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
}
    
.work_gli:hover {
    background-color: #e8b716;      
    }
       
    
.work_gli {
    padding: 4% 3% 0% 3%;
    flex: 1  45%;
        margin: auto;
}    
p.staff_t {
    margin-top: 3%;
    text-align: center;
}
.gaiyou_font {    
    font-size: 170%;
    font-weight: bold;
    margin-top: 2%;
    margin-bottom: 2%; 
    text-align: center;
} 
.gaiyou {
    margin-top: 10%;
    padding-bottom: 15%;
}
p.business_g_text {
    margin-bottom: 1%;
    margin-right: 2%;
}    

/*アニメーション用CSS*/
.updown{
  /* アニメーションの名前 */
  animation-name:UpDown;
  /* アニメーションの１回分の長さ */
  animation-duration: 1.5s;
  /* アニメーションの回数 */
  animation-iteration-count: infinite;
  /* アニメーションの進行具合 */
  animation-timing-function: ease-in-out;
  /* アニメーション再生の向き */
  animation-direction: alternate;
}
  /* アニメーションの設定 */
@keyframes UpDown{
  /* 開始地点 */
  0%{
  /* Y軸0px */
  transform: translateY(0);
  }
  /* 終了地点 */
  100%{
  /* Y軸50px */
  transform: translateY(20px);
  }
}    
}