@charset "utf-8";

/* CSS Document */


/* ========================================================== Media Queries CSS

　Media Queries

=========================================================== 2015.3*/


/*--------
max-width: 1024px
max-width: 1022px
(min-width: 769px) and (max-width: 950px)
max-width: 950px)
(max-width: 890px)
(max-width: 780px)
(max-width: 773px)
(max-width: 769px)
(max-width: 700px)
(min-width: 680px)
max-width: 640px
(max-width: 414px)
(max-width: 320px)
max-width: 769px max-width: 1023px
max-width: 720px max-width:768px
/*--------*/

@media screen and (max-width: 1220px){
    #darwin .mainImage{
        background: #fff2d4 url(/service/images/darwin_api_BK.png) center/cover no-repeat;
    }
    #minlab .mainImage{
        background: url(/service/images/minlab-image.png) center / cover no-repeat,url(/service/images/minlab_bk.png) center / contain repeat-x;
    }
}

@media screen and (max-width: 1024px) {
    #header {
        width: 100%;
        min-width: 100vw;
        max-width: 100vw;
        height: 100%;
    }

    #footer,
    #contents,
    #commonContents,
    .inner,
    #employment,
    #eventTable,
    #tableType2,
    #tableType1 {
        width: 90%;
    }

    .notCarousel {
        width: 90%;
        height: 336px;
    }

    #topContent .flexslider {
        width: 90%;
    }

    #topContent {
        padding-bottom: 0;
        margin-bottom: 30px;
    }

    #topContent .flexslider li {
        background-size: contain;
    }

    .flex-control-nav {
        bottom: 0;
    }

    #contents #headline li {
        width: 23.5%;
    }

    #contents #siteInfo {
        width: 437px;
    }

    .indexMenu li {
        width: 47.7%;
    }

    .indexMenu a {
        vertical-align: top;
    }

    .introBox li,
    .environmentImage li,
    .environmentImage2 li {
        margin: 0 35px;
    }

    .environmentImage p,
    .environmentImage2 p {
        width: 240px;
        height: 240px;
    }

    #section03 .candidateImage li,
    #section05 .candidateImage li {
        display: inline-block;
        width: 29%;
    }

    #section05 .column {
        margin-right: 27px;
    }

    #titleArea .logoBig {
        height: 85px;
    }

    #titleArea #headline li a {
        font-size: 20px;
    }

    .pageColumn {
        width: 46%;
    }

    #slider img {
        height: 449px;
    }

    /*スムーススクロールのための画像高さ設定*/
    #slider .flex-viewport {
        margin-top: -49px;
    }

    #stepNav ul li a p {
        line-height: 1.5em;
    }

    .messageBox {
        width: 46%;
    }

    .directorPic {
        height: 180px;
    }

    .history dt {
        width: 10em;
    }

    #sloganBox li p {
        width: 324px;
    }

    .skilmap_thamb li {
        width: 22.9%;
    }

    /*design*/
    #designIntro {
        padding-top: 90px;
    }

    .imageBg {
        width: 90%;
    }

    /*Android標準ブラウザ用*/
    .alert {
        position: relative;
        height: 80px;
        width: 100px;
        margin: 0.5em auto 1.5em;
    }

    .alert:before {
        content: "!";
        position: absolute;
        z-index: 2;
        top: 20px;
        left: 0;
        width: 100px;
        text-align: center;
        line-height: 60px;
        font-size: 46px;
        font-weight: bold;
        color: #111;
    }

    .alert:after {
        content: "";
        position: absolute;
        top: 0;
        left: 50%;
        margin-left: -50px;
        z-index: 1;
        border-width: 0 50px 80px;
        border-style: solid;
        border-color: #f9d311 transparent;
        background: transparent;
    }

    .officeEventIndex h2 {
        font-size: 5em;
    }

    #dl_index .articlebox,
    #development .articlebox {
        width: 100%;
        padding-bottom: 0;
    }

    #dl_index .articlewrap {
        width: 45%;
    }

    #dl_index .articlebox .articlewrapInner,
    #development .articlebox .articlewrapInner {
        width: 100%;
    }

    #dl_index .articlebox .articlewrapInner .indexWrap>.indexImage img,
    #development .articlebox .articlewrapInner .indexWrap>.indexImage img {
        width: 100%;
        height: auto;
    }
}

@media screen and (max-width: 1022px) {
    #portItem4 {
        padding-top: 59px;
    }

    #development {
        padding-top: 60px;
    }

    #development .portContent {
        width: auto;
        margin: 0 15px;
        line-height: 1.8em;
    }

    .cnn_fig02 {
        height: auto;
        width: 100%;
    }
}

@media screen and (min-width: 769px) and (max-width: 950px) {

    /*モバイル用メニュー*/
    #mobileMenu {
        display: block !important;
    }

    .contentM {
        display: block !important;
        border-bottom: 1px solid #fff;
        margin-top: 30px;
    }

    .mobileMenu .indexIcon {
        fill: #fff;
        width: 30px;
        height: 30px;
        vertical-align: middle;
    }

    .dropdown>a {
        line-height: 60px;
    }

    #globalNavi .mobileMenu>a:after {
        display: none;
    }

    #mobileMenu {
        position: absolute;
        top: 10px;
        right: 10px;
    }

    #topContent {
        margin-top: 0;
    }

    header.expanded {
        height: 540px !important;
    }

    #headLogo img {
        height: 40px;
    }

    #headLogo a {
        height: 60px;
    }

    #sideNavi {
        display: none;
    }

    #header .pcMenu {
        display: none;
    }

    .mobileMenuButt {
        position: absolute;
        top: 0;
        right: 0;
        z-index: 1;
        height: 60px;
        width: 60px;
    }

    .mobileMenuButt .close {
        display: none;
    }

    header.expanded .mobileMenuButt .close {
        display: inline-block;
    }

    header.expanded .mobileMenuButt .open {
        display: none;
    }
}

@media screen and (max-width: 950px) {
    header {
        position: relative;
        height: 60px;
    }

    #topContent {
        margin-top: 0;
    }

    #commonContents {
        padding-top: 0 !important
    }

    #topContent .flexslider {
        top: 0 !important;
        width: 100%;
    }

    #globalNavi {
        width: 100%;
    }

    .subList .subTrigger {
        padding: 1em 2em;
        color: #fff;
        margin-top: 5px;
    }

    .subList dd {
        padding: 10px;
        color: #fff;
    }

    .subList dd li {
        width: 47% !important;
    }

    .portContent {
        width: 100%;
    }

    .deviceImage {
        width: 100%;
    }

    .port_bkArea,
    #darwin .mainImage,
    #minlab .mainImage {
        height: 350px;
    }
    #darwin .aboutApi{
        flex-direction: column;
        flex-wrap: nowrap;
        align-items: flex-start;
        width: 348px;
        margin: 0 auto 30px;
    }

    #portItem1 {
        padding-top: 60px;
    }

    #recruitWeb.mobileViewheader {
        display: block;
        float: left;
        margin-left: 2em;
    }

    #recruitWeb.pcViewheader {
        display: none;
    }

    .skilmap_thamb li {
        width: 40%;
        margin-bottom: 40px;
    }

    /*service*/
    #designImage .webdesignImage .imageBg6 {
        top: 246px;
    }

    #designImage .webdesignImage .webdesignText {
        right: -26px !important;
    }

    #designImage .mobileappsImage .imageBg4 {
        right: 401px;
    }

    #portItem4 {
        padding-top: 0;
    }

    #portItem4 .portContent {
        height: 380px;
    }

    #portItem4 .port_bkArea img {
        width: 480px;
    }

    #portItem4 .port_Cap {
        margin-top: -30px;
    }

    #development {
        padding-top: 0;
    }

    #dl_index h1.type1,
    #development h1.type1 {
        line-height: 1.3;
        padding-bottom: 15px;
    }
    footer #footer{
        width: 100vw;
    }
}

@media screen and (max-width: 890px) {
    .flexcontent.newsCEOmessage {
        flex-direction: column;
    }

    .newsCEOmessage img {
        width: fit-content;
        height: fit-content;
    }

    #development .portContent {
        padding-bottom: 480px;
    }

    .footNaviHead {
        width: 100%;
    }

    .ai_images li {
        width: 49.3%;
    }

    .circuitImage {
        width: 70%
    }
    #minlab .mainImage{
        height: 320px;
    }
    #wrapInner{
        padding-bottom: 450px;
    }

}

@media screen and (max-width: 780px) {
    #ceomessage {
        width: 100%;
    }

    #dl_index .articlebox,
    #development .articlebox {
        flex-direction: column;
        padding-bottom: 50px;
    }

    #dl_index .articlewrap {
        width: 100%;
    }
    #minlab .mainImage{
        height: 250px;
    }
}

@media screen and (max-width: 773px) {
    #designImage .webdesignImage .imageBg1 {
        left: 184px;
    }

    #designImage .webdesignImage .imageBg2 {
        bottom: -82px;
    }

    #designImage .webdesignImage .webdesignText {
        width: 47%;
    }

    #designImage .webdesignImage .imageBg5 {
        top: 140px;
        left: 44px;
    }

    #designImage .mobileappsImage .imageBg1 {
        right: 176px;
    }

    #portItem3 {
        padding-top: 60px;
    }

    .skillMap {
        margin-bottom: 30px;
        width: 100%;
    }

    .port_linkBox a {
        display: block
    }

    .g_app_btn {
        margin-bottom: 0;
        margin-right: 0;
    }

    #contents #bannerArea ul {
        width: 100%;
    }
}

@media screen and (max-width: 769px) {
    #portItem4 .portContent,
    #darwin .mainImage {
        height: 350px;
    }
    #darwin .apiExp{
        padding: 0 20px;
    }

    #portItem4 .port_Cap {
        margin-top: -20px;
    }
}

