/* CSS Document */

body{
}
#b01{
    width:100%;height:100%;height:100%;position:absolute;top:0;left:0;
    background-repeat:no-repeat;
    background-position:top center;
    background-size:cover;
    background-image:url(../images/index/topbg2.jpg);
}
#b01_btn,
#b02_btn,
#b03_btn{
    display:block;position:absolute;bottom:0;left:0;cursor:pointer;
    width:100%;height:46px;
    background-position:center bottom;
    background-repeat:no-repeat;
    background-image:url(../images/index/scroll.png);
    -webkit-animation: scrolldown 1000ms linear infinite both;
    animation: scrolldown 1000ms linear infinite both;
    z-index:5;
}
#b01_btn:hover,
#b02_btn:hover,
#b03_btn:hover{
    -webkit-animation: none;animation: none;
    opacity:0.7;
}

#titleblock h2{
    padding-top:16%;color:#fff;font-size:4em;text-align:center;font-weight:bold;
    font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
    text-shadow:0 0 2px #666;
}
#titleblock article{
    text-align:center;
    color:#333;
    font-size:0.7em;
    text-shadow:0 0 1px #fff;
    font-weight:bold;
}
#titleblock article p{
    font-size:2.4em;color:#fff;padding:1em;
    text-shadow:0 0 2px #666;
    line-height:1.6em;
}
#whatsnew{
    position:absolute;
    top:4.8em;left:0;
    width:100%;height:1.8em;line-height:1.2em;
    background:rgba(0,0,0,0.3);
    color:#FFF;
    white-space:nowrap;
    text-align:center;
    overflow:hidden;
    opacity:0.8;
    padding-top:5px;
}
#whatsnew article{width:100%;margin:0 auto;position:relative;}
#whatsnew h3{display:none;}
#whatsnew article h4{display:inline-block;font-size:0.8em;}
#whatsnew article time{display:inline-block;font-size:0.8em;}
#whatsnew article p{display:none;}
#whatsnew article a{display:inline-block;position:absolute;right:0;padding:1px 3px;font-size:12px;border-style:solid;border-width:1px;border-color:#fff;}
#whatsnew article img{margin:2px 6px 2px 6px;vertical-align: middle;}

#menu_area{display:inline-block;position:absolute;bottom:60px;right:40px;background-color:#000;opacity:0.8;padding:2px 5px 2px 15px;}
#menu_area a{font-size:14px;color:#fff;padding:0px 10px 0 20px;background-image:url(../images/index/menu_arrow.jpg);background-repeat:no-repeat;text-decoration: underline;}
#menu_area img{margin:0 6px;vertical-align:middle;}

