﻿

body {
    background-color: white;
    margin: 0;
    padding: 0;
    background-attachment: fixed;
    clear: both;
    /*  overflow: hidden;*/
}


/* java使用 */

#world{ position:fixed;    top:0; left:0; width:100%; height:100%; }
#body{ position:absolute; top:0; left:0; width:100%; height:100%;}


/*---------------------------------------------------------- 
 ヘッダ部
---------------------------------------------------------- */
#header-inner { /* ヘッダ部 */
    display: list-item;
    /*    position: fixed; スクロールしても位置を固定 */
    width: 100%;
    height: 80px;
    color: white;
    background-color: black;
    box-shadow: 0px 5px 15px 5px rgba(0, 0, 0, 0.3); /*影*/
}
#topicon { /*ロゴ*/
    width: 230px;
    height: 95%;
    margin-left: 45px;
}

.copyright { /* Copyright */
    font-family: sans-serif;
/*  font-weight:bold;*/
    margin: -25px 20px 0px 230px;
    text-align: right;
    vertical-align: bottom;
}

/* アイコンアニメーション*/
#topicon:hover #iconanime{
    animation-name: spinner;
    animation-duration: 1.6s;
    animation-fill-mode: forwards;
    animation-timing-function: ease;
    animation-iteration-count: 1;
}

@keyframes spinner {
    from {
        transform: rotateY(0deg);
    }

    to {
        transform: rotateY(-360deg);
    }
}


/*---------------------------------------------------------- 
 本体
---------------------------------------------------------- */
.body-fixed {
    clear: both;
    color: black;
}

#rightmenu {
    float: right;
    width: 1px;
}

/*---------------------------------------------------------- 
 メニューウインドウ
---------------------------------------------------------- */
#sidemuenu-inner {
    float: left;
    width: 230px;
    padding-top: 30px;
}


#main-menu li{
    color: #808080;
    font-family: sans-serif;
    font-size: 30px;
    list-style-type: none; /*マーカーを消す*/
    text-align: center;
    margin-bottom: 50px; /*メニュー行間*/
    height: 40px;
}
    
    #main-menu a {
    text-decoration: none; /*リンク下線消去*/
    }

    #main-menu a.link-true {
        color: #808080;
    }
    #main-menu p.link-false {
        color: #F0F0F0;
    }

    #main-menu a.link-true:hover {
        animation-duration: 0.2s;
        animation-name: shadow;
        animation-fill-mode: forwards;
    }

@keyframes shadow {
    0% {
        color: #808080;
        text-shadow: 0px 0px 0px rgba(0, 0, 0, 0.0); /*影*/
    }

    100% {
        color: #303030;
        text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.3); /*影*/
    }
}

/*---------------------------------------------------------- 
 情報
---------------------------------------------------------- */
.main-fixed {
    margin-left: 240px;
    margin-right: 10px;
    padding-top: 26px;
}
/*---------------------------------------------------------- 
 work
---------------------------------------------------------- */
#work {
    width: 800px;
    margin-left: auto;
    margin-right: auto;
}

.panel-radios {
    display: none;
}

#tabs-list tr{
    display: flex;
    list-style: none;
    table-layout: fixed;
}

#work hr {
    color: #dfdfdf;
}

#tabs-list td {
    display: inline;
    color: #A0A0A0;
    text-align: center;
    font-size: 30px;
    width: 200px;
    margin-left: 30px;
    margin-right: 30px;
}

label.panel-label:hover {
    text-decoration:underline;
}

label.panel-none {
    color:#f0f0f0;
}

#panel-1-ctrl:checked ~ #tabs-list #li-for-panel-1 label.panel-label {
    color: #404040;
/*    text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.3); /*影*/
}
#panel-2-ctrl:checked ~ #tabs-list #li-for-panel-2 label.panel-label {
    color: #404040;
/*    text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.3); /*影*/
}
#panel-3-ctrl:checked ~ #tabs-list #li-for-panel-3 label.panel-label {
    color: #404040;
/*    text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.3); /*影*/
}

main p {
    line-height: 1.8;
}

#panels section main {
    display: none;
}

#panel-1-ctrl:checked ~ #panels #panel-1 main {
    display: inline;
}
#panel-2-ctrl:checked ~ #panels #panel-2 main {
	display: inline;
}
#panel-3-ctrl:checked ~ #panels #panel-3 main {
	display: inline;
}

.itemheader {
    /*アイテム見出し*/
    font-family: sans-serif;
    color: #404040;
    text-align: center;
    font-size: 30px;
    text-decoration: underline;
    margin: 10px;
}

.items {
    /*アイテム枠*/
    border: 2px solid #808080;
    border-radius: 1em;
    font-family: sans-serif;
    color: #404040;
    font-size: 12px;
    margin: 10px;
    padding: 10px;
    width: 400px;
}


.itemclear {
    /*    float: none;*/
    clear: left;
}

/*---------------------------------------------------------- 
 about
---------------------------------------------------------- */
#about {
    width: 800px;
    text-align: left;
    margin-left: auto;
    margin-right: auto;
    font-size: 20px;
    /*
    font-weight: bold;
    border: solid 2px #808080;
    border-radius: 0.5em; /* 角を丸める */
    padding: 20px;
}

