@charset "UTF-8";

/* Common
================================================== */
ul,dl,ol {
    margin: 0;
    padding: 0;
    list-style: none;
}
figure {
    margin: 15px 0;
    padding: 0;
}

article {
    text-align: left;
    color: #231815;
}
#breadcrumbs a,
aside a,
#mainContents a {
    color: #00A0E9;
    font-weight: normal;
}
#mainContents p {
    font-size: 85.7%;
    line-height: 1.35;
}
figcaption {
    font-size: 78.57%;
    line-height: 1.31;
	margin:5px 0 20px;
}
span.nl,
figcaption > span {
    display: block;
}
a:active {
    color: #06E;
}
ul.circleTop > li {
    text-indent: -1em;
    padding-left: 1em;
}
ul.circleTop > li:before {
    content: '○';
}

/* for Image Button Box */
.btnBoxWrap {
    padding: 0;
}
.btnBoxWrap > a {
    display: block;
    margin: 0;
    width: 100%;
    height: 100%;    
}
.btnBoxWrap > a,
.btnBoxWrap > a:hover {
    text-decoration: none;
}
.btnBox {
    margin: 0 auto;
    border-radius: 3px;
}
#mainContents .btnBox p {
    margin: 0;
    line-height: 1.2;
    color: #FFF !important;
    text-align: center;
}
#mainContents .btnBox p.engtxt {
    font-size: 71.4%;
    line-height: 1.4;
}
.btnBox.blue {
    background-color: rgb(0, 160, 233);
    background-color: rgba(0, 160, 233, 0.8);
}
.btnBox.green {
    background-color: rgb(0, 167, 110);
    background-color: rgba(0, 167, 110, 0.8);
}
a:hover .btnBox.blue {
    background-color: rgb(0, 120, 183);
    background-color: rgba(0, 120, 183, 0.9);
}
a:hover .btnBox.green {
    background-color: rgb(0, 117, 80);
    background-color: rgba(0, 117, 80, 0.9);
}

/* Photo and text*/
.photo_text {
    
}
.photo_text  > img,
.photo_photo  > img,
.text_photo  > img {
    display: block;
    margin: 15px auto;
}

/* Layout
================================================== */
header#header {
    width: 100%;
    margin-bottom: 0;
}
html.sp #header {
    margin-bottom: 0;
}
#breadcrumbs {
    margin: 30px auto;
    text-align: left;
}
ariticle {
}
article section {
/*    width: 90%; */
    margin: 0 auto;
}
article section h1 {
    text-align: left;
    font-size: 142.8%;
    font-weight: normal;
    color: #00A0E9;
    margin: 40px 0 30px;
}
.ContentsWrap.top article {
}


/* Header
================================================== */

/* HeadVisual
================================================== */
section.mainvisual {
    width: 100%;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    -webkit-background-size: cover;
    height: 82px;
    margin-bottom: 30px;
    box-sizing: border-box;
}
#projectVisual {
    background-image: url(../images/project/sp_project_back.jpg);
    padding: 12px 70px;
}
#workVisual {
    background-image: url(../images/work/sp_work_back.jpg);
    padding: 12px 70px;
}
#staffVisual {
    background-image: url(../images/staff/sp_staff_back.jpg);
    padding: 12px 45px;
}
#miscVisual {
    height: 38px;
    background-image: url(../images/sp_misc_back.jpg);
}
section.mainvisual .titleBox {
    padding: 9px 12px;
    background-color: rgb(0, 160, 233);
    background-color: rgba(0, 160, 233, 0.8);
    border-radius: 6px;
    color: #FFF;
}
section.mainvisual .titleBox .engtxt {
    font-size: 71.4%;;
}
    


/* Global Navigation
================================================== */
#GMenu > h2 {
    position: relative;
    overflow: hidden;
    width: 100%;
    background-color: #00A0E9;
    text-align: center;
    padding: 1em 0;
    color: #FFF;
    border-bottom: 1px solid #FFF;
    cursor: pointer;
}
#GMenu > h2:after,
#CTNav > li:after {
    content: url(../images/sp_menuarrow.png);
    position: absolute;
    right: 30px;
    top: 10px;
}
#GMenu > h2.open:after,
#CTNav > li.open:after {
    transform: rotate(90deg);
    -webkit-transform: rotate(90deg);
}
#CTNav {
    margin: 0 auto;
    display: none;
}
#CTNav > li {
    position: relative;
    overflow: hidden;
    width: 100%;
    padding: 1em 0 0;
    line-height: 1.28;
    color: #FFF;
    background-color: #00A0E9;
    border-bottom: 1px solid #FFF;
}
#CTNav > li a,
ul.CTsubNav > li a {
    display: block;
    color: #FFF;
    text-decoration: none;
}

#CTNav ul.CTsubNav {
    margin-top: 1em;
}
#CTNav ul.CTsubNav > li {
    display: none;
    padding: 1em 0;
    background-color: #B2B2B2;
    border-bottom: 1px dashed #FFF;
}
#CTNav ul.CTsubNav > li a.blue {
    color: #00A0E9;
}
#CTNav ul.CTsubNav > li a.green {
    color: #00A76E;
}
#CTNav ul.CTsubNav > li a.yellow {
    color: #f39800;
}
#CTNav ul.CTsubNav > li a span {
    font-size: 70%;
    padding-right: 1em;
}

#spCTNav {
    width: 100%;
    color: #FFF;
}
#spCTNav h2 {
    position: relative;
    text-align: center;
}
#spCTNav h2:after {
    content: '';
    position: absolute;
    right: 35px;
    top: 3px;
}

/* Footer
================================================== */
#footer {
    padding-top: 30px;
    border-top: 4px solid #00A0E9;
}

/* Breadcrumbs
================================================== */
#breadcrumbs li {
    letter-spacing: 0.1em;
    padding-left: 0.2em;
}
#breadcrumbs li:first-child {
    padding-left: 0;
}

/* Aside
================================================== */
#mainContents aside h2 {
    margin: 20px auto 0;
    padding-left: 0.2em;
    font-size: 121.4%;
    line-height: 1.75;
    font-weight: normal;
    color: #00A0E9;
    text-align: center;
}
#mainContents aside p.engtxt {
    margin: 0 auto;
    font-size: 71.4%;
    line-height: 1.4;
    color: #231B00;
    text-align: center;
}
#mainContents aside h2 + p.engtxt {
    margin-bottom: 20px;
}
#sideNav {
    border-top: 1px solid #00A0E9;
}
#sideNav > li {
    text-align: center;
    border-bottom: 1px solid #00A0E9;
    color: #00A0E9;
    font-size: 114.28%;
}
#sideNav > li a {
    text-decoration: none;
}
#sideNav.proj > li {
    font-size: 114.28%;
    
}
#sideNav > li p.engtxt {
    font-size: 68.7%;
    line-height: 1.4;
}
#sideNav.proj > li p.engtxt {
    font-size: 68.7%;
}
#sideNav.proj > li p.fileno {
    font-size: 68.7%;
    line-height: 1.75;
}
#sideNav.proj > li .green {
    color: #00A76E;
}
#sideNav.proj > li .yellow {
    color: #f39800;
}


/* Top(PC)
================================================== */
/* main visual slider */
.mainSlider {
    margin: 0 auto;
    position: relative;
    margin-bottom: 40px;
}
#mainMessage {
    position: absolute;
    top: 15%;
    left: 10%;
    width: 178px;
    z-index: 99;
}
.mainSlider .bx-wrapper {
    box-shadow: none;
    border: none;
    margin-bottom: 40px;
}
.mainSlider .bx-wrapper img {
    width: 100%;
    height: auto;
}
.mainSlider .bx-wrapper .bx-pager {
    position: absolute;
    width: auto;
    right: 95px;
    bottom: 15px;
}

.mainSlider .bx-wrapper .bx-pager a.bx-pager-link {
    width: 14px;
    height: 14px;
    border-radius: 7px;
    background-color: #FFF;
}
.mainSlider .bx-wrapper .bx-pager a:focus.bx-pager-link,
.mainSlider .bx-wrapper .bx-pager a.active.bx-pager-link,
.mainSlider .bx-wrapper .bx-pager a:hover.bx-pager-link　{
    background-color: #00A0E9;
}
.mainSlider .bx-wrapper .bx-controls-direction a {
    width: 44px;
    height: 44px;
    overflow: hidden;
    text-indent: -6em;
}
.mainSlider .bx-wrapper .bx-prev {
    left: 20px;
    background: url(../images/top/slidercontrol.png) no-repeat 0 0;
}
.mainSlider .bx-wrapper .bx-prev:hover {
    background-position: 0 -44px;
}
.mainSlider .bx-wrapper .bx-next {
    right: 20px;
    background: url(../images/top/slidercontrol.png) no-repeat -44px 0;
}
.mainSlider .bx-wrapper .bx-next:hover {
    background-position: -44px -44px;
}

#topBtns {
    
}
#topBtns > li {
    width: 280px;
    height: 72px;
    margin: 0 auto 25px;
}
#topBtns > li a {
    height: 62px;
    padding-top: 10px;
}