@media screen and (min-width: 769px) and (max-width: 1023px) {


    header.expanded {
        height: 150px;
    }

    #headLogo img {
        height: 41px;
    }

    #topContent {
        margin-top: 0;
    }

    #topContent .flexslider {
        top: 60px;
    }

    .pcMenu .dropdownInner {
        padding: 20px;
    }

    #commonContents {
        padding-top: 60px;
    }


    /*オフィス風景内*/
    #commonContents .slides {
        width: 80%;
    }

    #topContent .flexslider .slides li a span {
        bottom: 49px;
    }


    #contents #headline li p {
        letter-spacing: 0.2rem;
        font-size: 0.8em;
    }

    #contents #headline li {
        margin-right: 13px;
    }

    #contents #siteInfo {
        width: 50%;
    }

    #contents #bannerArea {
        width: 40%;
    }

    #contents #bannerArea img {
        width: 100% !important;
        height: auto;
    }

    .indexMenu ul {
        width: 100%;
    }

    .indexMenu li:nth-child(odd) {
        margin-right: 25px;
    }

    .indexMenu a {
        font-size: 0.8em;
    }

    .introBox {
        font-size: .9em;
    }

    .introBox li,
    .environmentImage li,
    .environmentImage2 li {
        margin: 0 !important;
        width: 30%;
    }

    .introBox li:nth-child(2),
    .environmentImage li:nth-child(2),
    .environmentImage2 li:nth-child(2) {
        margin: 0 27px !important;
    }

    #section02 p {
        line-height: 2em;
    }

    #section02 .inner dd.graph1 span {
        width: 66%;
    }

    #section02 {
        height: 660px;
    }

    #section03 .candidateImage li:nth-child(2),
    #section05 .candidateImage li:nth-child(2) {
        margin: 0 38px;
    }

    #section04 h2.type3 {
        width: 65%;
    }

    .environmentImage img,
    .environmentImage2 img {
        width: 100%;
    }

    .environmentImage p,
    .environmentImage2 p {
        width: 210px !important;
        height: 210px !important;
    }

    .environmentImage2 {
        margin-top: -20px;
    }

    #section05 .type2-2 {
        width: 90%;
    }

    #section06 .candidateImage {
        width: 100%;
    }

    #section06 .candidateImage li {
        width: 46% !important;
    }

    #titleArea ul {
        margin-top: 20px;
    }

    #titleArea #headline .hedlineTitle {
        display: block;
    }

    #titleArea #headline li {
        display: inline-block;
        width: 49%;
    }

    #titleArea img {
        height: 200px;
    }

    #titleArea .titleInline {
        margin: 0 30px;
    }

    #ceomessage .messageArea {
        display: block;
        width: 100%;
    }

    .pageColumn {
        width: 100%;
    }

    .trainingContents span {
        width: 33.3%;
    }

    .trainingContents {
        padding: 0.5rem 0 0.5rem 8%;
        width: auto;
    }

    .trainingTable dd {
        padding: 0.8rem;
    }

    #employment {
        width: 100%;
    }

    #stepNav ul li:first-child {
        margin-right: 20px;
    }

    #stepNav ul li a {
        width: 255px;
        height: 180px;
    }

    #stepNav .stepNavExp {
        font-size: 13px;
    }

    #stepNav ul li:first-child p,
    #stepNav ul li:last-child p {
        top: 0;
    }

    .flows li p {
        width: 532px;
    }

    .academicBackground {
        -webkit-column-gap: 63px;
        -moz-column-gap: 63px;
        -ms-column-gap: 63px;
    }

    #tableType1>dd {
        padding: 16px 0 14px 10em;
    }

    .officeEventIndex dt {
        width: 3em !important;
    }

    #slider img {
        height: 401px;
    }

    /*スムーススクロールのための画像高さ設定*/
    #slider .flex-viewport {
        margin-top: 0;
    }

    #eventTable ul li {
        width: 50%;
    }

    #eventTable img {
        height: 155px;
    }

    .contact dt {
        width: 7em !important;
    }

    .mapGoogle iframe {
        width: 450px;
        height: 400px;
    }

    .messageBox {
        width: 45%;
    }

    .partnerList {
        width: 473px;
    }

    #sloganBox {
        width: 90%;
    }

    #sloganBox li p {
        width: 260px;
        font-size: 13px;
    }

    #sloganBox li {
        margin: 0 20px 20px 0;
    }

    #sloganBox p span {
        font-size: 29px;
    }

    .security h2.type1 {
        width: 70%;
    }

    #headLogo a,
    #sideNavi li {
        height: 60px;
    }

    #recruitWeb a {
        margin-top: 10px;
    }

    .googleLink {
        display: none;
    }

    .googleLink_mobile {
        display: block;
    }

    .trainingTable dt {
        width: 8%;
    }

    /*system_integration*/
    .chartImage ul {
        width: 680px;
        margin: 0 auto;
    }

    .chartImage li:nth-child(1) {
        top: -18px;
        left: 70px;
    }

    .chartImage li:nth-child(2) {
        top: 211px;
        right: 184px
    }

    .chartImage li:nth-child(1) a:after {
        width: 35px;
        top: 18px;
    }

    .chartImage li:nth-child(2) a:after {
        width: 53px;
        top: 0px;
        right: 51px;
        -moz-transform: skewY(20deg);
        -webkit-transform: skewY(20deg);
        -o-transform: skewY(20deg);
        -ms-transform: skewY(20deg);
    }

    /*portfolio*/
    #portItem3 {
        padding-top: 60px;
    }
}

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

    #designImage .mobileappsImage .webdesignText {
        margin-left: 2em;
    }

    #designImage .mobileappsImage .imageBg1 {
        right: 167px;
    }

    #ceomessage {
        font-size: 16px;
    }
}

/*max-width: 720px max-width:768px*/
@media screen and (min-width: 720px) and (max-width: 768px) {
    #commonContents {
        padding-top: 60px;
    }

    #mobileMenu {
        display: block !important;
    }

    .contentM {
        display: block !important;
        border-bottom: 1px solid #fff;
        margin-top: 30px;
    }

    .mobileMenu {
        display: block !important;
        ;
    }

    .mobileMenu .indexIcon {
        fill: #fff;
        width: 30px;
        height: 30px;
        vertical-align: middle;
    }

    .dropdown>a {
        line-height: 60px;
    }

    #globalNavi .mobileMenu>a:after {
        display: none;
    }

    #mobileMenu {
        position: absolute;
        top: 10px;
        right: 10px;
    }

    #topContent {
        margin-top: 0;
    }

    header.expanded {
        height: 520px;
    }

    #headLogo img {
        height: 40px;
    }

    #headLogo a {
        height: 60px;
    }

    #sideNavi {
        display: none;
    }

    #header .pcMenu {
        display: none;
    }

    .mobileMenuButt {
        position: absolute;
        top: 0;
        right: 0;
        z-index: 1;
        height: 60px;
        width: 60px;
    }

    .mobileMenuButt .close {
        display: none;
    }

    header.expanded .mobileMenuButt .close {
        display: inline-block;
    }

    header.expanded .mobileMenuButt .open {
        display: none;
    }

    .mainOpened .open {
        display: none;
    }

    .mainOpened .close {
        display: inline-block !important;
    }

    #globalNavi {
        width: 100%;
    }

    #topContent {
        height: 261px;
    }

    #topContent .flexslider {
        top: 80px;
    }

    #contents #headline li {
        width: 24%;
        margin-right: 7px;
    }

    #contents #headline li p {
        font-size: 12px;
        letter-spacing: 0.1rem;
        padding: 0.5rem 0
    }

    #contents #siteInfo {
        width: 100%;
        margin: 0;
    }

    #contents #siteInfo ul {
        margin-bottom: 20px;
    }

    #contents #bannerArea ul {
        margin: 0 auto;
    }

    .pageColumn {
        width: 100%;
        display: block;
    }

    .indexMenu ul {
        width: 100%;
    }

    .indexMenu li:nth-child(odd) {
        margin-right: 24px;
    }

    .indexMenu li {
        vertical-align: top;
    }

    .indexMenu svg {
        height: 70px;
        width: 70px;
    }

    .introBox li {
        display: block;
        width: 100%;
        margin-bottom: 20px !important;
        margin-left: 0;
    }

    .introBox .heading {
        display: inline-block;
        vertical-align: middle;
    }

    .introBox .heading:after {
        border-left: 30px solid #00b4cc;
        border-top: 15px solid transparent;
        border-bottom: 15px solid transparent;
        bottom: 71px;
        left: 173px;
    }

    .introBox .introExp {
        width: 62%;
        display: inline-block;
        margin-left: 30px;
        margin-top: 0;
        vertical-align: middle;
    }

    #intro {
        height: 745px;
    }

    #section02,
    .section02Image {
        height: 660px;
    }

    #section02 p {
        line-height: 2em;
    }

    #section02 .inner dd.graph1 span {
        width: 60%;
    }

    #section03,
    .section03Image {
        height: 950px;
    }

    #section03 .candidateImage li:nth-child(2),
    #section05 .candidateImage li:nth-child(2) {
        margin: 0 35px;
    }

    #section03 .column,
    #section05 .column {
        width: 44%
    }

    #section05 .column {
        padding-bottom: 40px;
    }

    #section04 h2.type3,
    #section05 h2.type2-2,
    #section03 h2.type2-2 {
        width: 90%;
    }

    .environmentImage img,
    .environmentImage2 img {
        width: 100%;
    }

    .environmentImage p,
    .environmentImage2 p {
        width: 200px !important;
        height: 200px !important;
    }

    .introBox li,
    .environmentImage li,
    .environmentImage2 li {
        margin: 10px;
        width: auto;
    }

    .environmentImage2 {
        margin-top: 20px;
    }

    #section06 .candidateImage {
        width: 100%;
    }

    #section06 .candidateImage li {
        width: 303px;
    }

    #section06 .candidateImage li:nth-child(odd) {
        margin-right: 42px;
    }

    #titleArea #headline .hedlineTitle {
        display: block;
    }

    #titleArea #headline li {
        display: inline-block;
        width: 49%;
    }

    #titleArea ul {
        margin-left: 0;
    }

    .trainingTable dt {
        width: 8%;
        display: table-row;
    }

    .trainingTable dt,
    .trainingTable dd {
        display: table-cell;
        padding: 0.8rem;
    }

    .trainingImages {}

    .trainingContents span {
        width: 33%;
    }

    .trainingContents {
        padding: 0.5rem 0 0.5rem 14%;
        width: auto;
    }

    #employment {
        width: 100%;
    }

    #stepNav ul li:first-child {
        margin-right: 20px;
    }

    #stepNav ul li a {
        width: 260px;
        height: 190px;
    }

    #stepNav ul li:first-child p,
    #stepNav ul li:last-child p {
        top: 0;
    }

    .flows li p {
        width: 512px;
    }

    .flows li span:after {
        bottom: -99px;
    }

    #commonContents .flexslider {
        width: 90% !important;
    }

    #topContent .flexslider .slides li a span {
        bottom: 30px;
    }

    .sContent5 a span {
        bottom: 30px !important;
    }

    /*スムースリンクのための画像高さ設定*/
    #slider .flex-viewport {
        margin-top: -50px;
    }

    #tableType1 {
        width: 90%;
    }

    .officeEventIndex dt {
        width: 3em !important;
    }

    #tableType1>dd {
        padding: 16px 0 14px 120px;
    }

    #eventTable ul li img {
        margin: 0 0 1px;
        height: 165px;
    }

    #eventTable ul li:nth-child(odd) img {
        margin-right: 10px;
    }

    .messageBox {
        width: 45%;
    }

    .messageBox .directorPic {
        height: 180px;
    }

    #sloganBox {
        width: 90%;
    }

    #sloganBox li {
        margin: 0 20px 20px 0;
    }

    #sloganBox li:last-child span {
        font-size: 27px;
    }

    #sloganBox li p {
        font-size: 13px;
        width: 272px;
    }

    #sloganBox p span {
        font-size: 27px;
    }

    .partnerList {
        width: 454px;
    }

    .contact dt {
        width: 7em !important;
    }

    .mapGoogle iframe {
        width: 490px;
    }

    .googleLink {
        display: none;
    }

    .googleLink_mobile {
        display: block;
    }

    .security h2.type1 {
        width: 70%;
    }

    .securityDataBox {
        width: 90%;
    }

    /*
#tableType2 dt{width:8%;display:table-cell;}
#tableType2 dd{width:9.2%;display:table-cell;}
*/
    /*system_integration*/
    .chartImage img {
        width: auto;
    }

    .chartImage ul {
        height: 240px;
        width: 650px;
        margin: 0 auto;
    }

    .chartImage li:nth-child(1) {
        top: -18px;
        left: 82px;
    }

    .chartImage li:nth-child(2) {
        top: 147px;
        right: 224px;
    }

    .chartImage li:nth-child(1) a:after {
        width: 35px;
        top: 18px;
    }

    .chartImage li:nth-child(2) a:after {
        width: 53px;
        top: 0px;
        right: 51px;
        -moz-transform: skewY(20deg);
        -webkit-transform: skewY(20deg);
        -o-transform: skewY(20deg);
        -ms-transform: skewY(20deg);
    }

    #systemintegration,
    #development,
    #relationship {
        width: 100%;
    }

    .gIcon {
        width: 100px;
        height: 100px;
    }

    .lev2 {
        display: block;
    }

    .lev2>li {
        /*position:relative;display:block;*/
    }

    /*.lev2Head{  position: absolute;   top: -80px;left:120px;}*/
    .lev2>li:nth-child(2) {
        padding: 0;
    }

    .port_bkArea {
        height: 350px;
    }

    .flows li:nth-child(1) span {
        padding: 2em 0;
    }
}

