@charset "utf-8";
/**/

.br {display: block !important;}

/*BACK
--------------------------------------*/
section#backArea {
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#010101+1,030303+41,030303+99 */
background: #fff;
}

#back {
	width:80%;
	margin:0 auto;
}

#back h1{
	padding:80px 0;
}


#back h1::before{height:0}





/**/



#main{

	overflow:hidden;

	position:relative;

}



#main+div{padding-bottom:80px}



#main>*{float:left}



#main-img{width:45%}



#main-txt{

	padding-left:3%;

	width:52%

}



.nameBox {

	padding:0 0 50px 0;

}



.nameBox dl {

}



.nameBox dt {
    font-family: 'Oswald', sans-serif;
    color: #333;
    font-size: 180%;
    letter-spacing: 5px;
    padding: 0 0 20px 0;
    display: block;
}



.nameBox dd {

	padding:0 0 10px 0;

	width:80%;

}



.name_jpn p{

    font-size: 160%;

    letter-spacing: 5px;

    color: #000;

    display: inline;

    padding: 0 15px 0 0;

}



.name_jpn span {

    letter-spacing: 3px;

    color: #666;

    font-size: 100%;

    display: inline;

}



/**/



#txt{

}



#txt>*{
    background: #fff;
    border-radius: 10px;
    box-sizing: border-box;
    overflow: hidden;
    padding: 30px 0;
}



#txt>*+*{margin-top:25px}



#txt h3 {
    font-family: 'Josefin Sans', sans-serif;
    color: #999;
    font-weight: bolder;
    font-size: 200%;
    letter-spacing: 4px;
    padding: 0 0 10px 0;
}


#txt p{
    color: #000;
    font-size: 90%;
	padding: 0;
	margin: 0;
    line-height: 2.2em;
    letter-spacing: 2px;
}



#txt dl,

#txt figure{float:left}



#txt dl{

	overflow:hidden;

	width:70%

}



#txt figure{



}



#txt figure img {

	vertical-align:bottom;

	border:1px solid #ccc;

}



#txt dl>*{float:left}



#txt dt{

    font-family: 'Josefin Sans', sans-serif;

    clear: both;

    width: 100px;

    color: #999;

    font-size: 100%;

    letter-spacing: 3px;

    font-weight: bolder;

    padding: 3px 30px 0 0;

}



#txt dl>*:nth-child(2)~*{margin-top:20px}



#txt dd{

    color: #000;

    font-size: 90%;

    letter-spacing: 2px;

}



#txt dd a {

	color:#000;

}



#txt dd a:hover {

	text-decoration:none;

}



/**/



.sub{

	margin-top:80px;

	overflow:hidden

}



.sub>*{

	float:left;

	overflow:hidden;

	width:48%

}



.sub>*+*{padding-left:4%}



.sub h4{

	text-align:center;

    padding: 0 0 20px 0;

	position:relative;

    border-bottom: 1px solid #eee;

    margin: 0 0 30px 0;



}

.sub h4:before {

    position: absolute;

    top: 30%;

    left: 0;

    z-index: 1;

    content: '';

    display: block;

    width: 25%;

    height: 2px;

	opacity:0.7;

    background-color: #fff;

}



.sub h4:after {

    position: absolute;

    top: 30%;

    right: 0;

    z-index: 1;

    content: '';

    display: block;

    width: 25%;

    height: 2px;

	opacity:0.7;

    background-color: #fff;

}



.sub h4 span {

    font-family: 'Josefin Sans', sans-serif;

    font-size: 150%;

    font-weight: bolder;

    color: #000;

    letter-spacing: 5px;

}



.sub h4~div{

	float:left;

	width:50%

}



.sub p{

    color: #000;

    font-size: 90%;

    margin: 0 0 0 25px;

    letter-spacing: 2px;

    line-height: 2.5em;

}



/*WORK

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



section#workArea {

	background:#fff;

	border-top:1px solid #ccc;

	padding:30px 0 300px 0;

}



#work {

	width:80%;

	margin:0 auto;

}



#work>h2{

	padding:30px 0;

	text-align:center

}



#imgs{overflow:hidden}



#imgs>*{

	float:left;

	margin-top:2%;

	text-align:center;

	width:25%

}



#imgs img{width:90%}



/**/





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

/*BACK

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



section#backArea {

background: #fff;

}





#back {

	width:96%;



}



#back h1{

    padding: 40px 0;

    width: 70%;

    margin: auto;

}





#work {

	width:100%;

}





/**/

#txt>*{

    padding: 0;

}



#txt>*+*{margin-top:25px}



#txt h3 {

    font-family: 'Josefin Sans', sans-serif;

    color: #999;

    font-weight: bolder;

    font-size: 200%;

    letter-spacing: 4px;

    padding: 0 0 10px 0;

}





#txt p {

    font-size: 80%;

    line-height: 2em;

}



#txt dl,

#txt figure{float:left}



#txt dl{

	overflow:hidden;

	width: 100%;

	float: none;

}



#txt figure{width:30%}



#txt dl>*{float:left}



#txt dt{

    font-family: 'Josefin Sans', sans-serif;

    clear: both;

    width: 100px;

    color: #999;

    font-size: 100%;

    letter-spacing: 3px;

    font-weight: bolder;

    padding: 3px 30px 0 0;

    float: none;

}



#txt dl>*:nth-child(2)~*{margin-top: 0;}



#txt dd{

    padding: 10px 0 20px 0;

}





#txt dd a:hover {

	text-decoration:none;

}



.nameBox dt {

	font-size:120%;

}



}





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



#back h1{

    padding: 30px 0;

}