#topBtns > li .btnBox {
    width: 156px;
    padding-top: 10px;
    padding-bottom: 10px;
}
#projBtn {
    background: url(../images/top/sptop_btn_back1.jpg) no-repeat center center;
    background-size: contain;
}
#workBtn {
    background: url(../images/top/sptop_btn_back2.jpg) no-repeat center center;
    background-size: contain;
}
#techBtn {
    background: url(../images/top/sptop_btn_back3.jpg) no-repeat center center;
    background-size: contain;
}



/* Message Carousel */
#topMessages {
    margin: 0 auto;
}
#topMessages .bx-wrapper {
    box-shadow: none;
    border: 5px solid #FFF33F;
    background-color: #FFF33F;
    margin-bottom: 40px;
}

/* NEWS */
#topNews {
    width: 260px;
    margin: 0 auto;
    border: 7px solid #00A0E9;
    border-radius: 5px;
    padding: 0 10px 10px;
    text-align: left;
}
#topNews h1 {
    margin: 0.5em;
    font-size: 121.4%;
    line-height: 1.53;
    color: #00A0E9;
    text-align: center;
    font-weight: normal;
}
#topNews dl dd {
    border-bottom: 2px solid #E5E5E5;
    padding-bottom: 10px;
    margin-bottom: 15px;
}
#topNews dl {
    height: 390px;
    overflow-y: scroll;
    padding: 0 10px;
}
/* Btn2 */
#topBtns2 {
    margin: 40px auto;
}
#topBtns2 > li {
    width: 280px;
    height: 72px;
    margin: 0 auto 20px;
}
#topBtns2 > li a {
    height: 62px;
    padding-top: 10px;
}
#topBtns2 > li .btnBox {
    width: 156px;
    padding-top: 10px;
    padding-bottom: 10px;
}
#staffBtn {
    background: url(../images/top/sptop_btn2_back1.jpg) no-repeat center center;
    background-size: contain;
}
#zadankaiBtn {
    background: url(../images/top/sptop_btn2_back2.jpg) no-repeat center center;
    background-size: contain;
}
#careerzadankaiBtn {
    background: url(../images/top/sptop_btn2_back3.jpg) no-repeat center center;
    background-size: contain;
}


/* Top(SP)
================================================== */
.mainSlider.sptop .bx-wrapper .bx-pager {
    position: absolute;
    width: auto;
    margin: 0 auto;
    right: 42%;
    bottom: 15px;
}
.asideBtn {
    width: 280px;
    height: 157px;
    margin: 20px auto;
}
#spMovie {
    background: url(../images/top/sptop_movieback.jpg) no-repeat center center;
    background-size: cover;
}
#spCareerBtn {
    background: url(../images/top/sptop_careerback.jpg) no-repeat center center;
    background-size: cover;
}
.asideBtn a {
    height: 47px;
    padding: 55px 0;
}
.asideBtn .btnBox {
    width: 206px;
    padding-top: 10px;
    padding-bottom: 10px;
}
#fbBtn {
    height: auto;
    padding: 0;
}
#fbBtn img {
    max-width: 100%;
    height: auto;
}

/* Message
================================================== */
#messageSection,
#talentimageSection {
    padding-bottom: 40px;
    border-bottom: 1px solid #00A0E9;
    width: 90%;
    margin: auto;
}
#messageSection .photo_text > img {
    width: 183px;
    margin: 0 auto 40px;
}
#messageSection .photo_text p {
    text-align: left;
    margin-bottom: 1em;
}
#messageSection .photo_text p#messageSign {
    text-align: right;
}
#talentimageSection > p {
    font-size: 114.28%;
    line-height: 1.5;
}
#talentimageSection > .imagebox {
    margin: 20px auto 40px;;
}
#talentimageSection img {
    display: block;
    margin: 20px auto 40px;
}
#message_talent_image {
    width: 100%;
}
#message_talent_image2 {
    width: 205px;
}


/* project
================================================== */
/* project top */
article#proj_top,
article#work_top,
article#staff_top,
article.proj,
article.work,
article.staff {
    width: 90%;
    margin: auto;
}
#projLists {
    margin: 40px auto;
    text-align: left;
}
#projLists > li {
    text-align: center;
    margin-bottom: 40px;
}
#projLists > li > a {
    width: 100%;
    height: 100%;
}
#projLists > li .projBtnImg {
    position: relative;
    width: 100%;
}
#projLists .projBtnImg {
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    height: 214px;
}
#projLists #projBtn01 {
    background-image: url(../images/project/btn_proj01.jpg);
}
#projLists #projBtn02 {
    background-image: url(../images/project/btn_proj02.jpg);
}
#projLists #projBtn03 {
    background-image: url(../images/project/btn_proj03.jpg);
}
#projLists #projBtn04 {
    background-image: url(../images/project/btn_proj04.jpg);
}
#projLists #projBtn05 {
    background-image: url(../images/project/btn_proj05.jpg);
}
#projLists .titlebar {
    font-size: 78.57%;
    line-height: 1.75;
    color: #FFF;
    background-color: #00A0E9;
    text-decoration: none;
}
#projLists h2 {
    margin: 10px 0;
    font-size: 142.85%;
    font-weight: normal;
}


/* project content */
article.proj > h1 {
    padding: 7px 0 8px 60px;
    color: #00A0E9;
    font-weight: normal;
    font-size: 131.25%;
    line-height: 1.7;
    background: url(../images/project/project01_num.png) no-repeat left center;
    background-size: 46px;
    margin-bottom: 40px;
}
article#proj01.proj > h1 {
    background-image: url(../images/project/project01_num.png);
}
article#proj02.proj > h1 {
    background-image: url(../images/project/project02_num.png);
}
article#proj03.proj > h1 {
    background-image: url(../images/project/project03_num.png);
}
article#proj04.proj > h1 {
    background-image: url(../images/project/project04_num.png);
}
article#proj05.proj > h1 {
    background-image: url(../images/project/project05_num.png);
}

article.proj > h2 {
    margin: 40px 0 30px;
    color: #00A0E9;
    font-weight: bold;
    font-size: 114.28%;
    line-height: 1.26;
}
article.proj > h3 {
    margin: 40px 0 30px;
    font-weight: normal;
    font-size: 114.28%;
    line-height: 1.26;
}
article.proj img,
article.work img,
article.staff img {
    width: 100%;
}

section.projArea {
    width: 100%;
    margin: 40px 0;
}
section.projArea > h1,
section.projArea > h2 {
    font-weight: bold;
    color: #00A0E9;
    font-size: 114.28%;
    line-height: 1.26;
}
section.projArea > h1 {
    padding-left: 0.5em;
    border-left: 5px solid #00A0E9;
    margin: 20px 0;
}
section.projArea > h2 {
    margin: 30px 0 20px;
}
#proj01_h3desc > img {
    width: 65%;
}
section.projArea p.another {
    margin-top: 10px;
}
section.projConclusion {
    margin: 50px 0;
}
section.projConclusion h1 {
    font-size: 114.28%;
    line-height: 1.26;
    font-weight: bold;
    margin: 20px 0;
}
#proj03 p.copyright {
    text-align:right;
    font-size:85.7%;
}
#proj03 .rightArea span {
    color:#00a0e9;
}


/* Work
================================================== */
/* work top */
#workLists {
    text-align: left;
    margin: 0 auto;
}
#workLists > li {
    display: inline-block;
    vertical-align: top;
    width: 46%;
    margin: 1% 1% 3%;
}
#workLists > li img {
    width: 100%;
}
section#tech {
    margin: 40px 0;
    text-align: left;
}
html.sp section#tech img {
    width: 100%;
}

section#tech h1,
section#tech h2,
section#tech h3,
section#tech h4 {
    color: #00A76E;
}
section#tech h3,
section#tech h4 {
    font-weight: normal;
}
section#techOverview > h1 {
    margin: 40px 0 20px;
}
section#techOverview > h2 {
    margin: 40px 0;
    text-align: center;
}
section#techOverview > h3 {
    margin: 40px 0 10px;
}
section#techOverview > p {
    margin-bottom: 20px;
}
section#techOverview > ul.circleTop,
dl#worktop_kenshuList,
ul.worktop_shikakuList {
    font-size: 85.7%;
    line-height: 1.35;
}
section#techPickup {
    margin: 40px 0;
    padding: 15px;
    position: relative;
    border: 1px solid #00A76E;
}
section#techPickup > h1 {
    position: absolute;
    top: 0;
    left: 0;
    margin: 0;
    width: 98%;
    padding-left: 2%;
    background: url(../images/work/worktop_techpickup_back.png) no-repeat left top;
    color: #FFF;
    font-size: 78.57%;
    line-height: 27px;
}
section#techPickup > h2 {
    margin-top: 40px;
    font-weight: normal;
}
section#techPickup > h3 {
    margin-bottom: 30px;
}
ul#techPickupList > li {
    padding-left: 35px;
    margin-bottom: 30px;
    background-repeat: no-repeat;
    background-position: left top;
    background-size: 24px;
}
ul#techPickupList > li#techPickupList01 {
    background-image: url(../images/work/worktop_pickup_num1.png);
}
ul#techPickupList > li#techPickupList02 {
    background-image: url(../images/work/worktop_pickup_num2.png);
}
ul#techPickupList > li#techPickupList03 {
    background-image: url(../images/work/worktop_pickup_num3.png);
}
ul#techPickupList >li > h4,
section#techPickup > h4 {
    margin: 10px 0;
}
ul#techPickupList >li > p {
    margin: 10px 0;
}