/*max-width: 720px max-width:768px*/

@media screen and (min-width: 680px) {
    .linkBokSet {
        width: 100%;
    }

}


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

    .linkBokSet li {
        width: 100%;
    }

    .linkBok {
        width: 45%;
    }

    .linkBok:last-child {
        margin-top: 100px;
    }

    #portItem4 .portContent .port_Catch img {
        width: 43%;
    }

    #portItem4 .portContent .port_Catch>p {
        font-size: 2.4rem;
    }
    #minlab .mainImage{
        height: 200px;
    }
    #minlab .port_Cap{
        font-size: 30px;
    }
    #minlab .port_Cap span{
        font-size: 60px;
    }
    #minlab .pcInner{
        flex-direction: column-reverse;
        padding: 0 20px;

    }
    #minlab .pcInner li{
        margin-bottom: 40px;
    }
}


@media screen and (max-width: 640px) {
    #designIntro p span {
        display: block;
    }

    #designIntro img {
        width: 70%;
    }

    #designImage .webdesignImage .imageBg1 {
        left: -12px;
    }

    #designImage .webdesignImage .imageBg5 {
        top: 400px;
        left: 172px;
    }

    #designImage .webdesignImage .webdesignText {
        width: 56%;
        top: 20px;
    }

    #designImage .mobileappsImage .imageBg1 {
        right: 23px;
    }

    #designImage .mobileappsImage .imageBg5 {
        top: 138px;
        right: 172px;
    }

    #designImage .webdesignImage .webdesignText h3 {
        margin: 0 0 20px -20px;
        line-height: 1em;
    }

    #designImage .mobileappsImage .webdesignText h3 {
        margin: 20px 0 20px -16px;
        line-height: 1em;
        width: 50%;
    }

    #designImage .mobileappsImage .imageBg4 {
        right: 458px;
        bottom: 184px;
    }

    #portItem3 .port_Catch img {
        width: 400px;
        margin: auto;
        height: auto;
    }

    #portItem4 .port_Catch {
        width: 90%;
        margin: auto;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    #portItem4 .port_Catch>p {
        font-size: 38px;
    }

    #portItem4 .port_bkArea {
        height: 245px;
    }

    #portItem4 .port_bkArea img {
        width: 210px;
    }

    #portItem4 .portContent {
        height: 245px;
    }

    #portItem4 .port_Cap,
    #darwin .port_Cap {
        font-size: 4rem;
    }

    #portItem4 .portContent .port_Catch>p {
        font-size: 1.8rem;
    }

    .ai_images {
        width: 100% !important;
    }

    .ai_images li p {
        font-size: 11px;
    }

    #development .portContent {
        padding-bottom: 580px;
    }
}

