/* ------------ 共通設定 ------------- */

*{
    margin:0;
    padding:0;
    font-family: Verdana, "游ゴシック", YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif;
}

a{  
    color:#0080ff;
    text-decoration:underline;
}

img{
    border-style:none;
}

a img{
    border-style:none;
}

ul,ol{
    list-style:none;
    text-indent:0;
}

hr{
    display:none;
}

img{
    max-width:100%;
    height:auto;
}

.center{
    text-align: center;
}

.right{
    text-align: right;
}

.left{
    text-align: left;
}

.topspace{
    margin-top: 4%;
}

.topspaceS{
    margin-top: 1%;
}

.bottomspaceSS{
    margin: 0 0 5% 0;
}

.bottomspaceS{
    margin: 0 0 10% 0;
}

.bottomspaceL{
    margin: 0 0 30% 0;
}

.tright{
    text-align: right;
}

.ie8 img{
    width:auto;
}

#adtext{
    display:none;
}

.clear{
    zoom:1;
    content:"";
    display:block;
    clear:both;
}

.table{
    display: table;
    margin: 0 auto;
    border-collapse: collapse;
}

.table_row{
    display: table-row;
}

.table_td{
    display: table-cell;
}

.backtop{
    text-align: right;
}

.backtop a{
    text-decoration: none;
    color: red;
    border-right: 1px dashed red;
    border-bottom: 1px dashed red;
    padding-left: 64px;
    padding: 2px 8px 2px 64px;
    font-size: 110%;
    border-radius: 6px 0 6px 0;
    -moz-transition: background-color 0.4s linear,color 0.4s linear,margin-right 0.4s linear;
    -webkit-transition: background-color 0.4s linear,color 0.4s linear,margin-right 0.4s linear;
    -o-transition: background-color 0.4s linear,color 0.4s linear,margin-right 0.4s linear;
    -ms-transition: background-color 0.4s linear,color 0.4s linear,margin-right 0.4s linear;
}

.backtop a:hover{
    background-color: red;
    color: #fff;
    margin-right: 20px;
}


body{
    min-height:100%;
}


/* ------------------------------------ */

/* --------------- header設定 ---------- */

#header{
    width: 100%;
    padding: 2% 0;
    position: fixed;
    top:0;
    left:0;
    border-bottom: 1px solid #ddd;
    background-color: white;
    z-index: 3;
}

menu li{
    float: left;
    text-align: center;
    line-height: 3em;
}

menu li a{
    display: block;
    text-decoration: none;
    color: red;
    background-color: white;
    border-left: 1px dotted red;
    font-weight: bold;
    text-indent: 1%;
    /*
    -moz-transition: background-color 0.4s linear,color 0.4s linear;
    -webkit-transition: background-color 0.4s linear,color 0.4s linear;
    -o-transition: background-color 0.4s linear,color 0.4s linear;
    -ms-transition: background-color 0.4s linear,color 0.4s linear;
    */
}

menu .lastchild a{
    border-right: 1px dotted red;
}

menu li a:hover{
    /*
    background-color: red;
    color: white;
    */
    border-bottom: 2px solid red;
    margin-bottom: -2px;
}

menu li a.selected:hover{
    border-bottom: none;
}

/* --------------------------------------- */

#middle{
    margin-top: 16%;
    text-align: right;
}

#middle a{
    text-decoration: none;
    background: #2196f3;
    color: white;
    padding: 1% 2% 1% 46px;
    font-weight: bold;
    position: relative;
}

#middle a:before{
    /*content: '';
    top: 0;
    left: 0;
    width: 100%;
    padding-top: 90%;
    display: block;*/
}

#middle a:after{
    position: absolute;
    content: '';
    top: 15%;
    left: 13px;
    display: block;
    width: 70%;
    height: 70%;
    background-image: url(/image/personality.png);
    background-size: contain;
    background-repeat: no-repeat;
}

#main{
    margin: 3% 0 0 0;
}

#main #top{
    opacity: 0;
    width: 100%;
    /*height: 500px;*/
    /*border:1px solid #ccc;*/
    position: relative;
}

div#attention {
    margin-top: 3%;
}

#attention a {
    display: block;
    color: #fff;
    text-decoration: none;
    background: #ff3d00;
    padding-top: 1%;
    padding-bottom: 1%;
    border-radius: 6px;
    position: relative;
    font-size: 100%;
}

@media screen and (max-width:416px){
    #attention a{
        font-size: 2vw;
        width: 96%;
        margin-left: auto;
        margin-right: auto;
        border-radius: 1vw;
    }
}

#attention a:hover{
    background: #ff6839;
}

#attention a:after{
    content: ">";
    position: absolute;
    top: 25%;
    right: 2vw;
    font-weight: bold;
}

#main #top .msg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    margin-top: 3%;
    font-size: 460%;
    font-weight: bold;
    color: #fff;
    text-shadow: 0 0 10px red;
}

#main h2,#main h3{
    margin-bottom: 4%;
}