#b02{width:100%;height:100%;position:absolute;top:100%;left:0;opacity:0;overflow:hidden;}
#b02 .bg{position:absolute;width:50%;background-repeat:no-repeat;background-size:cover;}
#b02-1{top:0;  left:0;  height:55%;background: url(../images/index/d-img.jpg);background-position:bottom right;}
#b02-2{top:0;  left:50%;height:55%;background: url(../images/index/i-img.jpg);background-position:bottom left;}
#b02-3{top:55%;left:0;  height:45%;background: url(../images/index/n-img.jpg);background-position:top right;}
#b02-4{top:55%;left:50%;height:45%;background: url(../images/index/c-img.jpg);background-position:top left;}
#b02 .box{position:absolute;width:300px;height:300px;-webkit-transition: all .3s ease;-moz-transition: all .3s ease;-o-transition: all .3s ease;transition:all .3s ease;}
#b02-1 .box{bottom:0;right:0;}
#b02-2 .box{bottom:0;reft:0;}
#b02-3 .box{top:0;right:0;}
#b02-4 .box{top:0;left:0;}
#b02-1 .box .background-d{display:block;width:100%;height:100%;background: -webkit-gradient(linear, left top, left bottom, from(#ff7901), to(#ffb400));opacity:0.7;-webkit-transition: all .3s ease;-moz-transition: all .3s ease;-o-transition: all .3s ease;transition:all .3s ease;
                          /*Other Browser*/
                          background: #91bae4;
                          /*For Old WebKit*/
                          background: -webkit-linear-gradient(#ff7901 0%,#ffb400 100%);
                          /*For Modern Browser*/
                          background: linear-gradient(#ff7901 0%,#ffb400 100%);}
#b02 .box:hover >.background-d{opacity:0.9;}
#b02-2 .box .background-i{display:block;width:100%;height:100%;background: -webkit-gradient(linear, left top, left bottom, from(#087cf1), to(#429af2));opacity:0.7;-webkit-transition: all .3s ease;-moz-transition: all .3s ease;-o-transition: all .3s ease;transition:all .3s ease;
                          /*Other Browser*/
                          background: #087cf1;
                          /*For Old WebKit*/
                          background: -webkit-linear-gradient(#087cf1 0%,#429af2 100%);
                          /*For Modern Browser*/
                          background: linear-gradient(#087cf1 0%,#429af2 100%);}
#b02 .box:hover >.background-i{opacity:0.9;}
#b02-3 .box .background-n{display:block;width:100%;height:100%;background: -webkit-gradient(linear, left top, left bottom, from(#076702), to(#02ff2c));opacity:0.7;-webkit-transition: all .3s ease;-moz-transition: all .3s ease;-o-transition: all .3s ease;transition:all .3s ease;
                          /*Other Browser*/
                          background: #076702;
                          /*For Old WebKit*/
                          background: -webkit-linear-gradient(#076702 0%,#02ff2c 100%);
                          /*For Modern Browser*/
                          background: linear-gradient(#076702 0%,#02ff2c 100%);}
#b02 .box:hover >.background-n{opacity:0.9;}
#b02-4 .box .background-c{display:block;width:100%;height:100%;background: -webkit-gradient(linear, left top, left bottom, from(#f833e0), to(#ef78ca));opacity:0.7;-webkit-transition: all .3s ease;-moz-transition: all .3s ease;-o-transition: all .3s ease;transition:all .3s ease;
                          /*Other Browser*/
                          background: #f833e0;
                          /*For Old WebKit*/
                          background: -webkit-linear-gradient(#f833e0 0%,#ef78ca 100%);
                          /*For Modern Browser*/
                          background: linear-gradient(#f833e0 0%,#ef78ca 100%);}
#b02 .box:hover >.background-c{opacity:0.9;}
#b02 .box a{display:block;width:100%;height:100%;background-size:contain;background-repeat:no-repeat;background-position:50% 50%;text-align:left;text-indent:-9999px;overflow:hidden;position:absolute;z-index:2}
#b02-1 a{background: url(../images/index/d-character.png);}
#b02-2 a{background: url(../images/index/i-character.png);}
#b02-3 a{background: url(../images/index/n-character.png);}
#b02-4 a{background: url(../images/index/c-character.png);}

#b03{width:100%;height:100%;position:absolute;top:200%;left:0;opacity:0;}
#b03 .bg{position:absolute;width:100%;background-repeat:no-repeat;background-size:cover;-webkit-transition: all .5s ease;-moz-transition: all .5s ease;-o-transition: all .5s ease;transition:all .5s ease;}
#b03 .bg a{display:block;width:100%;height:100%;}
#b03-1{top:0;left:0;height:38%;background: url(../images/index/company-img.jpg);background-position:bottom;}
#b03-2{top:38%;left:0;height:31%;background: url(../images/index/recruit-img.jpg);background-position:bottom;}
#b03-3{top:69%;left:0;height:31%;background: url(../images/index/contact-img.jpg);background-position:bottom;}
#b03 .box {display:block;max-width:1024px;height:100%;margin:0 auto;text-indent:-9999px;overflow:hidden;}
#b03-1 .box a{background:url(../images/index/company-character.png);background-position:left bottom;background-repeat:no-repeat;}
#b03-2 .box a{background:url(../images/index/recruit-character.png);background-position:right bottom;background-repeat:no-repeat;}
#b03-3 .box a{background:url(../images/index/contact-character.png);background-position:left bottom;background-repeat:no-repeat;}
#b03 .bg:hover{opacity:0.7;}
#b04{width:100%;position:absolute;top:300%;left:0;background-size:cover;background-position:50% 50%;background-repeat:no-repeat;pacity:0.01;background-color:#fff;}
#b02.on,
#b03.on,
#b04.on{-webkit-animation: bodyload 1s linear both;animation: bodyload 1s linear both;}
.contents{display:block;width:100%;margin:0 auto;padding:110px 0 130px 0;text-align:center;}
.contents02{display:block;width:100%;margin:0 auto;padding:0 0 30px 0;text-align:center;vertical-align:top;}
.contents02 img{padding:5px;}
.banner_field{display:inline-block;width:322px;margin-right:22px;}
.banner_field02{display:inline-block;width:322px;}
.left_area{display:none;}
.right_area{display:none;}
.frame{display:block;padding-top:5em;width:100%;margin:auto;background-color:#e3e4e8;}
.frame02{display:block;padding-top:2em;background-color:#ffffff;}
#content_area{width:1024px;margin:auto;}
#content_area a{-webkit-transition: all .3s ease;-moz-transition: all .3s ease;-o-transition: all .3s ease;transition:all .3s ease;}
#content_area a:hover{opacity:0.75;}
.left_area:hover,
.right_area:hover{opacity:0.75;cursor:pointer;}
.contents02 a{-webkit-transition: all .3s ease;-moz-transition: all .3s ease;-o-transition: all .3s ease;transition:all .3s ease;}
.contents02 a:hover{opacity:0.75;}
footer{text-align:center;padding-top:15px;font-size:10px;background-color:#060;color:#fff;width:100%;}
.over li{display:inline-block;}
.slick-track{margin:auto;}
@media only screen and (max-width: 1069px){
    #titleblock h2{font-size: 2.4em;padding-top:28%;}
    #titleblock article{font-size: 0.7em;line-height:1.4em;}
    #titleblock article p{font-size: 1em;}
}
/* スマホ横 */
@media only screen and (max-width: 768px){
    #titleblock h2{font-size: 1.6em;padding-top:20%;}
    #titleblock article{font-size: 0.7em;line-height:1.4em;}
    #titleblock article p{font-size: 1em;}
    #b02 .box{width:100%;height:100%;}
    #b02 .bg{height:50%;}
    #b02-3{top:50%;}
    #b02-4{top:50%;}
    #b03-1 .box a{background:url(../images/index/company-character.png);background-position:50%;background-repeat:no-repeat;background-size:40%;}
    #b03-2 .box a{background:url(../images/index/recruit-character.png);background-position:50%;background-repeat:no-repeat;background-size:40%;}
    #b03-3 .box a{background:url(../images/index/contact-character.png);background-position:50%;background-repeat:no-repeat;background-size:40%;}
    #b03-1{top:0;  left:0;  height:34%;background: url(../images/index/company-img-sp.jpg);background-position:bottom;}
    #b03-2{top:34%;  left:0;  height:33%;background: url(../images/index/recruit-img-sp.jpg);background-position:bottom;}
    #b03-3{top:67%;  left:0;  height:33%;background: url(../images/index/contact-img-sp.jpg);background-position:bottom;}
    #whatsnew{position:absolute;top:3.6em;left:0;height:1.8em;}
    #whatsnew article{width:100%;margin:0 auto;position:relative;}
    #whatsnew article a{display:inline-block;position:absolute;right:3%;}
    #whatsnew article h4{display:inline-block;font-size:0.8em;padding:4px 0;}
    #menu_area{right:0;margin:10px;}
    #menu_area a{font-size:10px;}
    .titleinner{display:none;}
    .contents02{width:100%;}
    .contents02 a{display:inline-block;}
    .contents02 img{padding:2px;display:block;}
    #content_area{display:block;width:100%;margin-right:auto;margin-left:auto;text-align:center;}
    .left_area{display:inline-block;vertical-align:middle;}
    .right_area{display:inline-block;vertical-align:middle;}
    .banner_field{display:block;width:322px;margin-right:auto;margin-left:auto;padding-bottom:15px;position:absolute;}
    .banner_field02{display:block;width:322px;margin-right:auto;margin-left:auto;padding-bottom:15px;}
    .frame02{display:block;padding-top:0.2em;background-color:#ffffff;}
    .frame{display:block;padding-top:1em;background-color:#e3e4e8;}
    .contents{display:block;width:100%;margin:0 auto;padding:55px 0 5px 0;text-align:center;}
    .contents02{display:block;width:100%;margin:0 auto;padding:0 0 5px 0;text-align:center;vertical-align:top;}
}
@media only screen and (max-width: 643px){
    #titleblock h2{font-size: 1.6em;padding-top:35%;}
    #titleblock article{font-size: 0.7em;line-height:1.4em;}
    #titleblock article p{font-size: 1em;}
}
/* スマホ縦 */
@media only screen and (max-width: 460px){
    #titleblock h2{font-size: 1.6em;padding-top:40%;}
    #b03-1 .box a{background:url(../images/index/company-character.png);background-position:50%;background-repeat:no-repeat;background-size:40%;}
    #b03-2 .box a{background:url(../images/index/recruit-character.png);background-position:50%;background-repeat:no-repeat;background-size:40%;}
    #b03-3 .box a{background:url(../images/index/contact-character.png);background-position:50%;background-repeat:no-repeat;background-size:40%;}
}
/* 印刷設定 */
@media only print{
    #b01,
    #b02,
    #b03,
    #b04{position:relative;height:auto;height:22%;opacity:1;top:0;}

    #b01_btn,
    #b02_btn{display:none;}

    #whatsnew{top:0;}
    #titleblock h2{padding-top:5%;}
    #menu_area{bottom:3%;right:3%;}

    #b02 .box{width:100%;height:100%;}
    #b02 .bg{height:50%;}
    #b02-3{top:50%;}
    #b02-4{top:50%;}
    .frame{padding-top:0;}
}