tr#about {
    /*    margin: 0px;
    padding: 0px;
*/
}

.table_header {
    font-family: sans-serif;
    font-size: 18px;
    line-height: 1.0;
    color: #404040;
    text-align: center;
    vertical-align: top;
}

.table_contents {
    font-family: sans-serif;
    font-size: 14px;
    line-height: 1.5;
    color: #808080;
    border-spacing: 40px;
}
/*---------------------------------------------------------- 
 link
---------------------------------------------------------- */
#link {
    width: 800px;
    text-align: left;
    margin-left: auto;
    margin-right: auto;
}
    #link h2 {
        font-family: sans-serif;
        color: #404040;
    }
    #link ul {
        font-family: sans-serif;
        font-size: 14px;
        color: #808080;
        line-height: 1.5;
    }

    #link h3 {
        font-family: sans-serif;
        color: #404040;
    }
/*---------------------------------------------------------- 
 privacypolicy
---------------------------------------------------------- */
#privacypolicy {
/*
    width:calc(100% - 800px);
*/
    width: 800px;
    text-align: left;
    margin-left: auto;
    margin-right: auto;
}

#privacypolicy h2 {
    font-family: sans-serif;
    color: #404040;
}
#privacypolicy ul {
    font-family: sans-serif;
    font-size: 14px;
    color: #808080;
    line-height: 1.5;
}

#privacypolicy h3 {
    font-family: sans-serif;
    color: #404040;
    /*
    font-style: italic;
    text-decoration: underline;
*/
}
#privacypolicy li {
    font-family: sans-serif;
    font-size: 12px;
    line-height: 1.5;
    color: #808080;
    list-style-type: none;
}
/*---------------------------------------------------------- 
 recruit
---------------------------------------------------------- */
#recruit {
    width: 800px;
    text-align: left;
    margin-left: auto;
    margin-right: auto;
}

#recruit h3 {
    font-family: sans-serif;
    /*    font-style: italic;*/
    color: #404040;
    /*  text-decoration: underline;*/
}

#recruit li {
    font-family: sans-serif;
    font-size: 0.9em;
    line-height: 1.5;
    margin: 1.2em;
    color: #808080;
}

#recruit hr {
    color: #808080;
}

#recruit_flow {
    margin: 1.5em;
    padding: 10px;
    border: solid 1px #808080;
    border-radius: 0.5em; /* 角を丸める */
    width: 33%;
    text-align: center;
    font-family: sans-serif;
    font-size: 0.8em;
    line-height: 1.5;
    color: #808080;
}
/*---------------------------------------------------------- 
 contact
---------------------------------------------------------- */
#contact {
    width: 800px;
    text-align: left;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    font-family: sans-serif;
    font-size: 28px;
    color: #404040;
}



@keyframes bounce-wave {
    from {
        transform: translateY(0)
    }

    to {
        transform: translateY(-10px)
    }
}



/*---------------------------------------------------------- 
 テキストアニメーション
---------------------------------------------------------- */

@keyframes bounce-wave {
    from {
        transform: translateY(0)
    }

    to {
        transform: translateY(-10px)
    }
}
.txtwav:hover span{
    display: inline-block;
    animation-duration: .3s;
    animation-name: bounce-wave;
    animation-iteration-count: infinite;
    animation-direction: alternate
}

.txtwav :nth-child(25n+0) {
    animation-delay: -.6s
}

.txtwav :nth-child(25n+1) {
    animation-delay: -.576s
}

.txtwav :nth-child(25n+2) {
    animation-delay: -.552s
}

.txtwav :nth-child(25n+3) {
    animation-delay: -.528s
}

.txtwav :nth-child(25n+4) {
    animation-delay: -.504s
}

.txtwav :nth-child(25n+5) {
    animation-delay: -.48s
}

.txtwav :nth-child(25n+6) {
    animation-delay: -.456s
}

.txtwav :nth-child(25n+7) {
    animation-delay: -.432s
}

.txtwav :nth-child(25n+8) {
    animation-delay: -.408s
}

.txtwav :nth-child(25n+9) {
    animation-delay: -.384s
}

.txtwav :nth-child(25n+10) {
    animation-delay: -.36s
}

.txtwav :nth-child(25n+11) {
    animation-delay: -.336s
}

.txtwav :nth-child(25n+12) {
    animation-delay: -.312s
}

.txtwav :nth-child(25n+13) {
    animation-delay: -.288s
}

.txtwav :nth-child(25n+14) {
    animation-delay: -.264s
}

.txtwav :nth-child(25n+15) {
    animation-delay: -.24s
}

.txtwav :nth-child(25n+16) {
    animation-delay: -.216s
}

.txtwav :nth-child(25n+17) {
    animation-delay: -.192s
}

.txtwav :nth-child(25n+18) {
    animation-delay: -.168s
}

.txtwav :nth-child(25n+19) {
    animation-delay: -.144s
}

.txtwav :nth-child(25n+20) {
    animation-delay: -.12s
}

.txtwav :nth-child(25n+21) {
    animation-delay: -.096s
}

.txtwav :nth-child(25n+22) {
    animation-delay: -.072s
}

.txtwav :nth-child(25n+23) {
    animation-delay: -.048s
}

.txtwav :nth-child(25n+24) {
    animation-delay: -.024s
}