/* トップ */
.header-menu li:nth-child(1) > span{
    background-image: url(../img/h_menu_top_f.svg);
}
footer{
    position: fixed;
    top: 0;
    width: 910px;
    pointer-events: none;
}
.copyright{
    position: absolute;
    right: -45px;
    width: 40px;
    background-image: url(../img/copyright_vertical.svg);
    background-repeat: no-repeat;
    top: 385px;
    height: 190px;
}
.copyright span{
    display: block;
}
.copyright #c_mark{
    transform: translate(-15px, 165px) rotate(-90deg);
}
.copyright #copyright_text{
    transform: translate(-15px, 140px) rotate(-90deg);
}
@media all and (-ms-high-contrast:none){
    .copyright #c_mark{
        transform: translate(-12px, 165px) rotate(-90deg);
    }
    .copyright #copyright_text{
        transform: translate(-12px, 140px) rotate(-90deg);
    }
}
@media all and (-ms-high-contrast:none){
  .copyright{
    background-position: -12px 0;
  }
}
#mailLink{
    position: absolute;
    top: 575px;
    height: 40px;
    padding-right: 40px;
    padding-left: 20px;
    margin-left: -20px;
}
#mailLink a{
    color: #666;
    text-decoration: none;
    font-size: 12px;
    font-family: Georgia, 'ヒラギノ明朝 Pro W3', 'Hiragino Mincho ProN', 'MS P 明朝', 'MS PMincho', serif;;
}
#PersonarityKeywords{
    font-size: 21px;
    white-space: nowrap;
    line-height: 33px;
    color: rgba(0, 0, 0, 0);
    background-image: url(../img/top_description.svg);
    background-repeat: no-repeat;
    width: 304px;
    height: 252px;
    position: absolute;
    top: 135px;
    letter-spacing: 1px;
}
#PersonarityKeywords > div{
    margin-top: -5px;
}
#TopMessage{
    width: 300px;
    height: 87px;
    background-image: url(../img/top_illust_description.svg);
    background-repeat: no-repeat;
    position: absolute;
    top: 440px;
}
#TopMessage p{
    color: rgba(0, 0, 0, 0);
    font-size: 14px;
    line-height: 24px;
}
#TopMessage p:first-child{
    margin-top: -3px;
}
#TopIllust{
    position: absolute;
    top: 90px;
    right: 0;
    width: 480px;
}
#TopIllust img{
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
}
#TopIllust img:nth-of-type(2){
    -webkit-animation: illust02 28s ease 0s infinite forwards;
    animation: illust02 28s ease 0s infinite forwards;
}
#TopIllust img:nth-of-type(3){
    -webkit-animation: illust03 28s ease 0s infinite forwards;
    animation: illust03 28s ease 0s infinite forwards;
}
#TopIllust img:nth-of-type(4){
    -webkit-animation: illust04 28s ease 0s infinite forwards;
    animation: illust04 28s ease 0s infinite forwards;
}
#TopIllust img:nth-of-type(5){
    -webkit-animation: illust05 28s ease 0s infinite forwards;
    animation: illust05 28s ease 0s infinite forwards;
}
#TopIllust img:nth-of-type(6){
    -webkit-animation: illust06 28s ease 0s infinite forwards;
    animation: illust06 28s ease 0s infinite forwards;
}
#TopIllust img:nth-of-type(7){
    -webkit-animation: illust07 28s ease 0s infinite forwards;
    animation: illust07 28s ease 0s infinite forwards;
}
#TopIllust img:nth-of-type(8){
    -webkit-animation: illust08 28s ease 0s infinite forwards;
    animation: illust08 28s ease 0s infinite forwards;
}
@keyframes illust02 {
    0%  { opacity: 0; }
    6%  { opacity: 0; }
    12% { opacity: 1; }
    84% { opacity: 1; }
    90% { opacity: 0; }
    100%{ opacity: 0; }
}
@-webkit-keyframes illust02 {
    0%  { opacity: 0; }
    6%  { opacity: 0; }
    12% { opacity: 1; }
    84% { opacity: 1; }
    90% { opacity: 0; }
    100%{ opacity: 0; }
}
@keyframes illust03 {
    0%  { opacity: 0; }
    18% { opacity: 0; }
    24% { opacity: 1; }
    84% { opacity: 1; }
    90% { opacity: 0; }
    100%{ opacity: 0; }
}
@-webkit-keyframes illust03 {
    0%  { opacity: 0; }
    18% { opacity: 0; }
    24% { opacity: 1; }
    84% { opacity: 1; }
    90% { opacity: 0; }
    100%{ opacity: 0; }
}
@keyframes illust04 {
    0%  { opacity: 0; }
    30% { opacity: 0; }
    36% { opacity: 1; }
    84% { opacity: 1; }
    90% { opacity: 0; }
    100%{ opacity: 0; }
}
@-webkit-keyframes illust04 {
    0%  { opacity: 0; }
    30% { opacity: 0; }
    36% { opacity: 1; }
    84% { opacity: 1; }
    90% { opacity: 0; }
    100%{ opacity: 0; }
}
@keyframes illust05 {
    0%  { opacity: 0; }
    42% { opacity: 0; }
    48% { opacity: 1; }
    84% { opacity: 1; }
    90% { opacity: 0; }
    100%{ opacity: 0; }
}
@-webkit-keyframes illust05 {
    0%  { opacity: 0; }
    42% { opacity: 0; }
    48% { opacity: 1; }
    84% { opacity: 1; }
    90% { opacity: 0; }
    100%{ opacity: 0; }
}
@keyframes illust06 {
    0%  { opacity: 0; }
    54% { opacity: 0; }
    60% { opacity: 1; }
    84% { opacity: 1; }
    90% { opacity: 0; }
    100%{ opacity: 0; }
}
@-webkit-keyframes illust06 {
    0%  { opacity: 0; }
    54% { opacity: 0; }
    60% { opacity: 1; }
    84% { opacity: 1; }
    90% { opacity: 0; }
    100%{ opacity: 0; }
}
@keyframes illust07 {
    0%  { opacity: 0; }
    66% { opacity: 0; }
    72% { opacity: 1; }
    84% { opacity: 1; }
    90% { opacity: 0; }
    100%{ opacity: 0; }
}
@-webkit-keyframes illust07 {
    0%  { opacity: 0; }
    66% { opacity: 0; }
    72% { opacity: 1; }
    84% { opacity: 1; }
    90% { opacity: 0; }
    100%{ opacity: 0; }
}
@keyframes illust08 {
    0%  { opacity: 0; }
    78% { opacity: 0; }
    84% { opacity: 1; }
    90% { opacity: 1; }
    96% { opacity: 0; }
    100%{ opacity: 0; }
}
@-webkit-keyframes illust08 {
    0%  { opacity: 0; }
    78% { opacity: 0; }
    84% { opacity: 1; }
    90% { opacity: 1; }
    96% { opacity: 0; }
    100%{ opacity: 0; }
}

@media screen and (max-width:400px) {
    #TopIllust {
        position: relative;
        top: 24px;
        right: auto;
        width: calc(100vw - 16px);
        left: 8px;
    }
    #PersonarityKeywords {
        top: calc(364px - 317px + 101vw);
        margin-left: 8px;
    }
    #TopMessage {
        top: calc(662px - 317px + 101vw);
        left: 8px;
    }
    #mailLink {
        top: calc(785px - 317px + 101vw);
        margin-left: -10px;
    }
}