@charset "UTF-8";

/* CSS Document */


/*
Copyright (c) 2010, Yahoo! Inc. All rights reserved.
Code licensed under the BSD License:
http://developer.yahoo.com/yui/license.html
version: 3.3.0
build: 3167
　↓YUI3 CSS Reset　ブラウザー固有のスタイルをリセットします↓　*/

* {
    letter-spacing: 1px;
}

body,
div,
dl,
dt,
dd,
ul,
ol,
li,
h1,
h2,
h3,
h4,
h5,
h6,
pre,
code,
form,
fieldset,
legend,
input,
textarea,
p,
blockquote,
th,
td {
    margin: 0;
    padding: 0;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

img {
    border: 0;
}

ul,
ol,
li {
    list-style: none;
}


/*
Copyright (c) 2010, Yahoo! Inc. All rights reserved.
Code licensed under the BSD License:
http://developer.yahoo.com/yui/license.html
version: 3.3.0
build: 3167
　↓YUI3 CSS Fonts　フォントサイズを相対指定する↓　*/

body {
    font: 13px/1.231 "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
    *font-size: small;
    /* IE用 */
    *font: x-small;
    /* IE 互換モード用 */
    background: url(../images/background_1.jpg) #333;
    background-attachment: fixed;
    color: #000;
    line-height: 1.4;
}


/* YUI3 CSS Fonts フォントサイズ対応表
10px:77%     11px:85%     12px:93% 
13px:100%    14px:108%    15px:116%
16px:123.1%  17px:131%    18px:138.5%
19px:146.5%  20px:153.9%  21px:161.6%
22px:167%    23px:174%    24px:182%
25px:189%    26px:197%
*/


/*　↓リンクに対する共通設定↓　*/

a {
    color: #000;
    text-decoration: none;
    border: none;
}


/*　↓HTML5　新要素をブロック化する↓　*/

header,
section,
footer,
aside,
nav,
article,
figure,
hgroup {
    margin: 0;
    padding: 0;
    display: block;
}


/* ~~ その他の float/clear クラス ~~ */

.fltrt {
    float: right;
}

.fltlft {
    float: left;
}

.clearfloat {
    clear: both;
    height: 0;
    font-size: 1px;
    line-height: 0px;
}


/*　↓float解除用「clearfix」↓　*/

.clearfix:after {
    /*for modern browser*/
    content: ".";
    display: block;
    height: 0;
    clear: both;
    visibility: hidden;
}

.clearfix {
    zoom: 1;
    /*for IE 5.5-7*/
}

#wrapper {
    width: 850px;
    margin: 0 auto;
    background: #FFF100;
}

header {
    width: 850px;
    height: 150px;
}

#space {
    width: 800px;
    margin: 0 auto;
    border-top: solid #333 1px;
}

#content_back {
    background: #000000;
    padding: 50px;
}

#content {
    background: #FFF100;
    border-radius: 10px;
    padding: 100px 50px;
    box-shadow: 1px 1px 10px 5px rgba(0, 0, 0, 0.4) inset;
    overflow: hidden;
}

footer {
    background: url(../../images/top/bg_foot.svg) no-repeat;
    display: block;
    width: 850px;
    height: 67px;
}

#head_logo {
    margin: 40px auto 0px 25px;
}

#head_right {
    padding: 30px 30px;
}

#head_right p {
    display: block;
    margin-top: 10px;
    font-weight: bold;
    font-family: "Arial Black", Gadget, sans-serif;
}

#img_1 {
    display: block;
    margin: 50px auto auto 125px;
}

#main_logo2 {
    display: block;
    margin: 00px auto 80px;
    -webkit-animation: main_logo2 5s linear infinite;
    -moz-animation: main_logo2 5s linear infinite;
    -ms-animation: main_logo2 5s linear infinite;
    -o-animation: main_logo2 5s linear infinite;
    animation: main_logo2 5s linear infinite;
}

@-webkit-keyframes main_logo2 {
    0% {
        -webkit-transform: rotate(0deg);
    }
    33% {
        -webkit-transform: rotate(-10deg);
    }
    66% {
        -webkit-transform: rotate(10deg);
    }
    100% {
        -webkit-transform: rotate(0deg);
    }
}

