@charset "UTF-8";


/*-----------------------------------

	base

-----------------------------------*/

@font-face{
    font-family:'proxima_nova_bold';
    src:url('../../shared/fonts/proxima_nova_bold-webfont.eot?#iefix') format('embedded-opentype'),
        url('../../shared/fonts/proxima_nova_bold-webfont.woff') format('woff'),
        url('../../shared/fonts/proxima_nova_bold-webfont.ttf')  format('truetype'),
        url('../../shared/fonts/proxima_nova_bold-webfont.svg#svgId') format('svg');
}
@font-face{
    font-family:'proxima_nova_light';
    src:url('../../shared/fonts/proxima_nova_light-webfont.eot?#iefix') format('embedded-opentype'),
        url('../../shared/fonts/proxima_nova_light-webfont.woff') format('woff'),
        url('../../shared/fonts/proxima_nova_light-webfont.ttf')  format('truetype'),
        url('../../shared/fonts/proxima_nova_light-webfont.svg#svgId') format('svg');
}

h1,h2,h3,h4,h5,h6,p,dl,dt,dd,ol,ul,li,img{font-weight:normal;margin:0;padding:0;}

html{
	font-size:62.5%;
	margin:0;
	padding:0;

    -webkit-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}

body{
	background-color:#ffffff;
	width:100%;
	margin:0;
	padding:0;
	color:#333333;
	font-family: proxima_nova_light, Verdana, Roboto, "Droid Sans", "游ゴシック", YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif;
    -webkit-text-size-adjust: 100%;
}

ul,li{
	list-style-position:inside;
	list-style:none;
}

img{
	vertical-align:middle;
}

a                   {color:#333333;  text-decoration:none;}
a:visited           {color:#333333;  text-decoration:none;}
a:hover             {color:#333333;  text-decoration:underline;}
a:active            {color:#333333;  text-decoration:none;}
::-moz-selection{background: #333333; color: #ffffff;}
::selection {background: #333333; color: #ffffff;}


#bg{
    background-color:#efefef;
    border-bottom-left-radius: 500px;
    height:100%;
    left:7px;
    margin:0;
    min-width:600px;
    position:fixed;
    overflow-x: hidden;
    overflow-y: auto;
    bottom:7px;
    width:100%;
    z-index:1;
    -webkit-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;

    -webkit-overflow-scrolling: touch;

}
#bg2{
    /*background-color:#efefef;*/
    border-bottom-left-radius: 500px;
    content: "";
    height:100%;
    left:7px;
    margin:0;
    min-width:600px;
    position:fixed;
    top:-15px;
    width:100%;
    z-index:1;
    -webkit-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}
#r{
    background:url(../images/r.svg) no-repeat;
    bottom: 15px;
    height:100px;
    left: 13px;
    pointer-events: none;
    width:100px;
    position:fixed;
    z-index:9;

    -webkit-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}

#container{
    position: relative;
    width: 100%;
    z-index: 2;

    -webkit-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}


/*-----------------------------------
    IPAD 768px
-----------------------------------*/
@media screen and (min-width : 768px){
    #bg, #bg2{
        left:25px;
        bottom:15px;
    }

    #r{
        left: 40px;
        bottom: 25px;
    }
}

/*-----------------------------------
    PC 1000px
-----------------------------------*/
@media screen and (min-width : 1000px)
{

}

/*-----------------------------------

	header

-----------------------------------*/
header{
    box-sizing:border-box;
    left:60px;
    position:fixed;
    pointer-events: none;
    top:50%;
    margin:-40px 0 0 0;
    z-index:10;

    -webkit-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}
h1{
    color: rgba(51, 51, 51, 1);
    font-size:4.5rem;
    line-height: 1;
    position:relative;
    text-align:left;
    width:100%;

    -webkit-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}


/*-----------------------------------

	NAV

-----------------------------------*/

nav{
    left:20px;
    position:fixed;
    text-align:left;
    top:1rem;
    width:230px;
    z-index:10;
}
nav>ul>li{
    box-sizing:border-box;
    font-size:1.8rem;
    font-weight:normal;
}
nav>ul>li .fa-angle-down{
    font-size:2rem;
    font-weight:normal;
    vertical-align:baseline;
    margin-left:1.0rem;
}
nav>ul>li .fa-angle-right{
    font-size:2rem;
    font-weight:normal;
    vertical-align:baseline;
    margin-right:0.6rem;
}

body.works nav{
    display: inline-block;;
    left:20px;
    position:absolute;
    text-align:left;
    top:1rem;
    /*width:230px;*/
    z-index:10;
}

/*-----------------------------------
    IPAD 768px
-----------------------------------*/
@media screen and (min-width : 768px){
    nav{
        left:40px;
    }
}


/*-----------------------------------

	MAIN CONTENTS

-----------------------------------*/

div.content{
    box-sizing:border-box;
    margin-bottom: 20%;
    margin-left: 50%;
    left: -350px;
    position: relative;
    top: 0px;
    width: 700px;
    z-index:9;

    -webkit-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}
div.content > section{
    /*background-color: rgba(255,200,255,0.5);*/
    box-sizing:border-box;
    /*border: 1px solid #FF0000;*/
    display:block;
    margin-bottom: 50px;
    position:relative;
    text-align: right;
    width: inherit;
    z-index:5;
    
    -webkit-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;
}

