@charset "utf-8";

/*leyout------------------------*/
#contentInner{
  width:960px;
  margin:0 auto;
  padding-top:180px;
  position:relative;
 }

p{
    font-size: 13px;
    line-height: 1.3;
    color:#222;
}

h2{
  width:300px;
  height:50px;
  text-indent:100%;
  white-space:nowrap;
  overflow:hidden; 
  background:url(../img/profile.png) no-repeat;
}

#box{
    width:960px;
    margin:0 auto;
    overflow:hidden;
}

.left{
    width:450px;
    padding:70px 0px 40px;
    float:left;
}

.right{
    width:470px;
    padding:40px 10px;
    float:left;
}
.left h2{
  width:320px;
  height:120px;
  text-indent:100%;
  white-space:nowrap;
  overflow:hidden; 
  background:url(../img/magarifumiko3.png) no-repeat;
  position:absolute;
  top:520px;
  left:80px;
}
.right h3{
  width:160px;
  height:50px;
  text-indent:100%;
  white-space:nowrap;
  overflow:hidden; 
  background:url(../img/profile_profile.png) no-repeat;
  
}
dl{
  padding:0 20px 0 80px;}
dt{
    font-size: 13px;
    margin-bottom:3px;
    font-weight:bold;
    color:#666;
}
dd{
    padding-left:2em;
    margin-bottom:10px;
    font-size:12px;
}

.right h4{
  width:160px;
  height:50px;
  text-indent:100%;
  white-space:nowrap;
  overflow:hidden; 
  background:url(../img/profile_works.png) no-repeat;
  margin-top:15px;
}


.right p{
    padding:0 ;
}


#next{
    width:800px;
    margin:0 auto;
    overflow:hidden;
    padding:0;
}

#comment p{
  width:700px;
  height:350px;
  text-indent:100%;
  white-space:nowrap;
  overflow:hidden; 
  background:url(../img/fukidashi_profile.gif) no-repeat;
  position:absolute;
  top:660px;
  left:-50px;
  }

#character h3{
    float:right;
    margin-right:40px;
    transform: rotate(6deg);  /* 2D回転 */}

/*#next h3{
    width:300px;
  height:100px;
  text-indent:100%;
  white-space:nowrap;
  overflow:hidden; 
}*/

/*span{color:#0080C0;}*/


/*タブレット部分のスタイル  ーーーーーーーーーーーーーーーーーーーーーーー*/
@media screen and (max-width:959px){
#contentInner{
  width:640px;
  overflow: hidden;
}
    
h2{margin-left:20px;}   
    
#box{width:640px;
    }
    
.left {float:none;
       width:640px;
}
 
.left img{margin:0 100px ;}    
.left h2 {margin:0 110px ;}   
.right{
    float:none;
    width:640px;
    margin:280px 0 0 0;
    }
.right p{margin:10px 30px 50px 15px;}
.right dl{padding-left:20px;}    
#next{width:640px;
    }
    
#next h3{margin:0 200px 0 200px;
    }  
    
#comment p{
  top:640px;
  left:20px;
  }
}
    
/*スマホ部分のスタイル  ーーーーーーーーーーーーーーーーーーーーーーー*/
@media screen and (max-width:639px){
 #contentInner{
  width:320px;
}
    
#box{width:320px;
    }
    
.left {float:none;
       width:320px;
}
 
.left img{
    margin:0;
    width:100%;
    }    
.left h2 {
    margin-left:-45px ;
   -moz-background-size:80% 80%;
   background-size:80% 80%; 
    }   
.right{
    float:none;
    width:320px;
    margin:200px 0 0 0;
    }
.right p{margin:10px 30px 50px 15px;}
.right dl{padding-left:20px;}    
#next{width:320px;
    }
    
#next h3{margin:0 60px;
    }  
#comment p{
    width:320px;
   -moz-background-size:contain;
   background-size:contain;  
  top:600px;
  left:0px;
  }
    }