@charset "UTF-8";
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {border: 0;font-family: inherit;font-size: 100%;font-style: inherit;font-weight: inherit;margin: 0;outline: 0;padding: 0;vertical-align: baseline;}
:focus {outline: 0;}
strong { font-weight:bold;}
ol, ul {list-style: none;}
table {border-collapse: separate;border-spacing: 0;}
caption, th, td {font-weight: normal;text-align: left;}
blockquote:before, blockquote:after,q:before, q:after {content: "";}
blockquote, q {quotes: "" "";}
a img{border: 0; margin:0; padding:0; vertical-align:bottom;}
figure{margin:0}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display: block;}
img {padding:0; margin:0; vertical-align:bottom;}
.clearfix:after {content: ".";  display: block; clear: both;height: 0;visibility: hidden;}
.clearfix {min-height: 1px;}
.clear {clear: both;}
label {cursor:pointer;}
a { text-decoration:none;}
a:hover { text-decoration:none;}

@font-face{
  font-family: 'subfont';
  src: url('../font/subfont.woff') format('woff');
}

body{color:#DDD; font-size:16px; font-family:'Noto Sans JP', sans-serif,"游ゴシック", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", sans-serif; line-height:1.5; -webkit-text-size-adjust: 100%; -webkit-font-smoothing: antialiased; background-color: #666; }
header nav li {font-family: 'subfont';}
header nav li span {font-size:13px; color:#FFF; letter-spacing:1px;}
header nav li a { font-size:13px; color:#FFF;letter-spacing:1px;}
header nav li ul li { padding-left:.75rem;}
article.top {display: table; width: 100%;}
article.top div { display: table-cell;vertical-align: middle; text-align:center;animation: fadeIn 3s ease 0s 1 normal;}
article.top div h1 img { width:200px; height:auto; }
article.top div ul {position: relative; width: 200px; margin: 0px auto;}
article.top div ul li { position: absolute;}
article.top div ul li:first-child { top:-50px; right:-70px;}
article.top div ul li:nth-child(2) { top:-20px; right: -90px;}
article.top div ul li:nth-child(3) { top:-40px; right: -120px;}
article.top div ul li:nth-child(4) { top:-30px; right: -150px;}
article.top div ul li:nth-child(5) { top:-20px; right: -180px;}

@keyframes fadeIn {
0% {opacity: 0}
100% {opacity: 1}
}

@-webkit-keyframes fadeIn {
0% {opacity: 0}
100% {opacity: 1}
}

article.top div ul li:nth-child(odd) {
    -webkit-animation: horizontal1 1s ease-in-out infinite alternate;
}
article.top div ul li:nth-child(even) {
    -webkit-animation: horizontal2 1s ease-in-out infinite alternate;
}
article.top div ul li img {
    -webkit-animation: vertical 3s ease-in-out infinite alternate;
}
article.top div ul li:nth-child(1) img {
    -webkit-animation-duration: 4s;
}
article.top div ul li:nth-child(2) img {
    -webkit-animation-duration: 5s;
}
article.top div ul li:nth-child(3) img {
    -webkit-animation-duration: 6s;
}


@-webkit-keyframes horizontal1 {
    0% { -webkit-transform:translateX( -3px); }
  100% { -webkit-transform:translateX(  0px); }
}

@-webkit-keyframes horizontal2 {
    0% { -webkit-transform:translateX(  3px); }
  100% { -webkit-transform:translateX(  0px); }
}

@-webkit-keyframes vertical {
    0% { -webkit-transform:translateY(-10px); }
  100% { -webkit-transform:translateY(  0px); }
}

.middle {}
.middle header {height: 60px; width: 100%;text-align: center; margin-bottom: 40px; padding-top: 40px;}
.middle header h1 {height: 60px; padding: 10px; box-sizing: border-box;}
.middle header h1 img {height: 100%; width: auto;}
.middle h2 {font-weight: 700; padding-bottom: 10px; font-size: 20px;}
.middle h2 span {position: relative;}
.middle h2 span:after {content: ""; height: 1px; width: 60px; background-color: #DDD; position: absolute; right: -70px; top:50%;}
.middle h2 + p {margin-bottom: 20px; font-size: 14px;padding: 10px; line-height: 200%;}
.company {max-width: 800px; margin: 0px auto;}
.company div dl {font-size: 14px; display:flex; flex-wrap: wrap;}
.company div dl dt {font-weight: 700; width: 20%; padding: 10px;box-sizing: border-box;}
.company div dl dd {padding-bottom: 10px; width: 80%; padding: 10px;box-sizing: border-box;}
.company div dl dd span {font-size: 12px; padding-left: 1em;}

@media only screen and (max-width:1350px){
}
@media only screen and (max-width:1200px){
}
@media only screen and (max-width:880px){
}
@media only screen and (max-width:768px){
}
@media only screen and (max-width:640px){
article.top div ul li:first-child { top:60px; right:20px;}
article.top div ul li:nth-child(2) { top:40px; right: 50px;}
article.top div ul li:nth-child(3) { top:30px; right: 80px;}
article.top div ul li:nth-child(4) { top:50px; right: 110px;}
article.top div ul li:nth-child(5) { top:20px; right:130px;}

.company {max-width: 800px; margin: 0px auto; padding: 2%; box-sizing: border-box;}
.company div dl {font-size: 14px; display:flex; flex-flow: column nowrap;}
.company div dl dt {width: 100%;}
.company div dl dd {width: 100%;}
}
@media only screen and (max-width:400px){
}
@media only screen and (max-width:320px){
}