div.content > section h2{
    border-right: 2px dotted #d4d4d4;
    font-size: 1.6rem;
    font-weight: normal;
    line-height: 1.6rem;
    margin-bottom: 1.3rem;
    padding: 0.5rem;
}
div.content > section h2 > span{
    font-size: 1.3rem;
    font-weight: normal;
}
div.content > section p{
    display: block;
    font-size: 1.4rem;
    line-height: 1.3em;
    padding-right: 0.6rem;
    /*text-align: right;*/
}
div.content > section p.txt{
    display: inline-block;
    padding-bottom: 0.5rem;
    text-align: left;
}
div.content > section a{
    display: block;
    font-size: 1.2rem;
    line-height: 1.2em;
    padding:15px 0;
}

div.content > section > div.imgcont > a{
    padding:0;
}

div.content > section > div.imgcont{
    text-align: left;
    margin: 20px 0;
    width: 100%;
}
div.content > section img{
    margin-bottom: 30px;
    width: 100%;
}
div.content > section img.last{
    margin-bottom: 7px;
}

div.content > section.top{
    height: 1000px;
}
div.content > section.top > h2{
    border-right:none;
    bottom:120px;
    right: 0px;
    padding: 0;
    position: absolute;
}
div.content > section.top > h2 .fa-angle-up{
    font-size:1.4rem;
    font-weight:normal;
    vertical-align:baseline;
    margin-left:1.0rem;
}
div.content > section.top > h2 > a {
    display: block;
    background-color: rgba(51, 51, 51, 1);
    border-radius: 10px;
    color: #FFFFFF;
    font-size: 1.4rem;
    font-weight: normal;
    line-height: 1.3em;
    text-align: center;
    padding:15px 30px;
}
div.content > section.top > h2 > a:hover {
    text-decoration:none;
    background-color: rgba(51, 51, 51, 0.8);
}


/*-----------------------------------

	FOOTER

-----------------------------------*/

footer{
    bottom: 15px;
    box-sizing:border-box;
    display: block;
    left: 13px;
    position:fixed;
    z-index:11;
}
footer>div.inner{
    height:110px;
    display:block;
    position:relative;
    width:220px;
    z-index:1;
}
footer>div.inner a{
    background-color:rgba(212,212,212,0.2);
    box-sizing:border-box;
    border:1px solid #333333;
    display: inline-block;
    font-size:2rem;
    line-height:1;
    bottom:35px;
    padding:2rem;
    position:absolute;
    z-index: 1;
}
footer>div.inner a.fb{
    left:80px;
}
footer>div.inner a.mail{
    left:15px;
}
footer>div.inner a:hover{
     background-color:rgba(255,255,255,0.6);
}
footer>div.inner p.copy{
    left:15px;
    bottom:15px;
    font-size:1rem;
    position:absolute;
}

/*-----------------------------------
    IPAD 768px
-----------------------------------*/
@media screen and (min-width : 768px){
    footer{
        left: 40px;
        bottom: 25px;
    }
}


/*-----------------------------------

    ASIDE about

-----------------------------------*/

aside#about{
    background-color: #ffffff;
    box-sizing:border-box;
    display:block;
    left:0;
    padding: 3rem 0;
    position:absolute;
    overflow:hidden;
    top:-300px;
    text-align: center;
    width:100%;
    z-index:20;
    /*
    -webkit-transition: all 0.2s ease-in-out;
    transition: all 0.2s ease-in-out;*/
}

aside#about > article{
    background:url(../images/prof.png) no-repeat center top;
    display: inline-block;
    position:relative;
    min-height: 150px;
    text-align: left;
    width: 100%;
}
aside#about > article > #profile,
aside#about > article > #award{
    margin: 0 auto;
    width: 80%;
}
aside#about > article > #profile{
    margin-top:150px;
}
aside#about > article > #profile p,
aside#about > article > #award p{
    font-size:1.6rem;
    line-height:1.5;
}
aside#about > article > #profile p:first-child{
    padding-top: 1rem;
}
aside#about > article > #profile .fa-child{
    font-size:1.4rem;
    vertical-align:baseline;
    margin-right:0.2rem;
}
aside#about > article > #profile p.tright{
    text-align: center;
}
aside#about > article > #profile p > a.btn_award{
    box-sizing:border-box;
    display: inline-block;
    font-size:1.6rem;
    line-height:1;
    margin-top: 2rem;
}
aside#about > article > #profile p > a.btn_award > .fa-angle-down{
    font-size:2rem;
    font-weight:normal;
    vertical-align:baseline;
    margin-left:1.0rem;
}

aside#about > article > #award{
    display: none;
}
aside#about > article > #award .fa-star{
    font-size:1.3rem;
    vertical-align:baseline;
    margin-right:0.5rem;
}

aside#about > a.btn_close{
    box-sizing:border-box;
    bottom: 1rem;
    display: block;
    font-size:1.8rem;
    left: 20px;
    position: absolute;
}
aside#about > a.btn_close > .fa-angle-up{
    font-size:2rem;
    font-weight:normal;
    vertical-align:baseline;
    margin-left:1.0rem;
}

/*-----------------------------------
    IPAD 768px
-----------------------------------*/
@media screen and (min-width : 768px){
    aside#about > article{
        background:url(../images/prof.png) no-repeat left top;
        width: auto;
    }
    aside#about > article > #profile,
    aside#about > article > #award{
        margin-left: 170px;
        margin-top: 0px;
        width: 500px;
    }
    aside#about > article > #profile p.tright{
        text-align: left;
    }
    aside#about > a.btn_close{
        left: 40px;
    }
}