@charset "utf-8";

/* Reset */

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p,
em, img,strong, dl, dt, dd,
ol, ul, li, form, label,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, dialog, figure, figcaption, footer, header,
hgroup, menu, nav, section,
time, mark, audio, video {
color:#474747;
margin:0;
padding:0;
border:0;
outline:0;
font-size:100%;
vertical-align:top;
background:transparent;
list-style-type:none;
font-family: "ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","メイリオ",Meiryo,"ＭＳ Ｐゴシック","MS PGothic",sans-serif;
font-style:normal;
line-height:1.4;
word-break:break-all;
}
html { font-size: 100%; overflow-y: scroll; -webkit-tap-highlight-color: rgba(0,0,0,0); -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; word-break:break-all; }
select, input, textarea { font-family: "ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro","メイリオ",Meiryo,"ＭＳ Ｐゴシック","MS PGothic",sans-serif; }
article, aside, dialog, div, figure, footer, header, hgroup, nav, section { display: block; }

td input[type="text"] { border:1px solid #bbb; background:#fff none 0 0 no-repeat; }
td input[type="text"]:focus { border:1px solid #ccc; background:#F9F8F4 none 0 0 no-repeat; }

td input[type="password"] { border:1px solid #bbb; background:#fff none 0 0 no-repeat; }
td input[type="password"]:focus { border:1px solid #ccc; background:#F9F8F4 none 0 0 no-repeat; }

/* Parts */

.tc        { text-align:center!important;}
.tl        { text-align:left!important;}
.tr        { text-align:right!important;}
.fl        { float:left!important;}
.fr        { float:right!important;}
.strong    { font-weight:900 !important; }
.sup       { font-size:90%; color:#999; line-height:1.5; }
.attention { color:#f00; line-height:1.5; }
.asterisk  { padding:0 0 0 1em; text-indent:-1em; }
.point     { color:#f60; font-size:110%; }
.error     { padding:2px 0; font-style:normal; }
.clear     { zoom:1; }
.clear:after { content:''; display:block; clear:both; }
.mt20 { margin-top:20px!important; }
/* rayout */
/* common parts */
body {
    width: 100%;
    overflow: hidden;
}

.inner {
    width: 1000px;
    margin-left: auto;
    margin-right: auto;
}
.inner:after {
    content: "";
    clear: both;
    display: block;
}

header {
    overflow: hidden;
    position: relative;
}
header h1 {
    background: url(../images/logo.png) center left no-repeat;
    height: 60px;
    width: 92px;
    float: left;
}
header h1 a {
    height: 60px;
    width: 92px;
    display:  block;
}
header h1 span {
    display: none;
}
header ul {
    width: 908px;
    float: left;
}
header ul li {
    float: right;
    text-align: center;
}
header ul li a {
    text-decoration: none;
    color: #333;
    display: block;
    padding: 15px 20px 10px;
    border-bottom: 2px solid #fff;
    font-size: 18px;
}
header ul li a.active {
    border-bottom: 2px solid #593163;
}
header ul li a:hover {
    border-bottom: 2px solid #81BDEA;
}
footer {
    background: #9A9A9A;
    text-align: center;
    padding: 20px;
}
footer small {
    color: #fff;
}
h2 {
    width: 100%;
    height: 36px;
    margin: 0 0 20px;
}
h2 span {
    display: none;
}
#innerContain {
    background: #fff;
}

.title{
    text-align: center;
    font-size: 25px;
}


/* video */
#videoCatch {
    position: relative;
    background: #999;
}
#videoCatch video {
    width: 100%;
}
#video p {
    position: absolute;
    text-align: center;
    top: 50%;
    width: 100%;
    color: #fff;
    font-size: 60px;
    margin-top: -1.5em;
    font-family: Arial, Helvetica, sans-serif;
    text-shadow: 0 1px 10px #000;
    z-index: 100;
}
#video-cover {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    background: url(../images/cover.png) 0 0;
    z-index: 50;
}
#sp-catch {
    display: none;
}

/* news */
#news {
    padding: 40px 0;
    background: rgba(255, 109,124 , 0.6);
    position: absolute;
    bottom: 0;
    width: 100%;
    z-index: 75;
}
@media (max-width: 480px) {
  #news { width: auto; }
}
#news h2 {
    background: url(../images/title_news.png) 0 0 no-repeat;
}
#news dl dt {
    color: #fff;
}
#news dl dt time {
    color: #fff;
    margin: 0 10px 0 0;
}
#news dl dd {
    color: #fff;
}
#news a {
    color: #fff;
}
#news a:hover {
    color: #fff;
    opacity: 0.8;
}
/* company */
#company {
    background-color: #81BDEA;
    padding: 70px 0 50px;
    margin-top: -20px;
}
#company h2 {
    background: url(../images/title_company.png) 0 0 no-repeat;
}
#company dl dt {
    clear: left;
    width: 200px;
    float: left;
    color: #fff;
    line-height: 2.4em;
    font-size: 18px;
}
#company dl dd {
    line-height: 2.4em;
    width: 700px;
    margin: 0 0 0 10px;
    float: left;
    color: #fff;
    font-size: 18px;
}