/*max-width: 480px max-width: 719px*/
@media screen and (min-width: 480px) and (max-width: 719px) {

    h2.type1,
    h2.type2,
    h2.type2-2,
    h2.type3 {
        width: 90%;
    }

    #page-top {
        bottom: 30px;
    }

    #commonContents {
        padding-top: 60px;
    }

    #contents,
    #commonContents {
        padding-bottom: 630px;
    }

    #mobileMenu {
        display: block !important;
    }

    .contentM {
        display: block !important;
        border-bottom: 1px solid #fff;
        margin-top: 30px;
    }

    .mobileMenu .indexIcon {
        fill: #fff;
        width: 30px;
        height: 30px;
        vertical-align: middle;
    }

    #globalNavi .mobileMenu>a:after {
        display: none;
    }

    #mobileMenu {
        position: absolute;
        top: 10px;
        right: 10px;
    }

    header.expanded {
        height: 570px;
    }

    #headLogo img {
        height: 40px;
    }

    #headLogo a {
        height: 60px;
    }

    #sideNavi {
        display: none;
    }

    #header .pcMenu {
        display: none;
    }

    .mobileMenuButt {
        position: absolute;
        top: 0;
        right: 0;
        z-index: 1000;
        line-height: 60px !important;
    }

    .mobileMenuButt .close {
        display: none;
    }

    header.expanded .mobileMenuButt .close {
        display: inline-block;
    }

    header.expanded .mobileMenuButt .open {
        display: none;
    }

    li.dropdown.mobileMenu {
        display: block !important;
    }

    #globalNavi {
        width: 100%;
    }

    #contents #headline {
        margin-bottom: 20px;
    }

    #contents #headline li {
        width: 47%;
        margin-right: 0;
        margin-bottom: 20px;
    }

    #contents #headline li:nth-child(odd) {
        margin-right: 25px;
    }

    #contents #headline li p {
        font-size: 12px;
        letter-spacing: 0.1rem;
        padding: 0.5rem 0
    }

    #contents #siteInfo {
        width: 100%;
    }

    #contents #siteInfo ul {}

    #contents #bannerArea {
        width: 100%;
        text-align: center;
    }

    #contents #bannerArea ul {
        margin: 0 auto;
    }

    .pageColumn,
    .indexMenu ul {
        width: 100%;
    }

    .indexMenu li {
        width: 100%;
        margin-bottom: 10px;
    }

    .indexMenu a {
        padding: 15px;
    }

    .indexMenu svg {
        height: 70px;
        width: 70px;
    }

    .introBox li {
        margin: 0 0 20px 0;
        padding: 0 0 20px 0;
        display: block;
        width: 100%;
        border-bottom: 1px solid #9ba4a4;
    }

    .introBox li:last-child {
        border-bottom: 0;
    }

    .environmentImage li,
    .environmentImage2 li {
        margin: 0;
        display: inline-block;
        width: 32%;
    }

    .environmentImage li img,
    .environmentImage2 li img {
        width: 100%;
    }

    .introBox .heading {
        display: inline-block;
        vertical-align: middle;
    }

    .introBox .heading,
    .introBox .heading span {
        height: 130px;
        width: 130px;
        font-size: 20px;
    }

    .introBox .heading:after {
        border-left: 20px solid #00b4cc;
        border-top: 15px solid transparent;
        border-bottom: 15px solid transparent;
        bottom: 52px;
        left: 124px;
    }

    .introBox .introExp {
        margin: 0 0 0 33px;
        width: 62%;
        display: inline-block;
        vertical-align: middle;
    }

    .introImage {
        height: 820px;
        background: url(/recruit/images/parallax_bg01.jpg) center 0 no-repeat fixed;
        background-size: auto 100%;
    }

    #intro {
        padding-top: 60px;
        height: 820px;
    }

    #section02 {
        height: 700px;
    }

    #section02 p {
        line-height: 2em;
    }

    .section02Image {
        height: 700px;
        background-size: auto 100%;
        background: url(/recruit/images/parallax_bg02.jpg)right bottom no-repeat fixed;
    }

    #section02 .inner dl {
        width: 90%;
    }

    #section02 .inner dd.graph1 span {
        width: 55%;
    }

    #section03,
    .section03Image {
        height: 1080px;
    }

    #section03 h2.type2-2 {
        width: 100%;
    }

    #section03 .candidateImage li {
        display: inline-block;
        width: 29%;
        margin: 0 auto 20px;
    }

    #section03 .candidateImage li:nth-child(2),
    #section05 .candidateImage li:nth-child(2) {
        margin: 0 22px;
    }

    #section03 .column,
    #section05 .column {
        width: 100%;
    }

    #section04 h2.type3 {
        width: 100%;
        font-size: 33px;
    }

    .environmentImage,
    .environmentImage2 {
        width: 100%;
    }

    .environmentImage p,
    .environmentImage2 p {
        width: 140px !important;
        height: 140px !important;
    }

    #section04 .cloumn2 {
        display: block;
    }

    #section04 .cloumn2 p {
        width: 100%;
        display: block;
        padding: 0;
    }

    #section04,
    .section04Image {
        height: 768px;
    }

    #section05 h2.type2-2 {
        width: 100%;
        font-size: 30px;
    }

    #section05,
    .section05Image {
        height: 760px;
    }

    #section06 .candidateImage {
        width: 100%;
    }

    #section06 .candidateImage li {
        width: 47%;
    }

    #section03 .column,
    #section05 .column {
        margin-right: 0;
        display: block;
    }

    #section06 .candidateImage li:nth-child(odd) {
        margin-right: 20px;
    }

    #section06,
    .section06Image {
        height: 760px;
    }

    #titleArea .titleInline p {
        margin: 20px 0;
    }

    #titleArea .logoBig {
        height: 70px;
        margin: 0 18px;
    }

    #titleArea .titleInline p {
        letter-spacing: 0.2rem;
    }

    #titleArea ul {
        margin: 0;
    }

    #titleArea #headline .hedlineTitle {
        display: block;
    }

    #titleArea #headline li {
        display: inline-block;
    }

    #ceomessage .messageArea {
        width: 100%;
    }

    .trainingTable {
        border: 1px solid #9ba4a4;
    }

    .trainingContents {
        display: none;
    }

    .trainingTable dl {
        display: block;
        position: relative;
    }

    .trainingTable dl:nth-child(2) {
        border-top: none;
    }

    .trainingTable dt {
        display: block;
        width: auto;
    }

    .trainingTable dd {
        border-left: none;
        display: table;
        width: 100%;
    }

    .trainingTable dd p,
    .trainingTable dd ol {
        display: table-cell;
    }

    .trainingTable dd p {
        width: 7em;
        color: #00b4cc;
        font-weight: bold
    }

    .trainingContentsinnerTitle,
    .trainingTable ol {
        display: table-cell;
    }

    .trainingContentsinnerTitle {
        display: block;
    }

    .trainingContentsinnerTitle span {
        display: block;
    }

    #employment {
        width: 100%;
    }

    #stepNav ul li:first-child {
        margin-right: 10px;
    }

    #stepNav ul li a {
        width: 190px;
    }

    #stepNav ul li img {
        top: -20px;
        left: -60px;
        width: 175%;
    }

    #stepNav ul li:last-child a p span {
        letter-spacing: 0.1em;
    }

    #stepNav .stepNavExp {
        font-size: 13px;
    }

    .ui-tabs-anchor span {
        padding-bottom: 0 !important;
        margin-bottom: 10px !important;
        margin-top: -6px;
    }

    #stepNav ul li:first-child p,
    #stepNav ul li:last-child p {
        top: 0;
    }

    .flows li {
        display: table;
        width: 100%;
    }

    .flows li span,
    .flows li p {
        display: table-cell;
    }

    .flows li span {
        width: 4.2em;
    }

    .flows li p {
        width: 298px;
        padding: 1em 0 1em 1em;
        vertical-align: top;
    }

    .flows li span:after {
        bottom: -99px;
    }

    #employment #queryBox>ul {
        width: 70%;
        margin: 0 auto;
    }

    .exp {
        width: 90%;
    }

    .academicBackground {
        -moz-column-count: 1;
        -webkit-column-count: 1;
        -o-column-count: 1;
        -ms-column-count: 1;
    }

    #tableType2 p {
        margin-top: 10px;
    }

    #commonContents #slider.flexslider {
        width: 100%;
    }

    #commonContents .flexslider {
        width: 100%;
    }

    /*スムースリンクのための画像高さ設定*/
    #slider .flex-viewport {
        margin-top: 0;
    }

    #tableType1 {
        width: 100%;
    }

    .officeEventIndex dt {
        width: 3em !important;
    }

    #tableType1>dd:nth-child(2) {
        padding-top: 0;
    }

    #tableType1>dd {
        padding: 16px 0 14px 110px;
    }

    .officeEventIndex li a {
        font-size: 1rem;
        padding: 10px 8px 9px 5px;
    }

    .indexMenu li:nth-child(odd) {
        margin-right: 0;
    }

    .messageBox {
        width: 100%;
        margin-right: 0;
    }

    .messageBox:last-child {
        margin-top: 50px;
    }

    .directorPic {
        height: 150px;
    }

    .philosophy {
        width: 90%;
    }

    #sloganBox {
        width: 100%;
    }

    #sloganBox li {
        margin: 0 20px 20px 0;
        width: 100%;
    }

    #sloganBox li:nth-child(even) {
        margin: 0 0 20px 0;
    }

    #sloganBox li p {
        font-size: 14px;
        height: 160px;
    }

    #sloganBox li p span {
        font-size: 27px;
    }

    .partnerList {
        width: auto;
        -moz-column-count: 1 !important;
        -webkit-column-count: 1 !important;
        -o-column-count: 1 !important;
        -ms-column-count: 1 !important;
    }

    #tableType1.history dd {
        padding: 16px 0 14px 158px;
    }

    #tableType1.contact dt {
        width: 6em;
    }

    #tableType1.contact dd {
        padding: 16px 0 14px 100px;
    }

    #tableType1.contact dd:nth-child(4) {
        padding: 16px 0 14px 20px;
    }

    .mapGoogle iframe {
        width: 390px;
        height: 480px;
    }

    .partnerText {
        width: 90%;
    }

    .googleLink {
        display: none;
    }

    .googleLink_mobile {
        display: block;
    }

    .security h2.type1 {
        font-size: 30px;
    }

    /*system_integration*/
    .chartImage img {
        width: auto;
    }

    .chartImage ul {
        height: 240px;
        width: 430px;
        margin: 0 auto;
    }

    .chartImage li:nth-child(1) {
        top: -18px;
        left: 0;
    }

    .chartImage li:nth-child(2) {
        top: 147px;
        right: 170px;
    }

    .chartImage li:nth-child(1) a:after {
        width: 47px;
        top: 21px;
    }

    .chartImage li:nth-child(2) a:after {
        width: 53px;
        top: -3px;
        right: 52px;
    }

    .chartImage li:nth-child(1) a:hover,
    .chartImage li:nth-child(2) a:hover {
        color: #ccc;
    }

    #systemintegration,
    #development,
    #relationship {
        width: 100%;
    }

    .gIcon {
        width: 100px;
        height: 100px;
    }

    .lev2 {
        display: block;
    }

    .lev2>li {
        position: relative;
        display: block;
    }

    .lev2>li:nth-child(2) {
        padding: 0;
    }

    .port_bkArea {
        height: 350px;
    }

    #apply_form dl:nth-child(2),
    #apply_form dl:nth-child(3),
    #apply_form dl:nth-child(4),
    #apply_form dl:nth-child(5) {
        float: none;
        width: 100%;
    }

    input#mailaddress,
    input#schoolName {
        border-right: 1px solid #00b4cc;
    }
}

/*480px-719px*/

@media screen and (max-width: 646px) {
    .flows li:nth-child(1) span {
        padding-top: 3em;
    }

    #contents,
    #commonContents {
        padding-bottom: 630px;
    }

    .port_bkArea,
    #darwin .mainImage {
        height: 300px;
    }

    #footerNavi ul:last-child {
        margin-top: 20px;
    }

    .entryButton a {
        font-size: 20px;
    }

    #topContent .flexslider .slides li a span {
        bottom: 30px;
    }

    #contents #headline ul {
        flex-wrap: wrap;
        -webkit-flex-wrap: wrap;
    }

    #portItem4 .portContent {
        height: 245px;
    }

    #portItem4 .port_bkArea img {
        width: 63%;
    }
    #minlab .mainImage {
        height: 180px;
    }
    .circuitImage {
        width: 100%
    }
}

@media screen and (max-width: 479px) {
    #contents #bannerArea ul:last-child {
        width: 187px
    }

    .security .type1 span {
        margin-top: -20px;
    }

    #topContent {
        height: 163px;
    }

    .flex-control-nav {
        bottom: -4px;
    }

    #topContent .flexslider .slides li a span {
        bottom: 15px;
    }

    h1.type1,
    h2.type1 {
        width: 100%;
    }

    .skillcomment {
        width: auto;
    }

    #portItem4 {
        margin-bottom: 80px;
    }

    #portItem4 .portContent {
        margin-top: 0;
        margin-bottom: -5px;
        height: 190px;

    }

    #portItem4 .port_Cap {
        font-size: 2.5rem;
    }

    #portItem4 .port_bkArea img {
        width: 260px;
    }

    #portItem4 .port_Catch>p {
        font-size: 1.5rem;
    }

    #portItem4 .port_Cap {
        margin-top: 0;
    }

    #darwin {
        width: 100%;
    }

    #darwin .port_Cap {
        font-size: 2.5rem;
    }

    #darwin .mainImage {
        width: 100%;
        overflow: hidden;
        position: relative;
        height: 174px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    #darwin .mainImage img {
        width: 160%;
    }

    #darwin .apiExp {
        margin: 0 1em 30px;
    }
    #minlab .mainImage {
        height: 160px;
    }
    #minlab .port_Cap{
        font-size: 23px;
    }
    #minlab .port_Cap span{
        font-size: 45px;
    }

}

@media screen and (max-width: 479px) {

    /*制作実績用*/
    #portItem4 .port_bkArea {
        height: 190px;
    }

    #portItem4 .portContent .port_Catch>p {
        font-size: 1.5rem;
    }

    .portContent {
        width: 100%;
        margin: 0 auto 50px;
    }

    .portContent .port_Catch {
        font-size: 20px;
        margin-bottom: 10px;
        padding-top: 0;
        display: table-cell;
        vertical-align: middle;
    }

    .deviceImage {
        margin: 20px 0;
        width: 90%;
    }

    .port_Cap {
        font-size: 13px;
    }

    #portItem1 .text_blank {
        margin-top: 20px;
    }

    /*service*/
    .skilmapGauge img {
        width: 100%;
    }

    .skilmap_thamb li {
        width: 46%;
    }

    .skilmap_thamb li:nth-child(even) {
        margin-right: 0;
    }

    /*portfolio*/
    #portItem3 .port_Catch img {
        width: 95%;
        margin: auto;
    }

    #dl_index table,
    #development table {
        margin-left: auto;
        margin-right: auto;
        font-size: 12px;
        width: 95%;
        line-height: 1.6;
    }
}