section#techPickup > h4 {
    color: #231815;
}
dl#worktop_kenshuList {
    margin: 20px 0;
}
dl#worktop_kenshuList dt,
dl#worktop_kenshuList dd {
    margin-bottom: 5px;
}
dl#worktop_kenshuList dt {
    clear: left;
    background: url(../images/work/dot_back.png) repeat-x left center;
    width: 8em;
    margin-right: 5px;
}
dl#worktop_kenshuList dt span {
    background-color: #FFF;
    padding-right: 5px;
}
ul.worktop_shikakuList {
    margin: 20px 0;
}


/* work contents */
article.work .workTitle {
    margin-bottom: 40px;
    position: relative;
}
#mainContents article.work .workTitle p.shoulder {
    position: absolute;
    left: 0;
    top: 0;
    width: 57px;
    height: 17px;
    color: #FFF;
    letter-spacing: 0.1em;
    text-align: center;

    font-size: 71.4%;
    line-height: 1.7;
    padding: 20px 0;
}
#mainContents article#work11 .workTitle p.shoulder {
    width: 19px;
}
article.work.blue .workTitle p.shoulder {
    background-color: #00A0E9;
}
article.work.green .workTitle p.shoulder {
    background-color: #00A76E;
}
article.work.yellow .workTitle p.shoulder {
    background-color: #f39800;
}
article.work .workTitle h1 {
    font-weight: normal;
    font-size: 128.57%;
    line-height: 1.7;

    padding: 10px 0 25px 65px;
}
article#work11 .workTitle h1 {
    padding-left: 35px;
}
article#work07 p.caution {
    margin: 40px 0;
}
article.work.blue section.overview h2,
article.work.blue section.overview h3,
article.work.blue section.overview .workPickup h4,
article.work.blue .workTitle h1 {
    color: #00A0E9;
}
article.work.green .workTitle h1,
article.work.green section h1,
article.work.green section.overview h1,
article.work.green section.overview h2,
article.work.green section.overview h3,
article.work.green section.overview .workPickup h4,
article.work.green #workProf > .leftArea > .rightArea h2,
article.work.green section.interview .workDetail h3,
article.work.green h3#workSchedule {
    color: #00A76E;
}
article.work.yellow .workTitle h1,
article.work.yellow section h1,
article.work.yellow section.overview h1,
article.work.yellow section.overview h2,
article.work.yellow section.overview h3,
article.work.yellow section.overview .workPickup h4,
article.work.yellow #workProf > .leftArea > .rightArea h2,
article.work.yellow section.interview .workDetail h3,
article.work.yellow h3#workSchedule {
    color: #f39800;
}

article.work .workTitle img {
    clear: both;
}
article.work section.overview {
    padding-bottom: 40px;
/*    border-bottom: 1px solid #00A0E9; */
    margin-bottom: 30px;
}
article.work.green section.overview,
article.work.green section.interview {
    border-color: #00A76E;
}
article.work.yellow section.overview,
article.work.yellow section.interview {
    border-color: #f39800;
}

article.work section.overview h1 {
    font-size: 114.28%;
}
article.work section.overview h2 {
    margin-top: 40px;
    font-weight: normal;
}
article.work section.overview .workPickup{
    margin: 10px 0 20px;
}
article.work section.overview .workPickup h3 {
    border: 1px solid;
    padding: 3px 10px;
    font-weight: normal;
    font-size: 114.28%;

}
article.work section.overview .workPickup h4 {
    margin: 10px 0;
    font-weight: normal;
    font-size: 114.28%;
}
article.work section.overview .workPickup > .rightArea  {
    text-align: center;
}
article.work section.overview .workPickup > .rightArea figure {
    width: 47%;
    display: inline-block;
    vertical-align: top;
    margin-right: 2%;
}
article.work section.overview .workPickup > .rightArea figure figcaption{
    text-align: left;
}

.workMovie > figure {
}
.workMovie > figure > a {
    display: block;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    text-align: center;
}
#workMovie01 figure > a{
    background-image: url(../images/work/work01_movie.jpg);
}
#workMovie02 figure > a{
    background-image: url(../images/work/work02_movie.jpg);
}
#workMovie03 figure > a{
    background-image: url(../images/work/work03_movie.jpg);
}
#workMovie04 figure > a{
    background-image: url(../images/work/work04_movie.jpg);
}
#workMovie05_1 figure > a{
    background-image: url(../images/work/work05_movie1.jpg);
}
#workMovie05_2 figure > a{
    background-image: url(../images/work/work05_movie2.jpg);
}
#workMovie06 figure > a{
    background-image: url(../images/work/work06_movie.jpg);
}
#workMovie07 figure > a{
    background-image: url(../images/work/work07_movie.jpg);
}
#workMovie08 figure > a{
    background-image: url(../images/work/work08_movie.jpg);
}
#workMovie09 figure > a{
    background-image: url(../images/work/work09_movie.jpg);
}
#workMovie10 figure > a{
    background-image: url(../images/work/work10_movie.jpg);
}
#workMovie11 figure > a{
    background-image: url(../images/work/work11_movie.jpg);
}
.workMovie figure > a > img {
    width: 72px;
    margin: 88px auto;
}
#workProf {
    margin: 40px auto;
}
#workProf > .leftArea > img {
    display: block;
    float: left;
    width: 95px;
}
#workProf > .leftArea > .rightArea {
    float: right;
/*    width: 180px;*/
    width: 65%;
}
#workProf > .leftArea > .rightArea h2 {
    color: #00A0E9;
    font-weight: normal;
    margin: 10px 0;
}
#workProf > .leftArea > .rightArea h2 > span {
    display: block;
    color: #231815;
    font-size: 85.71%;
}
#workProf > .leftArea > .rightArea > p span {
    display: block;
}
h3#workSchedule {
    color: #00A0E9;
    font-weight: normal;
    padding-left: .5em;
}
section.interview {
    border-top: 1px solid #00A0E9;
}
section.interview > h1 {
    margin-bottom: 10px;
}
section.interview .workDetail {
    margin: 40px 0;
}
section.interview .workDetail h3 {
    color: #00A0E9;
    font-weight: normal;
    margin-bottom: 10px;
}



/* Staff
================================================== */
/* Staff top */
#staffLists {
    margin: 40px auto 20px;
    text-align: left;
}
#staffLists > li {
    display: inline-block;
    vertical-align: top;
    text-align: center;
    margin-bottom: 40px;
    width: 48%;
    margin-left: 2%;
}
#staffLists > li.doubleBox {
    width: 96%;
}
#staffLists > li:nth-child(2n) {
    margin-left: 0;
}
#staffLists > li:first-child {
    display: block;
    width: auto;
    margin-left: 0;
}
#staffLists > li > a {
    width: 100%;
    height: 100%;
}
#staffLists > li .staffBtnImg {
    position: relative;
    width: 100%;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    height: 214px;
    margin-bottom: 5px;
}
#staffLists > li:first-child .staffBtnImg {
    background-size: 100%;
    height: 131px;
}
#staffLists > li .staffBtnImg .staffBadge {
    position: absolute;
    right: 0;
    bottom: 0;
    height: 16px;
}

#staffLists > li #staffBtnZ {
    background-image: url(../images/staff/stafftop_btnZadan.jpg);
}
#staffLists > li #staffBtn01 {
    background-image: url(../images/staff/stafftop_btn01.jpg);
}
#staffLists > li #staffBtn02 {
    background-image: url(../images/staff/stafftop_btn02.jpg);
}
#staffLists > li #staffBtn03 {
    background-image: url(../images/staff/stafftop_btn03.jpg);
}
#staffLists > li #staffBtn04 {
    background-image: url(../images/staff/stafftop_btn04.jpg);
}
#staffLists > li #staffBtn05 {
    background-image: url(../images/staff/stafftop_btn05.jpg);
}
#staffLists > li #staffBtn06 {
    background-image: url(../images/staff/stafftop_btn06.jpg);
}
#staffLists > li #staffBtn07 {
    background-image: url(../images/staff/stafftop_btn07.jpg);
}
#staffLists > li #staffBtn08 {
    background-image: url(../images/staff/stafftop_btn08.jpg);
}
#staffLists > li #staffBtn09 {
    background-image: url(../images/staff/stafftop_btn09.jpg);
}