/* access */
#access {
    background-color: #6AC09F;
    padding: 50px 0 70px;
}
#access h2 {
    background: url(../images/title_access.png) 0 0 no-repeat;
}
#access .map {
    float: left;
    width: 700px;
    height: 350px;
}
#access .detail {
    float: left;
    width: 290px;
    margin: 0 0 0 10px;
    position: relative;
    height: 350px;
}
#access .detail li {
    color: #fff;
    margin: 0 0 5px;
}
#access .detail p a {
    color: #fff;
    text-decoration: none;
    position: absolute;
    bottom: 0;
    left: 0;
}

/* content-menu */
#content-menu {
    margin: 40px auto 0;
    width: 1200px;
    position: relative;
    z-index: 100;
}
#content-menu h2 {
    background: url(../images/title_works.png) 0 0 no-repeat;
    width: 1000px;
    margin: 0 auto 20px;
}
#content-menu .main-menu:after {
    clear: both;
    content: "";
    display: block;
}
#content-menu .shadow-menu {
    position: absolute;
    top: 65px;
    left: 5px;
    z-index: 0;
    opacity: 0.2;
}
#content-menu:after {
    clear: both;
    content: "";
    display: block;
}
#content-menu ul {
    float: left;
    text-align: right;
}

#content-menu ul.tp2 {
    margin: -130px 0 0 80px;
    text-align: left;
}
#content-menu li {
    width: 445px;
    margin: 0 -1px 0 100px;
}
#content-menu li:nth-child(2) {
    margin: 0 0 0 50px;
}
#content-menu li:nth-child(3) {
    margin: 0 0 0 0;
}
#content-menu li:nth-child(4) {
    margin: 0 0 0 -50px;
}
#content-menu li a {
    z-index: 10;
    font-size: 14px;
    position: relative;
    display: table;
    padding: 25px 40px;
    width: 445px;
    height: 80px;
    background: #444;
    text-decoration: none;
    vertical-align: middle;
}
#content-menu li a:hover {
    opacity: 0.9;
}
#content-menu li a span.icons {
    display: table-cell;
    vertical-align: middle;
}
#content-menu li a span.texts {
    color: #fff;
    vertical-align: middle;
    font-weight: bold;
    text-align: left;
    display: none;
    opacity: 0;
}
#content-menu li a img {
    vertical-align: middle;
}
#content-menu li a:after,
#content-menu li a:before {
    content: '';
    width: 0px;
    height: 0px;
    top: 0px;
    position: absolute;
}
#content-menu li a:after{
    border-bottom: 130px solid transparent;
    right: -50px;
}
#content-menu li a:before{
    border-top: 130px solid transparent;
    left: -50px;
}
#content-menu li a {
    background: #444;
}
#content-menu li a:after{
    border-left: 50px solid #444;
}
#content-menu li a:before{
    border-right: 50px solid #444;
}
#content-menu li.btob a { background: #EDB407; }
#content-menu li.btob a:after{ border-left-color: #EDB407; }
#content-menu li.btob a:before{ border-right-color: #EDB407; }

#content-menu li.casting a { background: #DD2A78; }
#content-menu li.casting a:after{ border-left-color: #DD2A78; }
#content-menu li.casting a:before{ border-right-color: #DD2A78; }

#content-menu li.support a { background: #5595DB; }
#content-menu li.support a:after{ border-left-color: #5595DB; }
#content-menu li.support a:before{ border-right-color: #5595DB; }

#content-menu li.contact a { background: #9A9A9A; }
#content-menu li.contact a:after{ border-left-color: #9A9A9A; }
#content-menu li.contact a:before{ border-right-color: #9A9A9A; }

#content-menu li.web a { background: #6BBFC9; }
#content-menu li.web a:after{ border-left-color: #6BBFC9; }
#content-menu li.web a:before{ border-right-color: #6BBFC9; }

#content-menu li.marketing a { background: #E78B21; }
#content-menu li.marketing a:after{ border-left-color: #E78B21; }
#content-menu li.marketing a:before{ border-right-color: #E78B21; }