@-moz-keyframes main_logo2 {
    0% {
        -moz-transform: rotate(0deg);
    }
    33% {
        -moz-transform: rotate(-10deg);
    }
    66% {
        -moz-transform: rotate(10deg);
    }
    100% {
        -moz-transform: rotate(0deg);
    }
}

@-ms-keyframes main_logo2 {
    0% {
        -ms-transform: rotate(0deg);
    }
    33% {
        -ms-transform: rotate(-10deg);
    }
    66% {
        -ms-transform: rotate(10deg);
    }
    100% {
        -ms-transform: rotate(0deg);
    }
}

@-o-keyframes main_logo2 {
    0% {
        -o-transform: rotate(0deg);
    }
    33% {
        -o-transform: rotate(-10deg);
    }
    66% {
        -o-transform: rotate(10deg);
    }
    100% {
        -o-transform: rotate(0deg);
    }
}

#img_2 {
    display: block;
    margin: 25px auto 5px 65px;
}

#content_1 {
    display: block;
    width: 480px;
    margin: 0 auto auto 120px;
    font-weight: bold;
}

#img_3 {
    display: block;
    margin: 25px auto 0 87px;
}

#content_2 {
    display: block;
    width: 480px;
    margin: 0 auto auto 120px;
    font-weight: bold;
}

#img_4 {
    display: block;
    margin: 100px auto 0;
}

#img_5 {
    display: block;
    width: 165px;
    margin: 100px auto 0;
    position: relative;
}

#img_5 img,
#img_6 img,
#img_7 img {
    display: block;
    position: relative;
    transition-duration: 2s;
    -moz-transition-duration: 2s;
    -webkit-transition-duration: 2s;
    -o-transition-duration: 2s;
    -ms-transition-duration: 2s;
}

#img_5:hover img,
#img_6:hover img,
#img_7:hover img {
    left: -1000px;
    -webkit-animation: img_5 0.25s linear;
    -moz-animation: img_5 0.25s linear infinite;
    -ms-animation: img_5 0.25s linear infinite;
    -o-animation: img_5 0.25s linear infinite;
    animation: img_5 0.25s linear infinite;
}

@-webkit-keyframes img_5 {
    0% {
        -webkit-transform: rotate(0deg);
    }
    20% {
        -webkit-transform: rotate(20deg);
    }
    40% {
        -webkit-transform: rotate(-10deg);
    }
    60% {
        -webkit-transform: rotate(45deg);
    }
    80% {
        -webkit-transform: rotate(-10deg);
    }
    100% {
        -webkit-transform: rotate(0deg);
    }
}

@-moz-keyframes img_5 {
    0% {
        -moz-transform: rotate(0deg);
    }
    20% {
        -moz-transform: rotate(20deg);
    }
    40% {
        -moz-transform: rotate(-10deg);
    }
    60% {
        -moz-transform: rotate(45deg);
    }
    80% {
        -moz-transform: rotate(-10deg);
    }
    100% {
        -moz-transform: rotate(0deg);
    }
}

@-ms-keyframes img_5 {
    0% {
        -ms-transform: rotate(0deg);
    }
    20% {
        -ms-transform: rotate(20deg);
    }
    40% {
        -ms-transform: rotate(-10deg);
    }
    60% {
        -ms-transform: rotate(45deg);
    }
    80% {
        -ms-transform: rotate(-10deg);
    }
    100% {
        -ms-transform: rotate(0deg);
    }
}

@-o-keyframes img_5 {
    0% {
        -o-transform: rotate(0deg);
    }
    20% {
        -o-transform: rotate(20deg);
    }
    40% {
        -o-transform: rotate(-10deg);
    }
    60% {
        -o-transform: rotate(45deg);
    }
    80% {
        -o-transform: rotate(-10deg);
    }
    100% {
        -o-transform: rotate(0deg);
    }
}

#img_6,
#img_7 {
    display: block;
    width: 165px;
    margin: 0 auto 0;
    position: relative;
}