#staffLists .titlebar {
    font-size: 78.57%;
    line-height: 1.75;
    color: #FFF;
    background-color: #00A0E9;
    text-decoration: none;
}
#staffLists h2 {
    margin: 10px 0;
    color: #00A0E9;    
    font-size: 142.85%;
    font-weight: normal;
}
#staffLists p.stafftopBelongto,
#staffLists p.stafftopShouder,
#staffLists p.stafftopDesc {
    text-align: left;
    font-size: 78.57%;
}
#staffLists p.stafftopBelongto span {
    display: block;
}
#staffLists p.stafftopBelongto + h2 {
    text-align: left;
    margin: 0;
}
#staffLists p.stafftopDesc {
    margin-top: 10px;
    color: #00A0E9;
}
article#staff_top p.caution {
    text-align: right;
    margin-bottom: 50px;
}

/* Staff content */
article.staff .staffTitle {
    position: relative;
    margin-bottom: 40px;
}
article.staff .staffTitle > p.shoulder {
    position: absolute;
    left: 0;
    top: 0;
    width: 61px;
    font-size: 71.4%;
    line-height: 1.7;
}
#mainContents article.staff .staffTitle > p.staffbelong {
    padding: 0 0 0 75px;
    font-size: 78.57%;
    line-height: 1.7;
}
article.staff .staffTitle > h1 {
    padding: 0 0 5px 75px;
    font-weight: normal;
    color: #00A0E9;
    font-size: 150%;
    line-height: 1.7;
    margin: 0;
}
#mainContents article.staff .staffTitle > p.staffbelong > span {
    display: block;
}
article.staff section.overview {
    margin-bottom: 60px;
}
#staffProf  {
    margin: 30px 0;
}
#staffProf > img {
    float: left;
    width: 95px;
}
#staffProf > .rightArea {
    float: right;
    /* width: 175px; */
    width: 65%;
}
#staffProf > .rightArea h2 {
    color: #00A0E9;
    font-weight: normal;
    margin: 5px 0;
}
#staffProf > .rightArea h2 > span {
    display: block;
    color: #231815;
    font-size: 85.71%;
}
#staffProf > .rightArea > p span {
    display: block;
}
article.staff .staffHistory {
    margin: 40px 0;
}
article.staff .staffHistory > h3 {
    margin-bottom: 10px;
    color: #00A0E9;
    font-weight: normal;
}

/* Staff zadankai */
article#staffZ .staffTitle > h1 {
    padding-top: 10px;
    padding-bottom: 30px;
}
#zandanProf {
    margin: 30px 0 20px;
    border-bottom: 1px solid #231815;
    font-size: 114.28%;
    line-height: 1.5;
    font-weight: normal;
}
#zandanProfList {
    text-align: left;
}
#zandanProfList > li {
    position: relative;
    margin-bottom: 20px;
}
#zandanProfList > li:after {
    content: "";
    display: block;
    clear: both;
}
#zandanProfList > li > img {
    float: left;
    width: 95px;
    padding-top: 10px;
}
#zandanProfList > li .rightArea {
    float: right;
/*    width: 185px;*/
    width: 65%;
    text-align: left;
}
#zandanProfList > li .rightArea h3 {
    color: #00A0E9;
    font-size: 114.28%;
    font-weight: normal;
}
#zandanProfList > li .rightArea h3 span {
    padding-left: 1em;
    color: #231815;
    font-size: 75%;
}
#zandanProfList > li .rightArea p {
    margin: 5px 0;
}
#zandanProfList > li .rightArea p.desc {
    color: #00A0E9;
}
article#staffZ section.interview {
    border: none;
    margin-bottom: 50px;
}
article#staffZ section.interview > h1 {
    margin-top: 30px;
    color: #00A0E9;
    font-size: 114.28%;
    font-weight: bold;
}
article#staffZ section.interview > h2 {
    margin-top: 30px;
    color: #00A0E9;
    font-size: 114.28%;
    font-weight: normal;
}
article#staffZ .zadanDetail,
article#staffZ .zadanDetail2,
article#staffZ .zadanDetail3 {
    margin: 10px 0 20px;
}
article#staffZ .zadanDetail2 img,
article#staffZ .zadanDetail3 img {
    margin-bottom: 10px;
}
article#staffZ .zadanDetail p,
article#staffZ .zadanDetail2 p,
article#staffZ .zadanDetail3 p {
    margin-bottom: 0.8em;
}
article#staffZ .zadanDetail p span.name,
article#staffZ .zadanDetail2 p span.name,
article#staffZ .zadanDetail3 p  span.name {
    font-weight: bold;
}


/* Career
================================================== */
#staffLists > li #careerBtnZ {
    background-image: url(../images/career/societytop_btn_zadan.jpg);
}
#staffLists > li #careerBtn01 {
    background-image: url(../images/career/societytop_btn01.jpg);
}
#staffLists > li #careerBtn02 {
    background-image: url(../images/career/societytop_btn02.jpg);
}
#staffLists > li #careerBtn03 {
    background-image: url(../images/career/societytop_btn03.jpg);
}
#staffLists > li #careerBtn04 {
    background-image: url(../images/career/societytop_btn04.jpg);
}
#staffLists > li #careerBtn05 {
    background-image: url(../images/career/societytop_btn05.jpg);
}
#staffLists > li #careerBtn06 {
    background-image: url(../images/staff/stafftop_btn05.jpg);
}
#staffLists > li #careerBtn07 {
    background-image: url(../images/staff/stafftop_btn06.jpg);
}
#staffLists p#careerAddInfo {
    padding: 8px;
    border: 3px solid #7dcef4;
    background-color: #fffde1;
    color: #00A0E9;
    text-align: left;
}


#careerOverview {
    margin: 15px 0 40px;
    border-top: 1px solid #00A0E9;
    text-align: left;
}
#careerOverview h1,
#careerOverview h2 {
    color: #00A76E;
}
#careerOverview h1 {
    margin: 40px 0 10px;
}
#careerOverview h2 {
    margin: 30px 0 7px;
}
#careerOverview p {
    margin-bottom: 1em;
}
#careerOverview img {
    max-width: 100%;
    height: auto;
}
#careerOverview dl.salary {
    margin: 30px 0 0;
}
#careerOverview dl.salary > dt {
    text-align: center;
    margin-bottom: 20px;
}
#careerOverview dl.salary > dd {
    margin-bottom: 20px;
    font-size: 85.7%;
    line-height: 1.35;
}
#careerOverview dl.salary > dd > dl > dt {}
#careerOverview dl.salary > dd > dl > dd {
    margin: 0 0 0.5em 0.5em;
}
#careerOverview ul.salaryCaution > li {
    padding-left: 1em;
    text-indent: -1em;
    font-size: 85.7%;
    line-height: 1.35;
}
#careerOverview ul.salaryCaution > li:before {
    content: '※';
}

/* About
================================================== */
#examSection,
#benefitsSection,
#developSection,
#systemSection,
#aboutSection,
#movieSection,
#organizationSection {
    width: 90%;
    margin: auto;
}
#aboutSection {
    background: url(../images/misc/about_kobemap.png) no-repeat center 240px;
    background-size: 100% auto;
    padding-bottom: 350px;
    border-bottom: 1px solid #00A0E9;
}
#aboutSection p {
    margin: 20px 0;
}
#aboutSection > a img {
    width: 131px;
}

/* workaround for google search */
#movieSection,
#organizationSection {
    padding-top: 15px;
}

#movieSection h2 {
    color: #00A0E9;
    font-weight: normal;
    margin: 10px auto;
}
#movieSection a#aboutMovieAll,
#movieSection .aboutMovie > figure > a {
    display: block;
    width: 100%;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    text-align: center;
}
#movieSection a#aboutMovieAll{
    margin: 30px 0;
    padding: 50px 0;
    background-image: url(../images/misc/about_movie_back.jpg);
}
#aboutMovie01 >figure > a {
    padding: 50px 0;
    background-image: url(../images/misc/about_movie1_back.jpg);
}
#aboutMovie02 >figure > a {
    padding: 50px 0;
    background-image: url(../images/misc/about_movie2_back.jpg);
}
#movieSection .aboutMovie {
    margin-bottom: 30px;
}
#movieSection .aboutMovie p {
    margin-bottom: 20px;
}
#movieSection .aboutMovie h3 {
    font-size: 85.7%;
    line-height: 1.35;
    font-weight: bold;
}
#movieSection #aboutWorkBtns {
    margin: 20px 0 50px;
    letter-spacing: -0.4em;
}
#aboutWorkBtns > li {
    display: inline-block;
    vertical-align: top;
    letter-spacing: normal;
    width: 30%;
    margin: 1%;
}
#aboutWorkBtns > li img {
    width: 100%;
}
#organizationSection table {
    margin: 10px 0 40px;
    border: 1px solid #c9caca;
    font-size: 71.43%;
}
#organizationSection table th,
#organizationSection table td {
    border: 1px solid #c9caca;
    vertical-align: top;
    padding: 10px;
}
#organizationSection table th {
    width: 75px;
}
#organizationSection table > caption {
    text-align: left;
    margin-bottom: 0.5em;
}
#organizationSection table td ul {
    margin: 10px 0;
}
#organizationSection table td ul li {
    margin: 7px 0;
}
#organizationSection table td ul li:before {
    content: '・';
}