#content-menu li.ec a { background: #A727AD; }
#content-menu li.ec a:after{ border-left-color: #A727AD; }
#content-menu li.ec a:before{ border-right-color: #A727AD; }

#content-menu li.other a { background: #3E39DA; }
#content-menu li.other a:after{ border-left-color: #3E39DA; }
#content-menu li.other a:before{ border-right-color: #3E39DA; }

.sp-main-menu { display: none; }

/* form */
/* video */
#contact-video {
    position: relative;
    background: #999;
    height: 136px;
    overflow: hidden;
}
#contact-video video {
    width: 100%;
}
#contact-video-cover {
    position: absolute;
    top: 0;
    width: 100%;
    height: 136px;
    background: url(../images/cover.png) 0 0;
    z-index: 50;
}
#contact-video p {
    display: none;
}

#contact h2 {
    background: url(../images/title_contact.png) 0 center no-repeat;
    padding: 10px 0;
    margin: 0;
}
#contact-title {
    padding: 40px 0;
    background: rgba(63, 195, 223, 0.6);
    position: absolute;
    bottom: 0;
    width: 100%;
    z-index: 75;
}
#form {
    padding: 40px 0;
}
#form p.message {
    background: #c3ecf5;
    padding: 20px;
    border-radius: 5px;
    margin: 0 0 20px;
}
#form dl {
    /*padding: 0 0 20px;*/
    overflow: hidden;
    display: table;
}
#form dl dt {
    width: 250px;
    border: 1px solid #FFF;
    background: #add8e6;
    vertical-align: middle;
    display: table-cell;
    padding: 10px 20px;
}
#form dl dt span {
    font-weight: bold;
    vertical-align: baseline;
    margin: 0 0 0 5px;
}
#form dl dd {
    width: 650px;
    background: #f7f7f7;
    border: 1px solid #FFF;
    display: table-cell;
    padding: 10px 20px;
}
#form dl dd ul li {
    margin: 0 0 10px;
}
#form input[type="text"] {
    width: 98%;
    padding: 5px;
    border: 1px solid #ccc;
    vertical-align: middle;
    font-size: 14px;
}
#form select {
    padding: 5px;
    border: 1px solid #ccc;
    vertical-align: middle;
    font-size: 14px;
}
#form input.input_text_exshort {
    width: 150px;
}
#form input.input_text_short {
    width: 300px;
}
#form textarea {
    width: 98%;
    height: 100px;
    padding: 5px;
    border: 1px solid #ccc;
    vertical-align: middle;
    font-size: 14px;
}
#form dl dd strong {
    vertical-align: middle;
    font-size: 20px;
}
#form dl dd span {
    vertical-align: middle;
}


#published table {
    max-width: 95%;
    position: relative;
    top: 10px;
    left:50px;
    border-collapse:  collapse;     /* セルの線を重ねる */
    border-spacing: 20px;
}
.check_area {
    display: block;
    width: 95%;
    padding: 8px;
    background: #F0FFFF;    
}
.r50 {
    position: relative;
    left:50px;
}
.r20 {
    position: relative;
    left:20px;
}
#published th,td {
    border: #a9a9a9 solid 0.8px;              /* 枠線指定 */
    padding: 10px;      /* 余白指定 */
}

#published th {
    text-align:  center;        /* 文字の揃え位置指定 */
}

.btns {
    width: 440px;
    margin: 20px auto;
}
.btns .btn {
    float :left;
    margin: 0 10px;
}
.btn {
    width: 200px;
    margin: 0 auto;
    text-align: center;
}
.btn a {
    color: #fff;
    text-decoration: none;
    font-size: 18px;
    display: block;
    padding: 15px 0;
}
.btn-orange a {
    background: #E78B21;
    border-bottom: 5px solid #c07115;
}
.btn-gray a {
    background: #999;
    border-bottom: 5px solid #888;
}
.error-message {
    color: #f00;
}
.error-title {
    font-weight: bold;
    padding: 20px;
    background: #fcc;
    border-radius: 5px;
    margin: 0 0 20px;
}
.caption {
    color: #666;
    font-size: 12px;
}
.attention {
    padding: 0 0 40px;
}
.attention li {
    margin: 0 0 10px;
}