#main .content li{
    list-style:disc;
}

#main.subpage{
    margin: 12% 0 0 0;
}

.bread{
    width: 100%;
    font-size: 60%;
}

.bread li{
    display: inline-block;
}

.bread li:before{
    content: ">";
    margin-right: 4px;
}

.bread li:first-child:before{
    content: "";
}

/* スクロール案内保留 */
/*
#main .scrollnavi{
    margin: 10% 0;
    opacity: 0;
    -webkit-animation: fadenavi 3s ease -2s infinite;
    -moz-animation: fadenavi 3s ease -2s infinite;
    -o-animation: fadenavi 3s ease -2s infinite;
    -ms-animation: fadenavi 3s ease -2s infinite;
}

@-webkit-keyframes fadenavi{
    0%{ opacity: 0}
    50%{ opacity: 0.6}
    100%{opacity: 0}
}

@-moz-keyframes fadenavi{
    0%{ opacity: 0}
    50%{ opacity: 0.6}
    100%{opacity: 0}
}

@-o-keyframes fadenavi{
    0%{ opacity: 0}
    50%{ opacity: 0.6}
    100%{opacity: 0}
}

@-ms-keyframes fadenavi{
    0%{ opacity: 0}
    50%{ opacity: 0.6}
    100%{opacity: 0}
}
*/
/* -------------- 特設用設定 --------- */

#feature{
    text-align: center;
}

#feature a{
    display: block;
    background-color: white;
    color: #ff0000;
    padding: 4%;
    font-size: 160%;
    width: 40%;
    margin: 0 auto;
    text-decoration: none;
    font-weight: 900;
    border: 4px solid #ff0000;
    position: relative;
    transition: background-color 0.4s linear,color 0.4s linear,border-radius 0.4s linear;
}

#feature a:hover{
    background-color: #ff0000;
    color: #fff;
    border-radius: 20px;
}



/* ----------------------------------- */

/* -------------- 事業内容設定 --------- */

#main #business{
    opacity: 0;
}


#business li{
    margin-left: 4%;
    line-height: 2em;
}

#business li span{
    margin: 0 1%;
}

#business li a:hover{
    color: orangered;
}



/* ----------------------------------- */

/* -------------- 会社概要設定 --------- */

#main #company .table{
    width: 80%;
}

#company .firstchild{
    width: 150px;
    text-align: left;
    line-height: 3em;
}

/* ----------------------------------- */

/* -------------- 沿革設定 ------------ */

#main #history .table{
    width: 80%;
}

#history .table_td{
    border-right: 4px solid #fff;
    border-left: 4px solid #fff;
    border-bottom: 20px solid #fff;
    vertical-align: middle;
}

#history .firstchild,#history .secondchild,#history .thirdchild{
    width: 16%;
    text-align: center;
    line-height: 3em;
}

#history .thirdchild{
    color: #fff;
    background-color: red;
}

#history .lastchild{
    padding-left: 1em;
}

#history .aniversary .thirdchild{
    width: 100px;
    text-align: center;
    line-height: 3em;
}

#history .aniversary .thirdchild,#history .aniversary .lastchild{
    color: red;
    background-color: #fff;
}

/* ----------------------------------- */

/* -------------- 沿革設定（現在部分） ------------ */

#now .table{
    box-shadow: 0px 0px 20px 1px orangered;
    -moz-box-shadow: 0px 0px 20px 1px orangered;
    -webkit-box-shadow: 0px 0px 20px 1px orangered;
    -ms-box-shadow: 0px 0px 20px 1px orangered;
    -o-box-shadow: 0px 0px 20px 1px orangered;
    filter: progid:DXImageTransform.Microsoft.Shadow(color=#aaaaaa, direction=270, strength=3, enabled=true);
}

#now .table_td{
    border:1px solid red;
    padding: 2%;
}

#now .firstchild{
    width: 30%;
    text-align: center;
    vertical-align: middle;
}

#now .lastchild{
    background-image: url(/image/aniversary.png);
    background-repeat: no-repeat;
    background-position: right 18px top -2px;
}

#now .lastchild p{
    padding: 1% 0;
    width: 78%
}



/* --------------------------------------------- */

/* -------------- 支社・店舗 ------------ */

#store table{
    border-top: 1px solid #aaa;
    border-bottom: 1px solid #aaa;
}

#store td{
    font-size: 90%;
    vertical-align: middle;
    font-size: 110%;
}

#store .businesskindchild{
    background: -moz-linear-gradient(left,#ff3333 0%,#ffffff 75%);
    background: -webkit-linear-gradient(left,#ff3333 0%,#ffffff 75%);
    background: -o-linear-gradient(left,#ff3333 0%,#ffffff 75%);
    background: -ms-linear-gradient(left,#ff3333 0%,#ffffff 75%);
    color: white;
    padding: 0 0 0 2em;
    line-height: 2em;
    font-size: 120%;
    font-weight: bold;
    border-top: 1px solid #aaa;
}

#store .businessnamechild{
    padding: 1% 0 0 2.5em;
    vertical-align: top;
    border-top: 1px solid #aaa;
    border-right: 2px solid #aaa;
    font-size: 120%;
    font-weight: bold;
    width: 25%;
}

#store .firstchild{
    line-height: 3em;
    padding-left: 1em;
    font-size: 120%;
    border-top: 1px solid #aaa;
    width: 56%;
    text-align: left;
}

#store .secondchild{
    border-top: 1px solid #aaa;
}