@media screen and (max-width: 414px) {
    #designImage .webdesignImage .imageBg1 {
        width: 207px;
    }

    #designImage .webdesignImage .imageBg2 {
        width: 259px;
    }

    #designImage .webdesignImage .imageBg3 {
        display: none;
    }

    #designImage .webdesignImage .imageBg4 {
        width: 202px;
    }

    #designImage .webdesignImage .imageBg5 {
        top: 411px;
    }

    #designImage .webdesignImage .imageBg6 {
        top: 231px;
        left: 264px;
    }

    #designImage .webdesignImage .imageBg7 {
        top: 174px;
        left: 20px;
    }

    #designImage .webdesignImage .imageBg8 {
        top: 312px;
        left: 284px;
    }

    #designImage .mobileappsImage .imageBg1 {
        width: 159px;
    }

    #designImage .mobileappsImage .imageBg2 {
        width: 255px;
    }

    #designImage .mobileappsImage .imageBg3 {
        width: 144px;
        bottom: -24px;
        left: 16px;
    }

    #designImage .mobileappsImage .imageBg5 {
        right: 31px;
    }

    #designImage .mobileappsImage .imageBg6 {
        top: 226px;
    }

    #designImage .mobileappsImage .imageBg7 {
        bottom: 160px;
        right: 209px;
    }

    #designImage .mobileappsImage .imageBg8 {
        bottom: 136px;
        right: 265px;
    }


    #portItem4 .port_Cap {
        font-size: 45px;
        margin-bottom: 15px;
    }

    #portItem4 .port_Catch {
        height: 173px;
    }

    #portItem4 .port_Catch img {
        height: 70px;
        padding: 10px 25px 10px 0;
    }

    #portItem4 .port_bkArea {
        height: 190px;
    }

    #portItem4 .port_bkArea img {
        width: 225px;
    }

    #portItem4 .port_Catch>p {
        font-size: 20px;
    }

    .ai_images li {
        width: 100%;
    }
}



/*360px-479px*/