/* ドロワーメニュー部分 */
 #drawer {
    position: fixed;
    top: 0;
    right: -250px;
    width: 250px;
    height: 100%;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    -webkit-transition: all .2s;
                    transition: all .2s;
    background-color: #333;
    background-image: url(../images/common/drawer/back.png);
    z-index: 5000;
}
#drawer.open {
    -webkit-transform: translate3d(-250px, 0, 0);
                    transform: translate3d(-250px, 0, 0);
}
/* ドロワーが開いたとき、コンテンツ部分にかけるオーバーレイ */
#overlay {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: 9999;
    background: rgba(0, 0, 0, .3);
}
/* 開閉ボタン */
#drawer-open.drawer-button {
    position: absolute;
    right: 3%;
    top: 30%;
    display: none;
    background-image: url(../images/menu_b.png);
    background-repeat: no-repeat;
    background-size: cover;
    width: 25px;
    height: 16px;
}

#drawer .d-nav {
    margin: 10% 0 0 0;
}

#drawer .d-nav ul {
    border-top: 1px solid #666;
}

#drawer .d-nav li {
    border-bottom: 1px solid #666;
}

#drawer .d-nav li a {
    display: block;
    padding: 3% 0 3% 5%;
    background-repeat: no-repeat;
    background-position: 5% center;
    background-size: 14px 22px;
    font-size: 100%;
    color: #fff;
}
/* メインコンテンツ部分 */
 #wrapper {
    position: relative;
    -webkit-transition: all .2s;
                    transition: all .2s;
}
#wrapper.open {
    -webkit-transform: translate3d(-250px, 0, 0);
                    transform: translate3d(-250px, 0, 0);
    overflow: hidden;
}

@media screen  and (max-width: 1000px) {
    .inner { width: 100%; }

    h1 { margin-left: 15px; }
    h2 { background-size: 25% !important; margin: 0; }
    header nav { display: none; }

    #drawer-open.drawer-button { display: block; }

    #wrapper { width: 100%; }

    #sp-catch { display: block; width: 100%; }
    #sp-catch img { width: 100%; }

    #video { display: none; }

    #news { background: rgba(255, 109,124 , 1); position: relative; padding: 20px; margin-bottom: 20px; }

    .sp-main-menu { display: block; }
    #content-menu { width: 100%; margin-top: 20px; }
    #content-menu h2 { width: 100%; background-size: 45% !important; margin: 30px 20px; }
    #content-menu .main-menu {  display: none; }
    #content-menu ul { float: none; }
    #content-menu ul.tp2 { margin: 0 !important; }
    #content-menu li { margin: 0!important; width: 100%; text-align: left; }
    #content-menu li a { width: 93%; padding: 20px 5%; }
    #content-menu .sp-main-menu li a span { color: #fff; display: block; font-size: 14px; font-weight: normal; }
    #content-menu .sp-main-menu li a span.icons { font-size: 18px; }
    #content-menu .sp-main-menu li a span.icons img { margin-right: 10px; }
    #content-menu .sp-main-menu li a span.texts { color: #fff; opacity: 1; margin-top: 10px; }
    #content-menu li a:before { display: none; }
    #content-menu li a:after { display: none; }
    .shadow-menu { display: none; }

    #company { width: 100%; }
    #company h2 { width: 100%; background-size: 45% !important; margin: 0 20px; }
    #company dl dt { width: 30%; text-indent: 1em; font-size: 14px; }
    #company dl dd { width: 65%; font-size: 14px; }

    #access h2 { width: 100%; background-size: 45% !important; margin: 0 20px; }
    #access .map { width: 90% !important; margin-left: 5% !important; margin-top: 10px; }
    #access .map iframe { width: 100% !important; }
    #access .detail { width: 90% !important; margin-left: 5% !important; margin-top: 10px; height: auto!important; font-size: 14px; }
    #access .detail p a { position: relative;  font-size: 14px; }

    #contact-video-cover { display: none; }
    #contact-video video { display: none; }
    #contact-video img { width: 100%; }
    #contact-video p { display: block; }
    #contact h2 { background-size: 50% !important; background-position: 20px center; padding: 0; }

    #form {  width: 94%; }
    #contact { width: 100%; }
    #contact .inner { padding: 10px; }
    #contact dl { width: 100%; }
    #contact dl dt { clear: both; display:block; width: auto; }
    #contact dl dd { clear: both; display:block; width: auto; }
    #form input[type="text"] { width: 97%; }
    #form input.input_text_exshort { width: 25%; }
    #form textarea { width: 97%; }
    #form select { width: 100%; }
}

@media screen  and (max-width: 600px) {
    h2 { background-size: 42% !important; }
    #content-menu h2 { background-size: 88% !important; }
    #company h2 { background-size: 88% !important; }
    #access h2 { background-size: 88% !important; }
}