#store .thirdchild{
    line-height: 2em;
    padding: 0 0 0 2.5em;
    border-bottom: 1px solid #aaa;
}

#store a:hover{
    color: orangered;
}

/* ------------------------------------ */

#lastlogo{
    border-top: 2px solid red;
    border-bottom: 2px solid red;
    text-align: center;
}

#privacylink a{
    color: black;
}

#copyright{
    font-size: 80%;
    text-align: right;
    color: white;
    background: red;
}

/* --------------- ie8用設定 ---------- */
.ie8 #main{
    margin: 8% 0 0 0;
}

.ie8 #main #top{
    border:none;
}

.ie8 .table{
    width: 920px;
}

.ie8 h2{
    text-align: center;
    margin-top: 8%;
}

.ie8 h3{
    width: 920px;
    text-align: left;
    margin: 0 auto;
}

.ie8 .subimg{
    width: 920px;
    margin: 0 auto;
}

.ie8 #top{
    margin-top: 20px;
}

.ie8 menu li{
    width: 24%;
}

.ie8 .content ul{
    width: 920px;
    margin: 20px auto 0;
}

.ie8 #main #company .table,.ie8 #main #history .table,.ie8 #main #now .table,.ie8 #main #store .table{
    width: 920px;
    margin: 20px auto 0;
}

.ie8 .backtop{
    width: 920px;
    margin:20px auto 0;
}

.ie8 #now .table_td{
    padding: 20px;
}

.ie8 #store .businesskindchild{

    background: #ff3333;
}

.ie8 .tright{
    width: 920px;
    margin: 0 auto;
}

.ie8 #newrecruit_top.topspaceS{
    margin-top: -6%;
}

/* ------------------------------------ */

/* --------------- recruitnew用設定 ---------- */

#newrecruit_menu .table_row{
    border-top: 12px solid #fff;
    border-bottom: 12px solid #fff;
}

#newrecruit_menu .table_td{
    position: relative;
}

#newrecruit_menu .table_td.link{
    cursor: pointer;
}

#newrecruit_menu .firstchild{
    border-right: 25px solid #fff;
}

#newrecruit_menu .secondchild{

}

#newrecruit_menu .thirdchild{
    border-left: 25px solid #fff;
}

#newrecruit_menu .table_td img{
    border: 1px solid #aaa;
}

@media screen and (min-width:1024px){
    
    #feature a:before{
        content: url('/image/allow.png');
        position: absolute;
        top: 38px;
        left: 40px;
    }

    #feature a:after{
        content: url('/image/link_blank.png');
        position: absolute;
        top: 38px;
        right: 38px;
    }

    #newrecruit_menu .table_td p{
        position: absolute;
        display: block;
        z-index: 1;
        width: 100%;
        height: 50px;
        background: rgba(0,0,0,0.5);
        opacity: 0;
        bottom: -20px;
    }
    
    #newrecruit_menu .table_td.upper p{
        top: -20px;
    }

    #newrecruit_menu .table_td strong{
        display: block;
        font-size: 80%;
        color: white;
        line-height: 50px;
        text-align: center;
    }

    #newrecruit_menu .table_td span{
        position: absolute;
        display: block;
        z-index: 0;
        top: 0;
        width: 100%;
        height: 200px;
        box-shadow: inset 0 0 30px rgba(50, 30, 0, 0.6),
                    inset 0 0 60px rgba(50, 30, 0, 0.3);
        opacity:0;
    }
    
    #newrecruit_menu .table_td.upper span{
        box-shadow: inset 0 0 -30px rgba(50, 30, 0, 0.6),
                    inset 0 0 -60px rgba(50, 30, 0, 0.3);
    }
}

div#fixed {
    position: absolute;
    right: 0;
    z-index: 100;
}

@media screen and (max-width:1024px){
    #newrecruit_menu .table_td p{
        font-size: 50%;
    }
}

@media screen and (min-width:960px){
    #fixed{
        top: 0;
    }
}

@media screen and (max-width:416px){
    #feature a{
        width: 60%;
    }
    
    #newrecruit_menu .firstchild{
        border-right: none;
    }
    
    #newrecruit_menu .thirdchild{
        border-left: none;
    }

    #newrecruit_menu .table_td img{
        border: none;
    }
    
    #newrecruit_menu .table_td p{
        padding: 1%;
    }
}

.ie8 .subpage .bread{
    width: 920px;
    margin: 0 auto;
}

.ie8 #newrecruit_menu .table_td p{
    font-size: 80%;
}
/* ------------------------------------ */