@media screen and (min-width: 360px) and (max-width: 479px) {
    #queryBox>ul {
        width: 90%;
        margin: 0 auto;
    }

    .mocExam {
        width: 90%;
        margin: 10px auto 0;
    }

    h2.type1,
    h2.type2,
    h2.type2-2,
    h2.type3 {
        width: 100%;
        margin-bottom: 23px;
        font-size: 24px;
        line-height: 54px;
    }

    h3.type1 {
        font-size: 17px;
    }

    * body {
        line-height: 1.5em;
    }

    #wrapper {
        overflow: hidden;
    }

    #page-top {
        bottom: 30px;
    }

    #commonContents {
        padding-top: 60px;
    }

    #mobileMenu {
        display: block !important;
    }

    .breadcrumb {
        position: relative;
        top: -10;
        width: 400px;
    }

    .contentM {
        display: block !important;
        border-bottom: 1px solid #fff;
        margin-top: 30px;
    }

    .mobileMenu .indexIcon {
        fill: #fff;
        width: 30px;
        height: 30px;
        vertical-align: middle;
    }

    #globalNavi .mobileMenu>a:after {
        display: none;
    }

    #mobileMenu {
        position: absolute;
        top: 10px;
        right: 10px;
    }

    #header {
        height: 60px;
    }

    header {
        height: 60px;
    }

    header.expanded {
        height: 580px;
    }

    .dropdownInner a {
        padding: 6px 13px 8px 14px;
    }

    /*モバイル用メニュー サービスメニューが見れないのでとりあえずの設定*/
    .mobileMenu.active .dropdownInner li:not(.contentM) {
        display: none !important;
    }

    #headLogo {
        margin-left: 10px;
    }

    #headLogo img {
        height: 40px;
    }

    #headLogo a {
        height: 60px;
    }

    #sideNavi {
        display: none;
    }

    #header .pcMenu {
        display: none;
    }

    .mobileMenuButt {
        position: absolute;
        top: 0;
        right: 0;
        z-index: 1000;
        line-height: 60px !important;
    }

    .mobileMenuButt .close {
        display: none;
    }

    header.expanded .mobileMenuButt .close {
        display: inline-block;
    }

    header.expanded .mobileMenuButt .open {
        display: none;
    }

    li.dropdown.mobileMenu {
        display: block !important;
    }

    #globalNavi {
        width: 100%;
    }

    #topContent {
        height: 215px;
        background: none;
    }

    #topContent .flexslider {
        top: 60px;
        width: 100%;
    }

    .flex-control-nav {
        /* bottom: 0; */
    }

    #contents #headline li {
        width: 48%;
    }

    #footer {
        margin: 25px auto 0;
        font-size: 12px;
    }

    #footerNavi ul {}

    #copyright li {
        border: none;
        line-height: 2em;
    }

    #contents,
    #commonContents {
        padding-bottom: 710px;
    }

    #contents #headline {
        margin-bottom: 20px;
    }

    #contents #headline li {
        width: 48%;
        margin-right: 0;
        margin-bottom: 10px;
    }

    #contents #headline li:nth-child(odd) {
        margin-right: 10px;
    }

    #contents #headline li p {
        font-size: 12px;
        letter-spacing: 0.1rem;
        padding: 0.5rem 0
    }

    #contents #siteInfo {
        width: 100%;
        margin: 0;
    }

    #contents #siteInfo ul {}

    #contents #bannerArea {
        width: 100%;
        text-align: center;
        margin-top: 50px;
    }

    #contents #bannerArea img {
        width: 100% !important;
        height: auto;
    }

    #contents #bannerArea ul {
        margin: 0 auto;
        width: 100%;
    }

    .pageColumn,
    .indexMenu ul {
        width: 100%;
        margin: 0;
    }

    .indexMenu li {
        width: 100%;
        margin-bottom: 10px;
    }

    .indexMenu a {
        padding: 15px;
        font-size: 13px;
        height: auto;
    }

    .indexMenu svg {
        height: 60px;
        width: 60px;
    }

    .introBox li {
        margin: 0 0 20px 0;
        padding: 0 0 20px 0;
        display: block;
        width: 100%;
        border-bottom: 1px solid #9ba4a4;
    }

    .introBox li:last-child {
        border-bottom: 0;
    }

    .environmentImage li,
    .environmentImage2 li {
        margin: 0;
        display: inline-block;
        width: 31%;
    }

    .environmentImage li img,
    .environmentImage2 li img {
        width: 100%;
    }

    .introBox .heading {
        vertical-align: top;
        margin: 0 auto 1.5em;
    }

    .introBox .heading,
    .introBox .heading span {
        height: 57px;
        width: 239px;
        font-size: 20px;
    }

    .introBox .heading span br {
        display: none;
    }

    .introBox .heading:after {
        border-top: 20px solid #00b4cc;
        border-right: 15px solid transparent;
        border-left: 15px solid transparent;
        bottom: -17px;
        left: 45%;
    }

    .introBox .introExp {
        margin: 0 auto;
        width: 90%;
        vertical-align: middle;
    }

    .introImage {
        height: 1000px;
        background: url(/recruit/images/parallax_bg01.jpg) center 0 no-repeat fixed;
        background-size: auto 100%;
    }

    #intro {
        padding-top: 60px;
        height: 1000px;
    }

    #section02 {
        height: 750px;
    }

    #section02 p {
        line-height: 2em;
        text-align: left;
    }

    .section02Image {
        height: 750px;
        background-size: auto 100%;
        background: url(/recruit/images/parallax_bg02.jpg)right bottom no-repeat fixed;
    }

    #section02 .inner dl {
        width: 290px;
        position: relative;
        height: 387px;
        padding: 20px 0 20px 20px;
    }

    #section02 .inner dt {
        float: none;
        position: absolute;
        top: 56%;
        width: 14%;
        writing-mode: vertical-rl;
        -moz-writing-mode: vertical-rl;
        -o-writing-mode: vertical-rl;
        -webkit-writing-mode: vertical-rl;
    }

    #section02 .inner dl dt:nth-child(1) {
        left: 8px;
    }

    #section02 .inner dl dt:nth-child(3) {
        left: 38px;
    }

    #section02 .inner dl dt:nth-child(5) {
        left: 71px;
    }

    #section02 .inner dl dt:nth-child(7) {
        left: 103px;
    }

    #section02 .inner dl dt:nth-child(9) {
        left: 136px;
    }

    #section02 .inner dl dt:nth-child(11) {
        left: 169px;
    }

    #section02 .inner dl dt:nth-child(13) {
        left: 200px;
    }

    #section02 .inner dl dt:nth-child(15) {
        left: 234px;
    }

    #section02 .inner dd span {
        margin: 0 auto;
        position: absolute;
        bottom: 0;
        right: 0;
        width: 20px !important;
    }

    #section02 .inner dd.graph1 span {
        height: 100%;
    }

    #section02 .inner dd.graph2 span {
        height: 80%;
    }

    #section02 .inner dd.graph3 span {
        height: 60%;
    }

    #section02 .inner dd.graph4 span {
        height: 55%;
    }

    #section02 .inner dd.graph5 span {
        height: 30%;
    }

    #section02 .inner dd.graph6 span {
        height: 20%;
    }

    #section02 .inner dd.graph7 span {
        height: 10%;
    }

    #section02 .inner dd.graph8 span {
        height: 5%;
    }

    #section02 .inner dd.graph8 {
        margin: 0;
    }

    #section02 .inner dd {
        position: relative;
        display: inline-block;
        width: 20px;
        height: 187px;
        margin-right: 7px;
    }

    #section03,
    .section03Image {
        height: 1265px;
    }

    #section03 h2.type2-2 {
        width: 100%;
    }

    #section03 .candidateImage li {
        display: inline-block;
        width: 29%;
        margin: 0 auto;
    }

    #section03 .candidateImage li:nth-child(2),
    #section05 .candidateImage li:nth-child(2) {
        margin: 0 12px;
    }

    #section03 .column,
    #section05 .column {
        width: 100%;
    }

    #section04 h2.type3 {
        width: 100%;
        font-size: 22px;
    }

    .environmentImage p,
    .environmentImage2 p {
        width: 90px;
        height: 90px;
    }

    .environmentImage2 {
        margin-top: 20px;
    }

    #section04 .cloumn2 {
        display: block;
    }

    #section04 .cloumn2 p {
        width: 100%;
        display: block;
        padding: 0;
    }

    #section04,
    .section04Image {
        height: 830px;
    }

    #section05 h2.type2-2 {
        width: 100%;
        font-size: 20px;
    }

    #section05,
    .section05Image {
        height: 800px;
    }

    #section06 .candidateImage {
        width: 100%;
    }

    #section06 .candidateImage li {
        width: 47%;
    }

    #section03 .column,
    #section05 .column {
        margin-right: 0;
    }

    #section06 .candidateImage li:nth-child(odd) {
        margin-right: 14px;
    }

    #section06,
    .section06Image {
        height: 670px;
    }

    #titleArea {
        text-align: center;
    }

    #titleArea img {
        height: 180px;
    }

    #titleArea .titleInline p {
        margin: 20px 0;
    }

    #titleArea .logoBig {
        height: 70px;
        margin: 0 18px;
    }

    #titleArea .titleInline p {
        letter-spacing: 0.2rem;
    }

    #titleArea ul {
        margin: 0;
    }

    #titleArea #headline {
        text-align: left;
    }

    #titleArea #headline .hedlineTitle {
        display: block;
    }

    #titleArea #headline li {
        display: inline-block;
    }

    #titleArea #headline li a {
        font-size: 18px;
    }

    .peopleBox .peopletitle img {
        margin-right: 0.5em;
    }

    #ceomessage .messageArea {
        width: 100%;
        margin: 0;
    }

    #ceomessage .messageArea img {
        width: 1em;
        display: inline-block;
        height: 1em;
        border: none;
        visibility: hidden;
    }

    .trainingTable {
        border: 1px solid #9ba4a4;
    }

    .trainingContents {
        display: none;
    }

    .trainingTable dl {
        display: block;
        position: relative;
    }

    .trainingTable dl:nth-child(2) {
        border-top: none;
    }

    .trainingTable dt {
        display: block;
        width: auto;
    }

    .trainingTable dd {
        padding: 0.8rem 1rem;
        border-left: none;
        display: block;
        width: 89%;
    }

    .trainingTable dd p,
    .trainingTable dd ol {
        display: block;
    }

    .trainingTable dd p {
        color: #00b4cc;
        font-weight: bold
    }

    .trainingImages a {
        float: none;
        padding: 1rem 0;
        text-align: right;
    }

    .trainingContentsinnerTitle,
    .trainingTable ol {
        display: block;
    }

    .trainingContentsinnerTitle {
        display: block;
    }

    .trainingContentsinnerTitle span {
        display: block;
    }

    #schedule {
        flex-direction: column;
        align-items: center;
        height: 463px;
        width: 28%;
    }

    .schedulebg {
        width: 6%;
        height: 300px;
        position: relative;
        left: 35px;
    }

    .circleMini span:after {
        border-left: 20px solid #00b4cc;
        border-top: 15px solid transparent;
        border-bottom: 15px solid transparent;
        bottom: 16px;
        left: 52px;
    }

    #schedule li:nth-child(2) {
        right: 0;
    }

    #employment {
        width: 100%;
    }

    #stepNav ul {
        margin: 0 auto 50px;
    }

    #stepNav ul li:first-child {
        margin-right: 0px;
    }

    #stepNav ul li a {
        width: 144px;
    }

    #stepNav ul li img {
        top: -20px;
        left: -60px;
        width: 175%;
    }

    #stepNav ul li:last-child a p span {
        font-size: 15px !important;
    }

    #stepNav ul li:last-child a p {
        padding: 15px 5px;
        width: 100%;
    }

    #stepNav .stepNavExp {
        font-size: 13px;
        display: none;
    }

    #stepNav ul li a {
        height: 60px;
    }

    #stepNav ul li a p {
        width: 100%;
    }

    .ui-tabs-anchor span {
        padding-bottom: 0 !important;
        margin-bottom: 10px !important;
        margin-top: -6px;
        font-size: 16px !important;
        letter-spacing: 0.3 !important;
    }

    #stepNav ul li:first-child p,
    #stepNav ul li:last-child p {
        top: 0;
    }

    .flowExp {
        display: block;
    }

    .flows li {
        display: table;
    }

    .flows li span,
    .flows li p {
        display: table-cell;
        width: 40px;
        padding: 35px 0;
    }

    .flows li span {
        line-height: 1em;
        width: 40px;
    }

    .flows li p {
        width: 298px;
        padding: 30px 0 1em 1em;
        vertical-align: top;
    }

    .flows li:nth-child(1) p {
        padding: 1em 0 1em 1em;
    }

    .flows li span:after {
        bottom: -39px;
        border: 19px solid transparent;
    }

    .flows li:nth-child(1) span {
        background: #005F6B;
        padding-top: 1em !important;
        letter-spacing: -0.1em;
    }

    .flows li:nth-child(1) span:after {
        border-top: 20px solid #005F6B;
    }

    .flows li:nth-child(2) span {
        background: #007483;
    }

    .flows li:nth-child(2) span:after {
        border-top: 20px solid #007483;
    }

    .flows li:nth-child(3) span {
        background: #008A9C;
    }

    .flows li:nth-child(3) span:after {
        border-top: 20px solid #008A9C;
    }

    .flows li:nth-child(4) span {
        background: #009FB4;
    }

    .flows li:nth-child(4) span:after {
        border-top: 20px solid #009FB4;
    }

    .flows li:nth-child(5) span {
        background: #00B4CC;
    }

    .flows li:nth-child(5) span:after {
        border-top: 20px solid #00B4CC;
    }

    .flows2 {
        margin-top: 20px;
    }

    .flows2 li {
        display: block;
        width: 100%;
        margin: 0 0 20px 0 !important;
    }

    .flows2 li:after {
        border: 20px solid transparent;
        border-top: 20px solid #005F6B;
        top: 179px;
        right: 0;
        left: 0;
    }

    #queryBox {
        padding: 15px;
    }

    .flows2 li:nth-child(2):after {
        top: 203px;
    }

    #queryBox>p {
        width: 100%;
        padding: 30px 20px;
    }

    .exp {
        width: 90%;
        margin: 0 auto;
    }

    #tableType2 {
        width: 100%;
    }

    #tableType2 dt,
    #tableType2 dd {
        padding: 20px 0;
    }

    #tableType2 dl:first-child dd {
        line-height: 1em;
    }

    .academicBackground {
        -moz-column-count: 1;
        -webkit-column-count: 1;
        -o-column-count: 1;
        -ms-column-count: 1;
    }

    #tableType2 p {
        margin-top: 10px;
    }

    .academicBackground li {
        font-size: 15px;
    }

    #commonContents #slider.flexslider {
        width: 100%;
    }

    #commonContents .flexslider {
        width: 100%;
    }

    /*スムースリンクのための画像高さ設定*/
    #carousel,
    #carousel img {
        height: 70px;
    }

    #carousel li {
        width: 93px !important;
    }

    #slider .flex-viewport {
        margin-top: -15px;
    }

    #tableType1 {
        width: 100%;
    }

    #tableType1 dt {
        display: block;
        float: none;
        color: #00b4cc;
        padding: 16px 0 14px 0;
    }

    .officeEventIndex dt {
        width: 3em !important;
    }

    #eventTable ul li img {
        height: 142px;
        margin: 0 0 1px 0;
    }

    #eventTable p {
        margin: 10px 0;
        font-size: 15px;
    }

    #tableType1>dd {
        padding: 0 0 14px 15px
    }

    .officeEventIndex li a {
        font-size: 1rem;
        padding: 10px 8px 9px 5px;
    }

    .indexMenu li:nth-child(odd) {
        margin-right: 0;
    }

    .messageBox {
        width: 100%;
        margin-right: 0;
    }

    .messageBox:last-child {
        margin-top: 50px;
    }

    .directorPic {
        height: 150px;
    }

    .philosophy {
        width: 90%;
        font-size: 15px;
        line-height: 1.8em;
    }

    #sloganBox li {
        margin: 0 auto 20px;
        width: 100%;
    }

    #sloganBox p span {
        font-size: 28px;
        margin-bottom: 10px;
    }

    #sloganBox li p {
        height: auto;
        padding: 10px;
        font-size: 13px;
    }

    #sloganBox li:nth-child(even) {
        margin: 0 0 20px 0;
    }

    .figImage img {
        width: 100%;
    }

    .partnerList {
        width: auto;
        -moz-column-count: 1 !important;
        -webkit-column-count: 1 !important;
        -o-column-count: 1 !important;
        -ms-column-count: 1 !important;
    }

    #tableType1.history dd {
        padding: 0 0 14px 15px;
    }

    #tableType1.contact>dt {
        width: 6em;
    }

    #tableType1.contact dd {
        padding: 16px 0 14px 15px;
    }

    #tableType1.contact dd:nth-child(4) {
        padding: 16px 0 14px 20px;
    }

    #sloganBox {
        width: 100%;
    }

    .mapGoogle iframe {
        width: 100%;
        height: 350px;
    }

    .partnerText {
        width: 90%;
    }

    .partnerText ul {
        font-size: 13px;
        line-height: 1.5em;
        text-indent: 0;
    }

    .partnerText ul li:nth-child(4) a {
        display: block;
        text-align: right;
    }

    .googleLink {
        display: none;
        width: 40px;
    }

    .googleLink_mobile {
        display: block;
    }

    .security h2.type1 {
        font-size: 30px;
    }

    /*system_integration*/
    .chartImage img {
        width: auto;
    }

    .chartImage ul {
        height: 240px;
    }

    .chartImage li:nth-child(1) {
        top: -18px;
        left: 0;
    }

    .chartImage li:nth-child(2) {
        top: 147px;
        right: 170px;
    }

    .chartImage li:nth-child(1) a:after,
    .chartImage li:nth-child(2) a:after {
        display: none !important;
    }

    .chartImage li:nth-child(1) a:hover,
    .chartImage li:nth-child(2) a:hover {
        color: #ccc;
    }

    #systemintegration,
    #development,
    #relationship {
        width: 100%;
    }

    .lev1Head {
        margin: 0 0 20px !important;
        padding: 0 20px 10px !important;
    }

    .guideCap {
        margin: 0 10px 10px;
    }

    .lev3 li {
        padding: 0;
    }

    .listDisk {
        padding: 0 0 0 2em !important;
    }

    .gIcon {
        width: 100px;
        height: 100px;
    }

    .lev1 {
        width: 100%;
    }

    .lev2 {
        display: block;
    }

    .lev2>li {
        position: relative;
        display: block;
    }

    .lev2>li:nth-child(2) {
        padding: 0;
    }

    #footerNavi ul:last-child {
        margin-top: 20px;
    }

    #apply_form dl:nth-child(2),
    #apply_form dl:nth-child(3),
    #apply_form dl:nth-child(4),
    #apply_form dl:nth-child(5) {
        float: none;
        width: 100%;
    }

    input#mailaddress,
    input#schoolName {
        border-right: 1px solid #00b4cc;
    }

    #apply_form dl:nth-child(2),
    #apply_form dl:nth-child(3),
    #apply_form dl:nth-child(4),
    #apply_form dl:nth-child(5) {
        float: none;
        width: 100%;
    }

    input#mailaddress,
    input#schoolName {
        border-right: 1px solid #00b4cc;
    }

    #apply_form dl:nth-child(2),
    #apply_form dl:nth-child(3),
    #apply_form dl:nth-child(4),
    #apply_form dl:nth-child(5) {
        float: none;
        width: 100%;
    }

    input#mailaddress,
    input#schoolName {
        border-right: 1px solid #00b4cc;
    }
}


/*320px-359px*/