#back h1::before{height:0}



#back h1 img{width:100%}



/**/



#main+div{padding-bottom: 20px;}



#main>*{float:left}



#main-img{width: 60%;margin: 0 auto;float: none;}



#main-txt{

	padding-left: 0;

	width: 100%;

}



.nameBox {

	padding: 20px 0 0 0;

}



.nameBox dt {

    font-size: 130%;

    padding: 0 0 10px 0;

}



.nameBox dd {

	padding: 0 0 5px 0;

	width:60%;

}



.name_jpn p{

    font-size: 100%;

    padding: 0 5px 0 0;

}



/**/



#txt>*{

    padding:30px 0 0 0;

}



#txt>*+*{margin-top:25px}



#txt h3 {
    font-size: 160%;
    letter-spacing: 4px;
    padding: 5px 0 10px 5px;
}

#txt p{
    font-size: 90%;
    line-height: 2em;
    letter-spacing: 2px;
    padding: 0 0 20px 0;
}



#txt dl,

#txt figure{float: none;}



#txt dl{

	width: 70%;

	float: left;

}



#txt figure{text-align: center;padding: 20px 0 0 0;margin: 0;float: left;width: 30%;}



#txt dl>*{float: none;}



#txt dt{

    width: 100px;

    padding: 0 10px 5px 0;

}



#txt dl>*:nth-child(2)~*{margin-top: 0;}



#txt dd{

    font-size: 90%;

    letter-spacing: 2px;

    margin:0 0 10px 0;

}





#txt dd a:hover {

	text-decoration:none;

}



/**/



.sub{

	margin-top: 30px;

	text-align: c;

	overflow:hidden;

}



.sub>*{

	width: 47%;

	padding: 0 20px 20px 0;

}



.sub>*+*{padding-left: 0;}



.sub h4{

	text-align:center;

    padding: 0 0 20px 0;

	position:relative;



}

.sub h4:before {

    position: absolute;

    top: 22%;

    left: 0;

    z-index: 1;

    content: '';

    display: block;

    width: 10%;

    height: 2px;

    opacity:0.7;

    background-color: #fff;

}





.sub h4 span {

    font-size: 100%;

    font-weight: bolder;

}



.sub h4~div{

	float:left;

	width:50%

}



.sub p{margin: 0 0 20px;line-height: 2em;font-size: 0.8em;}



/*WORK

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



section#workArea {

	padding:50px 0 100px 0;

}



#work {

	width: 100%;

}



#work>h2{

    padding: 0 0 20px 0;

    text-align: center;

    width: 80%;

    margin: auto;

}



#work h2 img {

	width:50%;

}



#imgs{overflow:hidden}



#imgs>*{

	width: 33%;

}



#imgs img{width:90%}





}







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

.br {display: none !important;}	

#back {width: 90%;}



#back h1{

    padding: 30px 0 20px 0;

    margin:auto;

    width: 90%;

}



#back h1::before{height:0}



#back h1 img{width:100%}



/**/



#main{

	overflow:hidden;

	position:relative;

}



#main+div{padding-bottom: 20px;}



#main>*{float:left}



#main-img{
	width: 80%;
	float: none;
}


#main-txt{
	padding-left: 0;
	width: 100%;
}


.nameBox {

	padding:0 0 50px 0;

}



.nameBox dl {

}



.nameBox dt {

    font-size: 100%;

    padding: 20px 0 10px 0;

}



.nameBox dd {

	padding: 0 0 5px 0;

	width:80%;

}



.name_jpn p{

    font-size: 100%;

    padding: 0 5px 0 0;

}



.name_jpn span {

    color: #fff;

    letter-spacing: 3px;

    color: #666;

    font-size: 80%;

    display: inline;

}



/**/



#txt{

}



#txt>*{

    padding: 0;

}



#txt>*+*{margin-top:25px}



#txt h3 {
	font-size: 130%;
    letter-spacing: 2px;
	padding:5px 0 10px 0;
}

#txt p{
	font-size: 75%;
    line-height: 1.5em;
    padding: 0;
}



#txt dl,

#txt figure{float: none;}



#txt dl{

	width: 100%;

}



#txt figure{

	width: auto;

	text-align: center;

	padding:0;

	margin: 0;

	border:none;

}



#txt dl>*{float: none;}



#txt dt{

    width: 100px;

    padding:0 10px 0 0;

}



#txt dl>*:nth-child(2)~*{margin-top: 0;}



#txt dd{

    font-size: 80%;

    letter-spacing: 2px;

    margin:0;

}







#txt dd a:hover {

	text-decoration:none;

}



/**/



.sub{margin-top: 80px;overflow:hidden;}



.sub>*{

	float: none;

	width: 100%;

	padding: 0 0 20px 0;

}



.sub>*+*{padding-left: 0;}



.sub h4{

    padding: 0 0 10px 0;

}

.sub h4:before {

    position: absolute;

    top: 22%;

    left: 0;

    z-index: 1;

    content: '';

    display: block;

    width: 10%;

    height: 2px;

    opacity:0.7;

    background-color: #fff;





.sub h4 span {

    font-size: 100%;

    font-weight: bolder;

}



.sub h4~div{

	float:left;

	width:50%

}









/*WORK

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



section#workArea {

	background:#fff;

	padding:50px 0 300px 0;

}



#work {

	width: 90%;

}



#work>h2{

	padding: 0 0 30px 0;

	text-align:center;

}



#work h2 img {

	width:50%;

}



#imgs{overflow:hidden}



#imgs>*{

	float:left;

	margin-top:2%;

	text-align:center;

	width: 50%;

}



#imgs img{width:90%}





}