/* System
================================================== */
#benefitsSection,
#developSection,
#examSection,
#faqSection,
#systemSection {
    margin: 40px auto 50px;
}
#developSection h2,
#systemSection h2 {
    margin: 40px 0 20px;
    color: #00A0E9;
    font-weight: normal;
}
#developSection h2.bline,
#systemSection h2.bline {
    padding: 2px;
    border-bottom: 1px solid #231815;
}
#developSection > img {
    width: 100%;
    margin-bottom: 20px;
}

#developSection .blackBox,
#systemSection .blackBox {
    margin: 20px 0 40px;
    padding-bottom: 20px;
    border: 1px solid #231815;
    text-align: center;
}
#developSection .blackBox h3,
#systemSection .blackBox h3 {
    padding: 5px 20px;
    text-align: left;
    background-color: #73cfef;
    font-weight: normal;
    letter-spacing: .2em;
    margin-bottom: 20px;
}
#developSection .blackBox .systemShikakuList {
    text-align: left;
}
#systemSection .blackBox > p {
    text-align: left;
    margin: 1em;
}
#systemSection .blackBox img {
    width: 95%;
}
#systemSection .blueRBox {
    text-align: left;
    margin: 10px;
    padding: 10px;
    border: 1px solid #00a0e9;
    border-radius: 15px;
}
#systemSection .blueRBox > h4 {
    color: #00a0e9;
    font-weight: normal;
    font-size: 85.7%;
    line-height: 1.35;
}
#systemSection .innerContents {
    margin: 20px 0;
}
#systemSection .innerContents  h3 {
    color: #00a0e9;
    font-weight: normal;
}
#systemSection .innerContents .text_photo > figure img {
    width: 100%;
}


/* Benefits
================================================== */
#benefitsSection {
    margin: 40px auto 50px;
}
#benefitsSection dl {
}
#benefitsSection dl dt,
#benefitsSection dl dd {
}
#benefitsSection dl dt {
    color: #00a0e9;
}
#benefitsSection dl dd {
    font-size: 85.7%;
    line-height: 1.35;
    padding-top: 3px;
    margin-bottom: 1em;
}
#SalaryTable {
    
}
#SalaryTable th,
#SalaryTable td{
    border: 1px solid #231815;
    width: 48%;
    padding: 10px 5px;
    font-size: 83.3%;;
}
#SalaryTable th{
    background-color: #73cfef;
    font-weight: normal;
    vertical-align: top;
}
#SalaryTable td{
    background-color: #fffcdb;
}
#SalaryTable thead th {
    background-color: #e7e0a0;
}
#benefitsSection dl dd p.caution {
    text-align: right;
    font-size: 85.7%;;
    line-height: 1.35;
}
#benefitsSection dl dd ul p {
    font-size: 100%;
}


/* Exam
================================================== */
#examSection h2.bback {
    margin: 40px 0 20px;
    padding-left: 1em;
    border-top: 1px solid #00a0e9;
    background: url(../images/misc/exam_titleback.png) no-repeat left top;
    background-size: auto 25px;
    font-weight: normal;
    color: #FFF;
}
#examSection h3.iconHeading {
    width: 114px;
    margin: 20px 0 20px 30px;
    border: 1px solid #00a0e9;
    border-width: 1px 0;
    color: #00a0e9;
    text-align: center;
    font-weight: normal;
    position: relative;
}
.iconHeading:before {
    content: " ";
    display: block;
    background: url(../images/misc/exam_icon_date.png) no-repeat center center;
    background-size: 22px;
    width: 22px;
    height: 22px;
    position: absolute;
    top: 1px;
    left: -30px;
    line-height: 0;
}
#examDate:before {
    background-image: url(../images/misc/exam_icon_date.png);
}
#examExam:before {
    background-image: url(../images/misc/exam_icon_exam.png);
}
#examMail:before {
    background-image: url(../images/misc/exam_icon_mail.png);
}
#faqSection .examlinks,
#examSection .examlinks {
    margin: 10px 0 40px;
    text-align: left;
}
#faqSection .examlinks > li,
#examSection .examlinks > li {
    margin-bottom: 0.3em;
    padding-left: 8px;
    position: relative;
    font-size: 85.7%;
    line-height: 1.35;
}
#faqSection .examlinks > li:before,
#examSection .examlinks > li:before {
    content: "";
    display: block;
    width: 4px;
    height: 8px;
    position: absolute;
    top: 7px;
    left: 0;
    background: url(../images/misc/exam_icon_link.png) no-repeat left center;
    background-size: 4px 8px;
}
#examSection #examLinkBtnList  {
    margin: 30px 0 40px;
}
#examSection #examLinkBtnList > li {
    display: inline-block;
    margin: 0 5px 5px 0;
    width: 136px;
}
#examSection #examLinkBtnList > li img {
    width: 100%;
}
#examSection #examTeacher {
    margin: 40px 0 20px;
    padding: 30px 0 0;
    border-top: 1px solid #00a0e9;
    color: #00a0e9;
    font-weight: normal;
}


/* Faq
================================================== */
#faqSection > h1,
#faqSection > p {
    width: 90%;
    margin: auto;
}
#faqSection > h1 {
    margin: 40px auto 20px;
}
#faqList {
    margin: 50px 0;
}
#faqList > li > h2 {
    height: 45px;
    padding: 0 40px 0 40px;
    margin-bottom: 1px;    
    background-color: #cdf0fc;  
    font-weight: normal;
    font-size: 85.7%;;
    line-height: 22px;
    position: relative;
}
#faqList > li > h2:after {    
    content: "";
    width: 22px;
    height: 22px;
    position: absolute;
    top: 12px;
    right: 10px;
    background: url(../images/misc/faq_open_arrow.png) no-repeat center center;
    background-size: 22px;
}
#faqList > li > h2.open:after {    
    transform: rotate(90deg);
    -webkit-transform: rotate(90deg);
}
#faqList > li > h2 > span {
    position: absolute;
    top: 0;
    left: 0;
    background-color: #00a0e9;
    color: #FFF;
    font-weight: bold;
    width: 35px;
    height: 45px;
    text-align: center;
    line-height: 44px;
}
#faqList .faqAnswer {
    display: none;
    margin: 10px 20px 30px;
}
#faqList p.faqAnsNo {
    float: left;
    border: 1px solid #00a0e9;
    color: #00a0e9;
    text-align: center;
    font-weight: bold;
    width: 35px;
    height: 35px;
    line-height: 35px;
}
#faqList .rightArea {
    float: right;
/*    width: 230px;*/
    width: 85%;
}
#faqList .rightArea > p {
    margin-bottom: 1em;
}
p > span.blue {
    color: #00a0e9;
}
#faqList img.faqQ3img {
    width: 100%;
}
#faqList > li.q5 h3 {
    color: #00a0e9;
    font-weight: normal;
}
#faqSection .examlinks {
    margin-bottom: 20px;
}