@media screen and (min-width: 320px) and (max-width: 359px) {
    #queryBox>ul {
        width: 90%;
        margin: 0 auto;
    }

    .mocExam {
        width: 90%;
        margin: 10px auto 0;
    }

    h2.type1,
    h2.type2,
    h2.type2-2,
    h2.type3 {
        width: 100%;
        margin-bottom: 23px;
        font-size: 24px;
        line-height: 54px;
    }

    h3.type1 {
        font-size: 17px;
    }

    * body {
        line-height: 1.5em;
    }

    #wrapper {
        overflow: hidden;
    }

    #wrapInner {
        padding-bottom: 500px;
    }

    #page-top {
        bottom: 30px;
    }

    #commonContents {
        padding-top: 60px;
    }

    #mobileMenu {
        display: block !important;
    }

    .breadcrumb {
        position: relative;
        width: 400px;
    }

    .contentM {
        display: block !important;
        border-bottom: 1px solid #fff;
        margin-top: 30px;
    }

    .mobileMenu .indexIcon {
        fill: #fff;
        width: 30px;
        height: 30px;
        vertical-align: middle;
    }

    #globalNavi .mobileMenu>a:after {
        display: none;
    }

    #mobileMenu {
        position: absolute;
        top: 10px;
        right: 10px;
    }

    header {
        height: 60px;
    }

    header.expanded {
        height: 620px;
    }

    .dropdownInner li:first-child {
        margin: 0;
    }

    .dropdownInner a {
        padding: 6px 13px 8px 14px;
    }

    /*モバイル用メニュー サービスメニューが見れないのでとりあえずの設定*/
    .mobileMenu.active .dropdownInner li:not(.contentM) {
        display: none !important;
    }

    #headLogo {
        margin-left: 5px;
    }

    #headLogo img {
        height: 40px;
    }

    #headLogo a {
        height: 60px;
        padding-left: 10px;
    }

    #sideNavi {
        display: none;
    }

    #header {
        height: 60px;
        width: 100%;
    }

    #header .pcMenu {
        display: none;
    }

    .mobileMenuButt {
        position: absolute;
        top: 0;
        right: 0;
        z-index: 1000;
        line-height: 60px !important;
    }

    .mobileMenuButt .close {
        display: none;
    }

    header.expanded .mobileMenuButt .close {
        display: inline-block;
    }

    header.expanded .mobileMenuButt .open {
        display: none;
    }

    #globalNavi {
        width: 100%;
    }

    li.dropdown.mobileMenu {
        display: block !important;
    }

    #topContent {
        height: 200px;
        margin-bottom: 20px;
        background: none;
    }

    #topContent .flexslider {
        top: 60px;
        width: 100%;
    }

    #footer {
        margin: 25px auto 0;
        font-size: 12px;
    }


    #copyright li {
        border: none;
        line-height: 2em;
    }

    #contents,
    #commonContents {
        padding-bottom: 700px;
    }

    #contents #headline {
        margin-bottom: 20px;
    }

    #contents #headline li {
        width: 47%;
        margin-right: 0;
        margin-bottom: 10px;
    }

    #contents #headline li:nth-child(odd) {
        margin-right: 10px;
    }

    #contents #headline li p {
        font-size: 12px;
        letter-spacing: 0.1rem;
        padding: 0.5rem 0
    }

    #contents #siteInfo {
        width: 100%;
        margin: 0;
    }

    #contents #siteInfo ul {}

    #contents #bannerArea {
        width: 100%;
        text-align: center;
        margin-top: 50px;
    }

    #contents #bannerArea img {
        width: 100% !important;
        height: auto;
    }

    #contents #bannerArea ul {
        margin: 0 auto;
        width: 100%;
    }

    .pageColumn,
    .indexMenu ul {
        width: 100%;
        margin: 0;
    }

    .indexMenu li {
        width: 100%;
        margin-bottom: 10px;
    }

    .indexMenu a {
        padding: 15px;
        font-size: 13px;
        height: auto;
    }

    .indexMenu svg {
        height: 60px;
        width: 60px;
    }

    .introBox li {
        margin: 0 0 20px 0;
        padding: 0 0 20px 0;
        display: block;
        width: 100%;
        border-bottom: 1px solid #9ba4a4;
    }

    .introBox li:last-child {
        border-bottom: 0;
    }

    .environmentImage p,
    .environmentImage2 p {
        width: 90px;
        height: 90px;
    }

    .environmentImage li,
    .environmentImage2 li {
        margin: 0;
        display: inline-block;
        width: 32%;
    }

    .environmentImage li img,
    .environmentImage2 li img {
        width: 100%;
    }

    .introBox .heading {
        vertical-align: top;
        margin: 0 auto 1.5em;
    }

    .introBox .heading,
    .introBox .heading span {
        height: 57px;
        width: 239px;
        font-size: 20px;
    }

    .introBox .heading span br {
        display: none;
    }

    .introBox .heading:after {
        border-top: 20px solid #00b4cc;
        border-right: 15px solid transparent;
        border-left: 15px solid transparent;
        bottom: -17px;
        left: 45%;
    }

    .introBox .introExp {
        margin: 0 auto;
        width: 90%;
        vertical-align: middle;
    }

    .introImage {
        height: 1000px;
        background: url(/recruit/images/parallax_bg01.jpg) center 0 no-repeat fixed;
        background-size: auto 100%;
    }

    #intro {
        padding-top: 60px;
        height: 1000px;
    }

    #parallaxArea {
        padding-bottom: 530px;
    }

    #section02 {
        height: 750px;
    }

    #section02 p {
        line-height: 2em;
        text-align: left;
    }

    .section02Image {
        height: 750px;
        background-size: auto 100%;
        background: url(/recruit/images/parallax_bg02.jpg)right bottom no-repeat fixed;
    }

    #section02 .inner dl {
        width: 265px;
        position: relative;
        height: 370px;
        padding: 20px 0 20px 20px;
    }

    #section02 .inner dt {
        float: none;
        position: absolute;
        top: 56%;
        width: 11%;
        writing-mode: vertical-rl;
        -moz-writing-mode: vertical-rl;
        -o-writing-mode: vertical-rl;
        -webkit-writing-mode: vertical-rl;
    }

    #section02 .inner dl dt:nth-child(1) {
        left: 12px;
    }

    #section02 .inner dl dt:nth-child(3) {
        left: 43px;
    }

    #section02 .inner dl dt:nth-child(5) {
        left: 73px;
    }

    #section02 .inner dl dt:nth-child(7) {
        left: 107px;
    }

    #section02 .inner dl dt:nth-child(9) {
        left: 138px;
    }

    #section02 .inner dl dt:nth-child(11) {
        left: 169px;
    }

    #section02 .inner dl dt:nth-child(13) {
        left: 200px;
    }

    #section02 .inner dl dt:nth-child(15) {
        left: 231px;
    }

    #section02 .inner dd span {
        margin: 0 auto;
        position: absolute;
        bottom: 0;
        right: 0;
        width: 20px !important;
    }

    #section02 .inner dd.graph1 span {
        height: 100%;
    }

    #section02 .inner dd.graph2 span {
        height: 80%;
    }

    #section02 .inner dd.graph3 span {
        height: 60%;
    }

    #section02 .inner dd.graph4 span {
        height: 55%;
    }

    #section02 .inner dd.graph5 span {
        height: 30%;
    }

    #section02 .inner dd.graph6 span {
        height: 20%;
    }

    #section02 .inner dd.graph7 span {
        height: 10%;
    }

    #section02 .inner dd.graph8 span {
        height: 5%;
    }

    #section02 .inner dd {
        position: relative;
        display: inline-block;
        width: 20px;
        height: 175px;
        margin: 0 3px;
    }

    #section02 .inner dd:nth-child(2) {
        margin-left: -6px;
    }

    #section02 .inner dd:last-child {
        margin: 0;
    }

    #section03 .section03Image {
        height: 1265px;
    }

    #section03 h2.type2-2 {
        width: 100%;
    }

    #section03 .candidateImage li {
        display: inline-block;
        width: 29%;
        margin: 0 auto;
    }

    #section03 .candidateImage li:nth-child(2),
    #section05 .candidateImage li:nth-child(2) {
        margin: 0 12px;
    }

    #section03 .column,
    #section05 .column {
        width: 100%;
    }

    #section04 h2.type3 {
        width: 100%;
        font-size: 22px;
    }

    .environmentImage2 {
        margin: -5px;
    }

    #section04 .cloumn2 {
        display: block;
    }

    #section04 .cloumn2 p {
        width: 100%;
        display: block;
        padding: 0;
    }

    #section04,
    .section04Image {
        height: 830px;
    }

    #section05 h2.type2-2 {
        width: 100%;
        font-size: 20px;
    }

    #section05,
    .section05Image {
        height: 800px;
    }

    #section06 .candidateImage {
        width: 100%;
        height: 484px;
        padding-bottom: 40px;
    }

    #section06 .candidateImage li {
        width: 47%;
    }

    #section03 .column,
    #section05 .column {
        margin-right: 0;
    }

    #section06 .candidateImage li:nth-child(odd) {
        margin-right: 14px;
    }

    #section06,
    .section06Image {
        height: 670px;
    }

    #titleArea {
        text-align: center;
    }

    #titleArea img {
        height: 180px;
    }

    #titleArea .titleInline p {
        margin: 20px 0;
    }

    #titleArea .logoBig {
        height: 70px;
        margin: 0 18px;
    }

    #titleArea .titleInline p {
        letter-spacing: 0.2rem;
    }

    #titleArea ul {
        margin: 0;
    }

    #titleArea #headline {
        text-align: left;
    }

    #titleArea #headline .hedlineTitle {
        display: block;
    }

    #titleArea #headline li {
        display: inline-block;
    }

    #titleArea #headline li a {
        font-size: 18px;
    }

    .peopleBox .peopletitle img {
        margin-right: 0.5em;
    }

    #ceomessage .messageArea {
        width: 100%;
        margin: 0;
    }

    #ceomessage .messageArea img {
        width: 1em;
        display: inline-block;
        height: 1em;
        border: none;
        visibility: hidden;
    }

    .trainingTable {
        border: 1px solid #9ba4a4;
    }

    .trainingContents {
        display: none;
    }

    .trainingTable dl {
        display: block;
        position: relative;
    }

    .trainingTable dl:nth-child(2) {
        border-top: none;
    }

    .trainingTable dt {
        display: block;
        width: auto;
    }

    .trainingTable dd {
        padding: 0.8rem 1rem;
        border-left: none;
        display: block;
        width: 89%;
    }

    .trainingTable dd p,
    .trainingTable dd ol {
        display: block;
    }

    .trainingTable dd p {
        color: #00b4cc;
        font-weight: bold
    }

    .trainingImages a {
        float: none;
        padding: 1rem 0;
        text-align: right;
    }

    .trainingContentsinnerTitle,
    .trainingTable ol {
        display: block;
    }

    .trainingContentsinnerTitle {
        display: block;
    }

    .trainingContentsinnerTitle span {
        display: block;
    }

    #employment {
        width: 100%;
    }

    #stepNav ul {
        margin: 0 auto 50px;
    }

    #stepNav ul li:first-child {
        margin-right: 10px;
    }

    #stepNav ul li a {
        width: 126px;
        height: 60px;
    }

    #stepNav ul li img {
        top: -20px;
        left: -60px;
        width: 175%;
    }

    #stepNav ul li:last-child a p span {
        letter-spacing: 0.1em !important;
    }

    #stepNav .stepNavExp {
        font-size: 13px;
        display: none;
    }

    .ui-tabs-anchor span {
        padding-bottom: 0 !important;
        margin-bottom: 10px !important;
        margin-top: -6px;
        font-size: 16px !important;
        letter-spacing: 0.3em !important;
    }

    #stepNav ul li:first-child p,
    #stepNav ul li:last-child p {
        top: 0;
        width: 87px;
        padding: 10px 12px;
        width: 100%;
    }

    .flowExp {
        display: block;
    }

    .flows li {
        display: table;
    }

    .flows li span,
    .flows li p {
        display: table-cell;
        width: 40px;
        padding: 35px 0;
    }

    .flows li span {
        line-height: 1em;
    }

    .flows li p {
        width: 298px;
        padding: 30px 0 1em 1em;
        vertical-align: top;
    }

    .flows li:nth-child(1) p {
        padding: 1em 0 1em 1em;
    }

    .flows li span:after {
        bottom: -39px;
        border: 19px solid transparent;
    }

    .flows li:nth-child(1) span {
        background: #005F6B;
        padding-top: 1em !important;
    }

    .flows li:nth-child(1) span:after {
        border-top: 20px solid #005F6B;
    }

    .flows li:nth-child(2) span {
        background: #007483;
    }

    .flows li:nth-child(2) span:after {
        border-top: 20px solid #007483;
    }

    .flows li:nth-child(3) span {
        background: #008A9C;
    }

    .flows li:nth-child(3) span:after {
        border-top: 20px solid #008A9C;
    }

    .flows li:nth-child(4) span {
        background: #009FB4;
    }

    .flows li:nth-child(4) span:after {
        border-top: 20px solid #009FB4;
    }

    .flows li:nth-child(5) span {
        background: #00B4CC;
    }

    .flows li:nth-child(5) span:after {
        border-top: 20px solid #00B4CC;
    }

    .flows2 {
        margin-top: 20px;
    }

    .flows2 li {
        display: block;
        width: 100%;
        margin: 0 0 20px 0 !important;
    }

    .flows2 li:after {
        border: 20px solid transparent;
        border-top: 20px solid #005F6B;
        top: 179px;
        right: 0;
        left: 0;
    }

    #queryBox {
        padding: 15px;
    }

    .flows2 li:nth-child(2):after {
        top: 203px;
    }

    #queryBox>p {
        width: 100%;
        padding: 30px 20px;
    }

    .exp {
        width: 90%;
    }

    #tableType2 {
        width: 100%;
    }

    #tableType2 dt,
    #tableType2 dd {
        padding: 20px 0;
    }

    #tableType2 dl:first-child dd {
        line-height: 1em;
    }

    .academicBackground {
        -moz-column-count: 1;
        -webkit-column-count: 1;
        -o-column-count: 1;
        -ms-column-count: 1;
    }

    #tableType2 p {
        margin-top: 10px;
    }

    .academicBackground li {
        font-size: 15px;
    }

    #commonContents #slider.flexslider {
        width: 100%;
    }

    #commonContents .flexslider {
        width: 100%;
    }


    /*スムースリンクのための画像高さ設定*/
    #carousel,
    #carousel img {
        height: 70px;
    }

    #carousel li {
        width: 93px !important;
    }

    #slider .flex-viewport {
        margin-top: 0;
    }

    #tableType1 {
        width: 100%;
    }

    #tableType1 dt {
        display: block;
        float: none;
        color: #00b4cc;
        padding: 16px 0 14px 0;
    }

    .officeEventIndex dt {
        width: 3em !important;
    }

    #eventTable ul li img {
        height: 142px;
        margin: 0 0 1px 0;
    }

    #eventTable p {
        margin: 10px 0;
        font-size: 15px;
    }

    #tableType1>dd {
        padding: 0 0 14px 15px;
    }

    .officeEventIndex li a {
        font-size: 1rem;
        padding: 10px 8px 9px 5px;
    }

    .indexMenu li:nth-child(odd) {
        margin-right: 0;
    }

    .messageBox {
        width: 100%;
        margin-right: 0;
    }

    .messageBox:last-child {
        margin-top: 50px;
    }

    .directorPic {
        height: 150px;
    }

    .philosophy {
        width: 90%;
        font-size: 15px;
        line-height: 1.8em;
    }

    #sloganBox li {
        margin: 0 auto 20px;
        width: 100%;
    }

    #sloganBox p span {
        font-size: 28px;
        margin-bottom: 10px;
    }

    #sloganBox li p {
        height: auto;
        padding: 10px;
        font-size: 13px;
    }

    #sloganBox li:nth-child(even) {
        margin: 0 0 20px 0;
    }

    .figImage img {
        width: 100%;
    }

    .partnerList {
        width: auto;
        -moz-column-count: 1 !important;
        -webkit-column-count: 1 !important;
        -o-column-count: 1 !important;
        -ms-column-count: 1 !important;
    }

    #tableType1.history dd {
        padding: 0 0 14px 15px;
    }

    #tableType1.contact dt {
        width: 6em;
    }

    #tableType1.contact dd {
        padding: 16px 0 14px 15px;
    }

    #tableType1.contact dd:nth-child(4) {
        padding: 16px 0 14px 20px;
    }

    #sloganBox {
        width: 90%;
    }

    .mapGoogle iframe {
        width: 268px;
        height: 350px;
    }

    .partnerText {
        width: 90%;
    }

    .partnerText ul {
        font-size: 13px;
        line-height: 1.5em;
        text-indent: 0;
    }

    .partnerText ul li:nth-child(4) a {
        display: block;
        text-align: right;
    }

    .googleLink {
        display: none;
    }

    .googleLink_mobile {
        display: block;
    }

    .security h2.type1 {
        font-size: 30px;
    }

    /*system_integration*/
    .chartImage img {
        width: auto;
    }

    .chartImage ul {
        height: 240px;
    }

    .chartImage li:nth-child(1) {
        top: -18px;
        left: 0;
    }

    .chartImage li:nth-child(2) {
        top: 147px;
        right: 170px;
    }

    .chartImage li:nth-child(1) a:after,
    .chartImage li:nth-child(2) a:after {
        display: none !important;
    }

    .chartImage li:nth-child(1) a:hover,
    .chartImage li:nth-child(2) a:hover {
        color: #ccc;
    }

    #systemintegration,
    #development,
    #relationship {
        width: 100%;
    }

    .lev1Head {
        margin: 0 0 20px !important;
        padding: 0 20px 10px !important;
    }

    .guideCap {
        margin: 0 10px 10px;
    }

    .lev3 li {
        padding: 0;
    }

    .listDisk {
        padding: 0 0 0 2em !important;
    }

    .gIcon {
        width: 100px;
        height: 100px;
    }

    .lev1 {
        width: 100%;
    }

    .lev2 {
        display: block;
    }

    .lev2>li {
        position: relative;
        display: block;
    }

    .lev2>li:nth-child(2) {
        padding: 0;
    }

    #footerNavi ul:last-child {
        margin-top: 20px;
    }

    .exp {
        margin: 0 auto;
        width: 90%;
    }

    #apply_form dl:nth-child(2),
    #apply_form dl:nth-child(3),
    #apply_form dl:nth-child(4),
    #apply_form dl:nth-child(5) {
        float: none;
        width: 100%;
    }

    input#mailaddress,
    input#schoolName {
        border-right: 1px solid #00b4cc;
    }
}



