/* 共通スタイル */
*{
    font-family: 'Jost', 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W3', Meiryo, メイリオ, MS PGothic, sans-serif;
}
body{
    min-width: 980px;
}
.root{
    width: 910px;
    position: relative;
    height: 100%;
    margin: auto;
}
header{
    position: fixed;
    top: 0;
    width: 910px;
    z-index: 100;
    padding-top: 70px;
    padding-bottom: 10px;
    background-color: rgba(255, 255, 255, 0.75);
    transition: padding-top 0.75s 0.1s ease;
}
header.screen-scrolled{
    padding-top: 10px;
}
.header-menu-image-loader{

}
.header-menu-image-loader span:nth-child(1){
  background-image: url(../img/h_menu_top_f.svg);
}
.header-menu-image-loader span:nth-child(2){
  background-image: url(../img/h_menu_news_f.svg);
}
.header-menu-image-loader span:nth-child(3){
  background-image: url(../img/h_menu_works_f.svg);
}
.header-menu-image-loader span:nth-child(4){
  background-image: url(../img/h_menu_profile_f.svg);
}
.header-menu-image-loader span:nth-child(5){
  background-image: url(../img/h_menu_top.svg);
}
.header-menu-image-loader span:nth-child(6){
  background-image: url(../img/h_menu_news.svg);
}
.header-menu-image-loader span:nth-child(7){
  background-image: url(../img/h_menu_works.svg);
}
.header-menu-image-loader span:nth-child(8){
  background-image: url(../img/h_menu_profile.svg);
}
footer{
    clear: both;
}
.copyright{
    float: right;
    height: 20px;
    width: 190px;
    background-image: url(../img/copyright.svg);
    background-repeat: no-repeat;
    white-space: nowrap;
}
.copyright span{
    pointer-events: auto;
    white-space: nowrap;
    color: rgba(0, 0, 0, 0);
    font-size: 12px;
    display: inline-block;
    transform: translate(0, -5px);
}
@media all and (-ms-high-contrast:none){
   .copyright span{
       transform: translate(0, 0);
   }
}
.content-with-effect{
    transition: all 0.75s 0.2s;
}
.content-with-effect.second{
    transition: all 0.75s 0.3s;
}
.content-with-effect.third{
    transition: all 0.75s 0.4s;
}
.hidden-content-at-initing{
    opacity: 0;
    -webkit-transform: scale(0.98) rotate(1deg);;
    transform: scale(0.98) rotate(1deg);
}
.title-area{
    background-image: url(../img/siteTitle.svg);
    background-repeat: no-repeat;
    height: 74px;
    width: 376px;
}
.title-area *{
    color: rgba(0, 0, 0, 0);
}
.title-area .designer-name dt{
    display: none;
}
.title-area h1{
    font-size: 31px;
    white-space: nowrap;
}
.title-area .designer-name dd{
    float: left;
    margin-top: 25px;
    margin-bottom: -25px;
    margin-left: -10px;
    margin-right: -10px;
    font-size: 19px;
    padding: 0px 10px;
}
@media all and (-ms-high-contrast:none){
  .title-area .designer-name dd{
    margin-left: 0;
    margin-right: 20px;
    padding: 0;
  }
}
.title-area .designer-name dd:after{
    content: '　';
}
.header-menu{
    position: absolute;
    right: 40px;
    bottom: 6px;
}
.header-menu li{
    float: left;
    margin-left: 40px;
}
.header-menu li a,
.header-menu li span{
    display: block;
    color: rgba(0, 0, 0, 0);
    height: 20px;
    width: 50px;
    background-repeat: no-repeat;
    white-space: nowrap;
}
.header-menu li:nth-child(1) > *{
    background-image: url(../img/h_menu_top.svg);
    width: 33px;
    margin-top: 1px;
}
.header-menu li:nth-child(2) > *{
    background-image: url(../img/h_menu_news.svg);
    width: 117px;
}
.header-menu li:nth-child(3) > *{
    background-image: url(../img/h_menu_works.svg);
    width: 65px;
}
.header-menu li:nth-child(4) > *{
    background-image: url(../img/h_menu_profile.svg);
    width: 67px;
    margin-top: 1px;
}
.main-area{
    top: 105px;
    position: relative;
}
.main-area:after{
    content: "";
    display: block;
    clear: both;
}
@media screen and (max-width:400px) {
    [data-noexist-at-sp]{
      display: none;
    }
    body {
        min-width: 0;
    }
    .root {
        width: 100%;
        margin: 0 auto 0 0;
    }
    header{
        width: 100%;
        padding-top: 16px;
        overflow: hidden;
        height: 130px;
        transition: padding-top 0.75s 0.1s ease, height 0.75s 0.1s ease;
    }
    header.screen-scrolled {
        height: 44px;
    }
    .title-area{
        width: calc(320px - 16px);
        margin-left: 8px;
        background-image: url(../img/siteTitle_sp.svg);
    }
    .header-menu{
        position: relative;
        padding: 8px;
        left: 0;
        right: auto;
    }
    .title-area .designer-name dd{
        margin-top: 6px;
        margin-bottom: 0;
        font-size: 14px;
    }
    .header-menu li:nth-child(1) > * {
        width: calc(33px * 0.8);
    }
    .header-menu li:nth-child(2) > * {
        width: calc(117px * 0.8);
    }
    .header-menu li:nth-child(3) > * {
        width: calc(65px * 0.8);
    }
    .header-menu li:nth-child(4) > * {
        width: calc(67px * 0.8);
    }
    .header-menu li:not(:first-child) {
        margin-left: 10px;
    }
    .header-menu li:first-child {
        margin-left: 0;
    }
    #TopIllust {
        position: relative;
        top: 24px;
        right: auto;
        width: calc(100% - 32px);
        left: 16px;
    }
    .copyright{
        margin-right: 8px;
    }
}