@charset "utf-8";

    * {
        margin: 0px;
        padding: 0px;
        overflow: visible;
    }
    html {
        overflow:scroll;
        border: none;
        font-size: calc( min(16px, max(10px, 2.4vw)) );
    }
    @media (-webkit-min-device-pixel-ratio: 2) ,  (min-resolution: 2dppx) { 
        html{
            font-size:  calc( min(8px, max(4px, 2vw)) + 0.5vw );
        }
    }
    img {
        border: none;
    }
    #topHalf a{
        color: yellow;
    }
    body{
        background: #f5fcf7;
        font-family: "メイリオ", Meiryo, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
        color : #040;
    }

    header{ 
        width: 100%;
        background: #4296ed;
        text-align: center;
        margin: 0px auto;
        padding: 0px;
        height: 390px;
        position: absolute;
    }
    header .wrapper{
        text-align: left;
    }
    #logo {
        width: 150px;
        margin: 5px;
    }

    #canvasWrapper{ 
        width:100%; 
        height:600px; 
        position:absolute; 
        top:0;
        /*background: linear-gradient(#4296ed 20%,   #f5fcf7 20% );*/
    }
    canvas{
        position:absolute;
        top:0;
        left: 0;
    }
    .main {
        width : 95%;
        margin : 0px auto;
        text-align: center;
        position: relative;
    }
    .main > div{
        margin: 0px auto;
    }
    #concept{
        font-family: 'M PLUS 1p', sans-serif;
        font-size: calc(2.3rem + 1vw);
        color: #ffff88;
        margin-top:40px;
        margin-bottom: 60px ;
        max-width: 95%;
    }
    .wrapper{
        margin: 0px auto;
        position: relative;
    }
    .title{
        color: white; /*#217428;*/
        font-family:  'M PLUS 1p', sans-serif;
        font-size: 2rem;
        background-image:   url(./img/title.png),    url(./img/title.png);
        background-repeat:no-repeat,  no-repeat;
        background-position:left center, right center;
        background-size: min(42px, 3rem);
        text-align: center;
        margin: 25px 2rem 0px 2rem;
    }
    .title div {
        background-image: linear-gradient(to right, rgba(255, 255, 255,1), rgba(255, 255,255,1) 3px, transparent 3px, transparent 8px);
        background-repeat: repeat-x;
        background-size: 11px 2px;
        background-position: left 2.6rem;
        padding-bottom: 0px;
        margin: 15px 4rem 10px 4rem;
    }
    #aboutArea, #careerArea{
        /*background: #4296ed;*/
        color: white;
        max-width: 900px;
        text-shadow: 1px 1px 0px #005;
        text-align: left;
    }
    #aboutArea p{
        width: 90%;
        margin: 0px auto;
        font-size: 1.2rem;
        word-break: keep-all;
    }
    #aboutArea .title{
        background-image:   url(./img/icon_human.png),    url(./img/icon_human.png);
    }
    #careerArea .title{
        background-image:   url(./img/icon_career.png),    url(./img/icon_career.png);
    }
    #worksArea .title{
        background-image:   url(./img/icon_work.png),    url(./img/icon_work.png);
        color: #00a030;
    }
    #worksArea .title div{
        background-image: linear-gradient(to right, rgba(0, 150, 45,1), rgba(0, 150, 45,1) 3px, transparent 3px, transparent 8px);
    }
    .center{
        text-align: center;
    }
    .year{
        clear: both;
        float: left;
        font-size: 1rem;
    }
    #career{
        padding: 0px 20px;
        font-size: 1rem;
    }
    #careerArea p, #careerArea .year {
        line-height: 120%;
    }
    #careerArea p{
        text-align: left;
        margin-left: 4rem;
        margin-bottom:10px;
    }
    .clearfix::after{
        content: ".";
        display: block;
        clear: both;
        height: 0;
        visibility: hidden;
    }
    .workTitle{
        margin: 10px 10px;
        font-size: 1.2rem;
    }
    .site{
        border-bottom: 1px solid #ada;
        padding: 10px 12px;
        position: relative;
        font-size: max(0.9rem, 12px);
    }
        .site:nth-child(even){
            background: white;
        }
        .site p{
            max-width: 400px;
            text-align: left;
            padding-left: 5px;
            margin: 0px auto;
        }

        .site .img{
            height: 200px;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .site img{
            max-width: 100%;
            max-height : 200px;
        }
        .site.noImg{
            padding-top: 30px;
            height: 180px;
            font-size: 0.9rem;
        }
        .lang{
            margin-top: 10px;
        }
    
    
    footer{
        margin-top: 20px;
        clear: both;
    }
        footer div{
            margin : 0px auto;
        }
        #footer_image{
            text-align: left;
        }
        #footer_image img{
            width : 23.22%;
            padding-left : 2%;
            vertical-align:bottom;
        }
        #copyright{
            background: #993333;
            color : #fff;
            padding : 5px 10px 2px 0px;
            text-align: right;
            font-size: 0.8rem;
        }
    .r{
        text-align: right;
    }
    .l{
        text-align: left;
    }
    .ce{
        text-align: center;
    }
    .fl{
        float : left;
    }
    input{
        padding: 10px;
        font-size: 1.3rem;
    }
    
    
    /* -------------------------------------------------------------------  */
    @media (min-width: 480px)  {

        #concept{
        }
        #aboutArea p{
            text-align: center;
        }
        .title{
        }
        .title div {
        }
        .workTitle{
            white-space: nowrap;
        }
    }
    /* for Tablet */
    @media (min-width: 768px) and (max-width: 819px) {

        #concept{
        }
        #career{
            padding: 0px 30px;
        }
        .site{
            text-align: center;
            padding: 10px 25px;
            margin: 0px auto;
        }
    }
    /* for PC */
    @media (min-width: 820px) and (max-width: 1279px),  (-webkit-min-device-pixel-ratio: 2) and (min-width: 600px) and (max-width: 1279px),  (min-resolution: 2dppx) and (min-width: 600px) and (max-width: 1279px){
        #logo {
            width: 200px;
            margin: 5px 15px;
        }
        #concept{
        }
        .main{
            width: 100%;
        }
        #career{
            padding: 0px 50px;
        }
        .wrapper{
            width : min(100vw, 820px);
        }
        .site{
            float: left;
            width: calc(50% - 20px);
            padding: 10px 10px;
            height: 400px;
        }
        .site:nth-child(even){
            background: unset;
        }
        .site:nth-of-type(4n+2), .site:nth-of-type(4n+3){
            background: white;
        }
        #works .site:nth-of-type(2n+1){
            clear: both;
        }
        .lang{
            position: absolute;
            bottom: 10px;
            right: 0;
            left: 0;
        }
    }
    /* for Wide PC */
    @media (min-width: 1280px) {
        
        #logo {
            width: 200px;
            margin: 5px 15px;
        }
        #concept{
        }
        .main{
            width: 1280px;
        }
        .wrapper{
            width : 980px;
        }
        #aboutArea p{
        }
        .site{
            float: left;
            width: 400px;
            text-align: center;
            height: 400px;
        }
        #career{
            padding: 0px 70px;
        }

        .site .img{
            width: 400px;
            height: 200px;
            min-height: 200px;
            text-align: center;
        }
        .site p{
            padding-bottom: 20px;
        }
        #works .site:nth-of-type(3n+1){
            clear: both;
        }
        h1{
            clear: both;
        }
        .lang{
            position: absolute;
            bottom: 10px;
            right: 0;
            left: 0;
        }
    }
    @media (-webkit-min-device-pixel-ratio: 2) and (max-width: 979px),  (min-resolution: 2dppx) and (max-width: 979px){ 
        
        #logo {
            width: 100px;
        }
        #aboutArea p{
            word-break: unset;
        }
        .site{
            max-height: 260px;
        }
        .site .img{
            height: 100px;
        }
        .site img{
            max-width: 100%;
            max-height : 100px;
        }
    }