/*header*/

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

@media screen and (max-width: 375px) {
    .mobileMenu .subList dd li a {
        font-size: 12px
    }
    #minlab .mainImage {
        height: 130px;
    }
}

@media screen and (max-width: 320px) {
    #designIntro p {
        font-size: 13px;
        letter-spacing: 0;
    }

    #designImage .webdesignImage .webdesignText {
        right: 11px !important;
    }

    #designImage .mobileappsImage .webdesignText {
        z-index: 0;
    }

    #designImage .mobileappsImage .webdesignText h3 {
        margin: 0 0 20px -16px;
    }

    #designImage .webdesignImage .imageBg5 {
        top: 259px;
        left: 30px;
    }

    #designImage .webdesignImage .imageBg4 {
        right: -48px;
    }

    #designImage .mobileappsImage .imageBg1 {
        right: -14px;
    }

    #designImage .mobileappsImage .imageBg2 {
        width: 244px;
        right: -18px;
    }

    #designImage .mobileappsImage .imageBg3 {
        bottom: -15px;
        left: -31px;
    }

    #designImage .mobileappsImage .imageBg5 {
        right: -9px;
    }

    #designImage .mobileappsImage .imageBg7 {
        right: 155px;
    }

    #designImage .mobileappsImage .imageBg8 {
        right: 176px;
    }

    #portItem4 .port_Catch>p {
        padding-left: 8px;
    }

    #portItem4 .port_Catch {
        height: 135px;
    }

    #portItem4 .port_Catch img {
        height: 60px;
    }

    #portItem4 .portContent {
        height: 190px;
    }
}

@media screen and (max-width: 320px) {
    .subList dd {
        padding: 5px;
    }

    .mobileMenu .subList dd li:nth-child(odd) {
        margin-right: 5px;
    }

    .mobileMenu .subList dd li {
        margin-bottom: 5px;
        width: 49% !important;
    }

    .mobileMenu .subList dd li a {
        padding: 10px 12px;
    }

    .skilmap_thamb li {
        width: 46%;
        margin-right: 15px;
    }

    .skilmap_thamb li a {
        height: 100px;
    }

    h2.type1 {
        font-size: 28px !important;
    }

    /*portfolio*/
    #portItem3 .portContent_det img {
        width: 60%;
        margin: auto;
    }
}