@media screen and (min-width: 768px) {
    /* Common
    ================================================== */
    #mainContents a:hover {
        color: #06E;
    }
    .horizontal {
        letter-spacing: -0.4em;
        text-align: center;
    }
    .horizontal > li {
        display: inline-block;
        letter-spacing: normal;
        vertical-align: top;
    }
    #mainContents p {
        font-size: 114.2%;
        line-height: 1.5;
    }
    figure {
        margin: 0;
    }
    span.nl,
    figcaption > span {
        display: inline;
    }

    #mainContents .btnBox p {
        font-size: 128.5%;
    }

    .photo_text  > img,
    .photo_photo  > img,
    .text_photo  > img {
        margin: 0;
    }
    .text_photo > img,
    .photo_photo > img,
    .photo_photo > figure,
    .text_photo > figure {
        float: right;
    }
    .photo_text > img,
    .photo_photo > img:first-child,
    .photo_photo > figure:first-child,
    .photo_text > figure {
        float: left;
    }
    .photo_text > .rightArea {
        float: right;
    }
    .text_photo > .leftArea {
        float: left;
    }
    .text_photo:after,
    .photo_text:after {
        content: "";
        display: block;
        clear: both;
    }
    .ls-1 {
        letter-spacing: -1px;
    }
    /* Layout
    ================================================== */
    .ContentsWrap {
        width: 1000px;
        margin-left: auto;
        margin-right: auto;
    }
    #mainContents {
    }
    article {
        float: right;
        width: 765px;
        padding-left: 35px;
        border-left: 1px solid #00A0E9;
    }
    article section {
        width: auto;
    }
    article section h1 {
        font-size: 242.8%;
        line-height: 1.17;
    }
    aside {
        float: left;
        width: 180px;
        padding-right: 19px;
        font-size: 100%;
    }
    .ContentsWrap.top article {
        float: left;
        border-left: none;
        width: 744px;
        padding-left: 0;
        padding-right: 25px;
    }
    .ContentsWrap.top aside {
        float: right;
        width: 212px;
        border-left: 1px solid #00A0E9;
        padding-right: 0;
        padding-left: 18px;
    }

    
    /* HeadVisual
    ================================================== */
    section.mainvisual {
    }
    #projectVisual {
        background-image: url(../images/project/project_back.jpg);
        height: 142px;
    }
    #projectVisual.top {
        height: 302px;
    }
    #workVisual {
        background-image: url(../images/work/work_back.jpg);
        height: 142px;
    }
    #workVisual.top {
        background-image: url(../images/work/worktop_back.jpg);
        height: 302px;
        position: relative;
    }
    #staffVisual {
        background-image: url(../images/staff/staff_back.jpg);
        height: 302px;
    }
    #workVisual.top > a {
        display: block;
        position: absolute;
        background: rgb(255, 255, 255);
        background: rgba(255, 255, 255, 0.9);
        right: 100px;
        bottom: 35px;
        padding: 9px 20px;
    }
    #workVisual.top > a:hover {
        filter: alpha(opacity=85);
        opacity: 0.85;
    }
    #miscVisual {
        height: 142px;
        background-image: url(../images/misc_back.jpg);
    }
    
    /* Global Navigation
    ================================================== */
    #GMenu h2 {
        display: none;
    }
    #CTNav {
        display: block;
    }
    #CTNav > li {
        width: 97px;
        height: 19px;
        padding: 9px 1px 9px 2px;
        margin: 12px 0 10px;
        background: url(../images/menu_line.png) no-repeat left center;
        border: none;
    }
    #CTNav > li:first-child {
        background: none;
    }
    #CTNav > li a {
        color: #00A0E9;
    }
    #CTNav > li a:hover {
        text-decoration: underline;
    }
    #CTNav > li.twolines {
        height: 37px;
        padding: 0px 1px 0px 2px;
    }
    #CTNav > li.threelines {
        height: 43px;
        padding: 0px 1px 0px 2px;
        line-height: 1.1;
    }
    #CTNav > li.sm {
        font-size: 92.857%
    }
    #CTNav > li i {
        display: none;
    }
    #CTNav > li span {
        display: block;
    }
    #CTNav > li:after {
        content: '';
    }
    #CTNav .CTsubNav > li {
        display: none;
    }
    /* Aside
    ================================================== */
    #sideNav {
        margin-bottom: 50px;
    }
    .top #sideNav {
        margin-top: 25px;
    }
    #sideNav > li {
        padding: 20px 0;
    }
    #sideNav > li a {
        text-decoration: none;
    }
    #sideNav > li a:hover {
        text-decoration: underline;
    }

    /* Top(PC)
    ================================================== */
    .mainSlider {
        min-width: 770px;
    }
    #mainMessage {
        width: 593px;
    }
    #topBtns > li {
        width: 231px;
        height: 145px;
        margin: 0 0 25px 25px;
    }
    #topBtns > li:first-child {
        margin-left: 0;
    }
    #topBtns > li a {
        height: 100px;
        padding-top: 45px;
    }
    #topBtns > li .btnBox {
        width: 195px;
        padding-top: 10px;
        padding-bottom: 10px;
    }
    #topBtns > li .btnBox.line1 {
        padding-top: 17px;
        padding-bottom: 17px;
    }
    #projBtn {
        background: url(../images/top/btn_back1.jpg) no-repeat center center;
    }
    #workBtn {
        background: url(../images/top/btn_back2.jpg) no-repeat center center;
    }
    #techBtn {
        background: url(../images/top/btn_back3.jpg) no-repeat center center;
    }
    /* carousel */
    #topMessages .bx-wrapper .bx-controls-direction a {
        width: 12px;
        height: 22px;
        text-indent: -6em;
        overflow: hidden;
        white-space: nowrap;
    }
    #topMessages .bx-wrapper .bx-prev {
        left: -35px;
        background: url(../images/top/carouselcontrol.png) no-repeat 0 0;
    }
    #topMessages .bx-wrapper .bx-prev:hover {
        background-position: 0 -22px;
    }
    #topMessages .bx-wrapper .bx-next {
        right: -35px;
        background: url(../images/top/carouselcontrol.png) no-repeat -12px 0;
    }
    #topMessages .bx-wrapper .bx-next:hover {
        background-position: -12px -22px;
    }
    /* news */
    #topNews {
        width: auto;
        border: 7px solid #00A0E9;
        border-radius: 5px;
        padding: 0 10px 10px;
        text-align: left;
    }
    #topNews dl {
        height: 100px;
        padding: 0 20px;
    }
    #topNews dl dt {
        float: left;
        clear: left;
        width: 7em;
    }
    #topNews dl dd {
        margin: 0 0 0 7em;
        padding-bottom: 0px;
        border: none;
    }
    #topBtns2 > li {
        width: 231px;
        height: 145px;
        margin-left: 25px;
    }
    #topBtns2 > li:first-child {
        margin-left: 0;
    }
    #topBtns2 > li a {
        height: 100px;
        padding-top: 45px;
    }
    #topBtns2 > li .btnBox {
        width: 194px;
        padding-top: 10px;
        padding-bottom: 10px;
    }
    #topBtns2 > li .btnBox.line2 {
        padding-top: 6px;
        padding-bottom: 6px;
    }
    #staffBtn {
        background: url(../images/top/btn2_back1.jpg) no-repeat center center;
    }
    #zadankaiBtn {
        background: url(../images/top/btn2_back2.jpg) no-repeat center center;
    }
    #careerzadankaiBtn {
        background: url(../images/top/btn2_back3.jpg) no-repeat center center;
    }
    /* aside */
    aside .asideBtn {
        width: 212px;
        height: 120px;
        margin: 0 0 20px;
    }
    aside #topMovie {
        background: url(../images/top/top_movieback.jpg) no-repeat center center;
        background-size: cover;
    }
    aside #topCareerBtn {
        background: url(../images/top/top_careerback.jpg) no-repeat center center;
        background-size: cover;
    }
    aside .asideBtn a {
        height: 79px;
        padding: 21px 0;
    }
    aside .asideBtn .btnBox {
        width: 145px;
        padding: 10px 0;
    }
    aside .asideBtn .btnBox p {
        color: #FFF;
    }

    
    /* Message
    ================================================== */
    #messageSection,
    #talentimageSection {
        width: 765px;
    }
    #messageSection .photo_text > img {
        width: 166px;
    }
    #messageSection .photo_text > .rightArea {
        width: 536px;
    }
    #message_talent_image {
        float: left;
        width: 433px;
    }
    #message_talent_image2 {
        float: right;
        width: 257px;
    }
    

    /* project
    ================================================== */
    /* project top */
    article#proj_top,
    article#work_top,
    article#staff_top {
        width: 765px;
        text-align: center;
    }
    article#proj_top .titleBox > h1,
    article#work_top .titleBox > h1,
    article#staff_top .titleBox > h1 {
        color: #00A0E9;
        font-weight: normal;
        font-size: 257.1%;
        line-height: 1.3;        
    }
    #projLists > li {
        margin: 6px 6px 40px;
        width: 242px;
    }
    #projLists .projBtnImg {
        height: 184px;
    }

    /* project content */
    article.proj {
        width: 700px;
        padding-right: 55px;
    }
    article.proj > h1 {
        padding: 13px 0 12px 120px;
        font-size: 287.5%;
        background-size: 93px;
    }
    article.proj > h2 {
        font-size: 212.5%;
        line-height: 1.35;
        font-weight: normal;
    }
    article.proj > h3 {
        font-size: 178.5%;
        line-height: 1.48;
    }
    #mainContents article.proj p.smalltext {
        font-size: 78.57%;
    }
    #mainContents section.projArea p.another {
        font-size: 100%;
    }
    #proj01_h3desc .leftArea {
        width: 310px;
    }
    #proj01_h3desc > img {
        width: 324px;
    }
    section.projConclusion > h1,
    section.projArea > h1,
    section.projArea > h2 {
        font-weight: normal;
        font-size: 178.5%;
        line-height: 1.48;
    }
    #proj01_case01 > img {
        width: 410px;
    }
    #proj01_case01 > .rightArea {
        margin-top: 20px;
        width: 280px;
    }
    #proj01_case02 > figure > img {
        width: 363px;
    }
    #proj01_case02 > .leftArea {
        width: 308px;
    }
    #proj01_case03 > figure > img {
        width: 366px;
    }
    #proj01_case03 > .rightArea {
        width: 308px;
    }
    #proj02_case03 {
        position: relative;
        padding-bottom: 60px;
    }
    #proj02_case03 .rightArea {
        position: absolute;
        top: 270px;
    }
    #proj02_case03 > figure > img {
        width: 350px;
        vertical-align: middle;
    }
    #proj02_case03 > figure > img:first-child {
        width: 330px;
    }
    #proj02_case04 > .leftArea {
        width: 212px;
    }
    #proj02_case04 > figure > img {
        width: 472px;
    }
    #proj02_case05 > figure > img {
        width: 300px;
    }
    #proj03_case01 > .rightArea {
        width: 323px;
    }
    #proj03_case01 > figure {
        width: 343px;
    }
    section.projConclusion > h1 {
        font-weight: bold;
    }


    /* Work
    ================================================== */
    /* work top */
    #workLists {
        margin: 40px auto;
    }
    #workLists > li {
        width: 175px;
        margin: 0 8px 24px;
    }
    section#tech > section {
        margin: 20px 40px;
    }
    section#techOverview > h2 {
        font-size: 242.85%;
        line-height: 1.4;
        font-weight: normal;
    }
    section#techOverview a:hover {
        filter: alpha(opacity=80);
        opacity: 0.8;
    }
    section#techOverview > h3 {
        font-size: 178.57%;
        line-height: 1.44;
    }
    section#techOverview > h3 > span {
        font-size: 64%;
    }
    section#techOverview > ul.circleTop {
        font-size: 114.2%;
        line-height: 1.5;
    }
    section#techPickup {
        padding: 40px;
    }
    section#techPickup > h1 {
        font-size: 100%;
    }
    section#techPickup > h2 {
        font-size: 142.85%;
        line-height: 1.8;
    }
    section#techPickup > h3 {
        font-size: 178.57%;
        line-height: 1.44;
    }
    ul#techPickupList >li {
        padding-left: 70px;
        background-size: 48px;
    }
    ul#techPickupList >li > h4,
    section#techPickup > h4 {
        font-size: 114.2%;
        line-height: 1.5;
        margin: 10px 0;
    }
    ul#techPickupList >li > figure {
        display: inline-block;
        vertical-align: top;
        margin-right: 5px;
        width: 143px;
    }
    ul#techPickupList >li > figure.short {
        width: 133px;
    }
    ul#techPickupList >li > figure.long {
        width: 219px;
    }
    ul#techPickupList >li > figure > img {
        height: 92px;
    }
    section#techPickup > h4 {
        margin-top: 30px;
    }
    dl#worktop_kenshuList dt,
    dl#worktop_kenshuList dd {
        float: left;
    }
    ul.worktop_shikakuList {
        display: inline-block;
        vertical-align: top;
        width: 32%;
    }
    ul.worktop_shikakuList.long {
        width: 37%;
    }
    ul.worktop_shikakuList.short {
        width: 27%;
    }

    /* work contents */
    article.work,
    article.staff {
        width: 761px;
    }
    #mainContents article.work .workTitle p.shoulder {
        font-size: 128.57%;
        line-height: 1.75;
        width: 113px;
        height: 32px;
        padding: 40px 0;
    }
    #mainContents article#work11 .workTitle p.shoulder {
        display: none;
    }
    article.work .workTitle h1 {
        padding: 11px 0 2px 140px;
        font-size: 287.5%;
        line-height: 1.3;
    }
    article#work11 .workTitle h1 {
        padding-left: 0;
    }
    article#work10.work .workTitle h1 {
        font-size: 257.14%;
    }
    article.work .workTitle img {
        margin-left: 65px;
        width: 691px;
    }
    article#work07 .workTitle .workTitleImages {
    }
    article#work07 .workTitle .workTitleImages figure {
        float: left;
        width: 346px;
        margin-left: 65px;
    }
    article#work07 .workTitle .workTitleImages figure > img {
        width: 100%;
    }
    article#work07 .workTitle .workTitleImages figure.right {
        position: relative;
        margin-top: 271px;
        margin-left: 0;
    }
    article#work07 .workTitle .workTitleImages figure.right figcaption {
        position: absolute;
        right: 0;
        top: -25px;
        text-align: right;
    }
    article#work07 .workTitle .workTitleImages figure img {
        margin-left: 0;
    }
    article.work section.overview h1 {
        font-size: 242.8%;
    }
    article.work section.overview h2 {
        font-size: 178.57%;
        line-height: 1.44;
    }
    article.work section.overview .workPickup .leftArea {
        float: left;
        width: 500px;
        margin-left: 20px;
    }
    article.work section.overview .workPickup > .rightArea {
        float: right;
        width: 184px;
    }
    article.work section.overview .workPickup > .rightArea.onefigure  {
        padding-top: 100px;
    }
    article.work section.overview .workPickup > .rightArea figure {
        width: 100%;
        display: block;
        margin: 0;
    }

    section.interview > h1 {
        font-size: 114.28%;
    }
    .workMovie > figure > a{
        width: 394px;
        height: 221px;
    }
    .workMovie > figure > a > img {
        margin: 78px 144px;
        width: 104px;
    }
    .workMovie > figure > a:hover {
        filter: alpha(opacity=80);
        opacity: 0.8;
    }
    .workMovie > .rightArea {
        width: 345px;
    }
    
    #workProf > .leftArea {
        width: 492px;
    }
    #workProf > .leftArea > img {
        width: 152px;
        margin-right: 10px;
    }
    #workProf > .leftArea > .rightArea {
        width: 317px;
    }
    #workProf > .leftArea > .rightArea p.shoulder {
        font-size: 78.57%;
        line-height: 1.54;
    }
    #workProf > .leftArea > .rightArea h2 {
        font-size: 178.57%;
        line-height: 1.44;
    }
    #workProf > .leftArea > .rightArea p > span {
        display: inline;
    }
    #workProf > .leftArea > .rightArea h2 > span {
        display: inline;
        padding-left: 1em;
        font-size: 44%;
        line-height: 1.9;
    }
    #workProf > img {
        width: 258px;
    }
    #work03 #workProf > img {
        width: 214px;
    }

    h3#workSchedule {
        font-size: 178.57%;
        line-height: 1.44;
    }
    h3#workSchedule + img {
        padding-left: 30px;
        width: 705px;
    }
    section.interview .workDetail > .leftArea,
    section.interview .workDetail > .rightArea {
        width: 451px;
    }
    section.interview .workDetail h3 {
        font-size: 178.57%;
        line-height: 1.44;
    }
    section.interview .workDetail > img {
        width: 284px;
    }


    /* Staff
    ================================================== */
    /* Staff top */
    #staffLists > li {
        margin: 6px 9px 40px;
        width: 173px;
        height: 310px;
    }
    #staffLists > li.doubleBox {
        position: relative;
        width: 364px;
    }
    #staffLists > li:first-child {
        display: inline-block;
        width: 556px;
    }
    #staffLists > li:nth-child(2n) {
        margin-left: 9px;
    }
    #staffLists >li a:hover img {
        filter: alpha(opacity=80);
        opacity: 0.8;
    }
    #staffLists >li .staffBtnImg {
        height: 182px;
    }
    #staffLists #staffBtnZ {
        height: 218px;
    }
    #staffLists p.stafftopBelongto,
    #staffLists p.stafftopShouder,
    #staffLists p.stafftopDesc {
        text-align: left;
        font-size: 78.57%;
    }
    #staffLists p.stafftopBelongto span {
        display: inline;
    }
    article#staff_top p.caution {
        font-size: 78.57%;
    }

    /* Staff content */
    #mainContents article.staff .staffTitle > p.shoulder {
        width: 116px;
    }
    #mainContents article.staff .staffTitle > p.staffbelong {
        padding: 0 0 0 140px;
        font-size: 100%;
    }
    #mainContents article.staff .staffTitle > p.staffbelong > span {
        display: inline;
    }
    article.staff .staffTitle > h1 {
        padding: 0 0 0 140px;
        font-size: 242.85%;
        line-height: 1.41;
    }
    article.staff .staffTitle > img {
        margin-left: 67px;
        width: 691px;
    }
    #staffProf  {
        margin: 50px 0 60px;
    }
    #staffProf > img {
        width: 152px;
    }
    #staffProf > .rightArea {
        float: left;
        width: 300px;
        margin-top: 20px;
        margin-left: 20px;
    }
    #staffProf > .rightArea p.shoulder {
        font-size: 78.57%;
        line-height: 1.54;
    }
    #staffProf > .rightArea h2 {
        font-size: 178.57%;
        line-height: 1.44;
    }
    #staffProf  > .rightArea p > span {
        display: inline;
    }
    #staffProf > .rightArea h2 > span {
        display: inline;
        padding-left: 1em;
        font-size: 44%;
        line-height: 1.9;
    }
    article.staff .staffHistory  {
        margin: 60px 0;
    }
    article.staff .staffHistory > h3 {
        font-size: 178.57%;
        line-height: 1.44;        
    }
    article.staff .staffHistory > img {
        width: 471px;
    }

    /* Staff zadankai */
    article#staffZ .staffTitle > h1 {
        padding-bottom: 10px;
    }
    #zandanProfList > li {
        width: 320px;
        margin: 10px 30px;
    }
    #zandanProfList > li > img {
        padding-top: 0;
        margin-bottom: 3.5em; /* for h3 tag. */
        width: 115px;
    }
    #zandanProfList > li .rightArea {
        width: 190px;
    }
    #zandanProfList > li .rightArea h3 {
        position: absolute;
        left: 0;
        top: 120px;
        width: 115px;
        font-size: 128.57%;
        text-align: center;
    }
    #zandanProfList > li .rightArea h3 span {
        display: block;
        padding-left: 0;
        font-size: 75%;
    }
    #zandanProfList > li .rightArea p {
        font-size: 85.7%;
    }
    article#staffZ section.interview > h1 {
        font-weight: normal;
        font-size: 242.85%;
        line-height: 1.4;
    }
    article#staffZ section.interview > h2 {
        font-size: 178.57%;
        line-height: 1.17;
    }
    article#staffZ .zadanDetail > img,
    article#staffZ .zadanDetail2 > img,
    article#staffZ .zadanDetail3 > img {
        width: 400px;
    }
    article#staffZ #staffZ_int02 > img {
        width: 355px;
    }
    article#staffZ #staffZ_int02 > .rightArea {
        width: 374px;
    }
    article#staffZ #staffZ_int03 > img {
        width: 291px;
    }
    
    article#staffZ .zadanDetail > .leftArea,
    article#staffZ .zadanDetail > .rightArea {
        width: 334px;
        line-height: 1.5;
    }
    article#staffZ .zadanDetail2 > img {
        float: right;
        display: block;
        margin: 0 0 10px 20px;
    }
    article#staffZ .zadanDetail3 > img {
        float: left;
        display: block;
        margin: 0 20px 10px 0;
    }


    /* Career
    ================================================== */
    #staffLists #careerBtnZ {
        height: 218px;
    }
    #staffLists #careerAddInfo {
        position: absolute;
        bottom: 0;
        left: 0;
        font-size: 100%;
    }

    #careerOverview p {
        font-size: 114.28%;
        line-height: 1.4;
    }
    #careerOverview h1 {
    }
    #careerOverview h2 {
        font-size: 178.57%;
        line-height: 1.4;
        font-weight: normal;
    }
    #careerOverview dl.salary > dt {
        float: left;
        clear: left;
        width: 180px;
    }
    #careerOverview dl.salary > dd {
        float: left;
        width: 585px;
        padding-top: 2em;
        font-size: 100%;
        line-height: 2.8;
    }
    #careerOverview dl.salary > dd > dl > dt {
        float: left;
        width: 6em;
        clear: left;
    }
    #careerOverview dl.salary > dd > dl > dd {
        float: left;
        margin: 0;
    }
    #careerOverview ul.salaryCaution > li {
        font-size: 100%;
        line-height: 1.8;        
    }
    /* career Zadan */
    article#staffZ #careerZ_int01 > img {
        width: 373px;
    }
    article#staffZ #careerZ_int02 > img {
        width: 301px;
    }
    article#staffZ #careerZ_int03 > img {
        width: 231px;
    }
    article#staffZ #careerZ_int04 > img {
        width: 336px;
    }
    article#staffZ #careerZ_int05 > img {
        width: 348px;
    }
    article#staffZ #careerZ_int06 > img {
        width: 259px;
    }
    article#staffZ #careerZ_int07 > img {
        width: 296px;
    }
    article#staffZ #careerZ_int08 > img {
        width: 322px;
    }
    article#staffZ #careerZ_int09 > img {
        width: 371px;
    }
    article#staffZ #careerZ_int01 > .leftArea {
        width: 357px;
    }
    article#staffZ #careerZ_int02 > .rightArea {
        width: 430px;
    }
    article#staffZ #careerZ_int03 > .leftArea {
        width: 500px;
    }
    article#staffZ #careerZ_int04 > .rightArea {
        width: 395px;
    }
    article#staffZ #careerZ_int05 > .leftArea {
        width: 383px;
    }
    article#staffZ #careerZ_int06 > .leftArea {
        width: 475px;
    }
    article#staffZ #careerZ_int07 > .rightArea {
        width: 435px;
    }
    article#staffZ #careerZ_int08 > .leftArea {
        width: 410px;
    }
    article#staffZ #careerZ_int09 > .leftArea {
        width: 360px;
    }

    /* About
    ================================================== */
    #aboutSection,
    #movieSection,
    #organizationSection {
        width: 761px;
    }
    #aboutSection {
        background-position: right 40px;
        background-size: 423px auto;
        padding-bottom: 40px;
    }
    #aboutSection > p {
        width: 378px;
        margin: 20px 0;
    }
    #aboutSection > p.desc {
        margin-bottom: 100px;
    }
    #aboutSection > a img {
        width: 262px;
    }
    #movieSection a#aboutMovieAll {
        margin: 40px 0;
        height: 67px;
        padding: 183px 0;
    }
    #movieSection a:hover {
        filter: alpha(opacity=80);
        opacity: 0.8;
    }
    #movieSection h2 {
        font-size: 178.57%;
        line-height: 1.4;
    }
    #movieSection .aboutMovie h3 {
        font-size: 114.2%;
        line-height: 1.5;
    }
    #movieSection .aboutMovie > figure {
        width: 210px;
    }
    #movieSection .aboutMovie > figure > a {
        padding: 43px 0;
    }
    #movieSection .aboutMovie > figure > a > img {
        width: 52px;
    }
    
    #movieSection .aboutMovie > .rightArea {
        width: 530px;
    }
    #movieSection .aboutMovie p.conclusion {
        margin-top: 40px;
    }
    #aboutWorkBtns > li {
        width: 116px;
        margin: 5px;
    }
    #organizationSection table {
        margin-left: 30px;
        font-size: 114.28%;
    }
    #organizationSection table th {
        width: 180px;
    }


    /* System
    ================================================== */
    #faqSection,
    #examSection,
    #benefitsSection,
    #developSection,
    #systemSection {
        width: 764px;
    }
    #developSection h2,
    #systemSection h2 {
        font-size: 142.85%;
        line-height: 1.2;
    }
    #developSection .blackBox h3,
    #systemSection .blackBox h3 {
        font-size: 114.28%;
    }
    #developSection > img {
        margin-bottom: 40px;
    }
    #developSection .blackBox .systemShikakuList {
        display: inline-block;
        vertical-align: top;
        margin: 0 10px;
        font-size: 114.28%;
    }
    #systemSection .blackBox img {
        width: 602px;
    }
    #systemSection .blueRBox {
        margin: 10px 20px;
        padding: 10px 20px;
    }
    #systemSection .blueRBox > h4 {
        font-size: 114.28%;
        line-height: 1.7;
    }
    #systemSection .blueRBox > p {
        font-size: 100%;
        line-height: 1.7;
    }
    #systemSection .innerContents {
        margin: 40px 0 40px 40px;
    }
    #systemSection .innerContents h3 {
        font-size: 142.85%;
        line-height: 1.7;
    }
    #systemSection .innerContents .text_photo > .leftArea {
        width: 478px;
    }
    #systemSection .innerContents .text_photo > figure {
        width: 227px;
    }

    
    /* Benefits
    ================================================== */
    #benefitsSection dl dt,
    #benefitsSection dl dd {
        float: left;
    }
    
    #benefitsSection dl dt {
        clear: left;
        width: 105px;
        font-size: 142.85%;
        line-height: 1.7;
        margin-bottom: 1em;
    }
    #benefitsSection dl dd {
        width: 645px;
        font-size: 114.28%;
        line-height: 1.7;
    }
    #SalaryTable th,
    #SalaryTable td{
        padding: 10px 20px;
        font-size: 100%;
    }

    #benefitsSection dl dd p.caution {
        margin-right: 130px;
    }


    /* Exam
    ================================================== */
    #examSection h2.bback {
        font-size: 142.85%;
        line-height: 1.71;
        background-size: auto 35px;
    }
    #examSection h3.iconHeading {
        width: 215px;
        margin: 20px 0 20px 50px;
        font-size: 178.57%;
        line-height: 1.7;
    }
    .iconHeading:before {
        width: 40px;
        height: 40px;
        left: -50px;
    }
    #faqSection .examlinks > li,
    #examSection .examlinks > li {
        padding-left: 12px;
        font-size: 114.28%;
        line-height: 1.5;        
    }
    #faqSection .examlinks.horizontal > li,
    #examSection .examlinks.horizontal > li {
        width: 270px;
    }
    #faqSection .examlinks > li:before,
    #examSection .examlinks > li:before {
        width: 8px;
        height: 15px;
        background-size: 8px 15px;
        top: 5px;
    }
    #examSection #examLinkBtnList > li {
        margin: 0 10px 10px 0;
        width: 272px;
    }
    #examSection #examLinkBtnList a:hover {
        filter: alpha(opacity=80);
        opacity: 0.8;
    }
    #examSection #examTeacher {
        font-size: 178.57%;
        line-height: 1.7;
    }


    /* Faq
    ================================================== */
    #faqSection > h1,
    #faqSection > p {
        width: auto;
        margin: auto;
    }
    #faqSection > h1 {
        margin: 40px auto 30px;
    }
    #faqList > li {
        margin-bottom: 40px;
    }
    #faqList > li > h2 {
        height: 40px;
        padding-left: 55px;
        font-size: 114.28%;
        line-height: 40px;
    }
    #faqList > li > h2 > span {
        width: 42px;
        height: 40px;
        font-size: 112.5%;;
    }
    #faqList > li > h2:after {
        display: none;
    }
    #faqList .faqAnswer {
        display: block;
        margin: 30px 0 50px;
    }
    #faqList p.faqAnsNo {
        width: 40px;
        height: 40px;
        font-size: 128.57%;
        line-height: 40px;
    }
    #faqList .rightArea {
        width: 710px;
    }
    #faqList p.caution {
        font-size: 78.57%;
        text-align: right;
    }
    #faqList img.faqQ3img {
        width: 663px;
    }
    #faqList > li.q5 h3 {
        font-size: 114.28%;
        line-height: 1.14;        
    }
}