/*----------COVER----------*/

#hbgA {
    position : absolute;
	width : calc(50% + 595px);
	height : 500px;
	background : #a02832;
	background-image : url(../common/bamboo1.svg);
	background-size : 400px;
	background-repeat : no-repeat;
	background-position : calc(50% + 480px) 120px;
	background-attachment : fixed;
	top : 140px;
	right : 0;
	z-index : 1;
}

#hbgB {
	position : absolute;
	width : 100%;
	height : 570px;
	background-color : #f0e6d7;
	background-image : url(../common/bamboo2.svg);
	background-size : 200px;
	background-repeat : no-repeat;
	background-position : calc(50% - 240px) -100px;
	background-attachment : fixed;
	top : 0;
	right : 0;
	z-index : 0;
}

dl#hmsg {
	position : absolute;
	width : 500px;
	color : #ffffff;
	top : 200px;
	right : 0;
}

dl#hmsg dt {
	margin-bottom : 30px;
	font-size : 200%;
    font-weight : 600;
    line-height : 1.4em;
}

dl#hmsg dt span {
    display : inline-block;
    margin : 0 25px 0 20px;
    transform : scale(2.2, 0.7);
    vertical-align : -2px;
}

dl#hmsg dd {
	line-height : 1.8em;
}

/*----------CONTENTS----------*/

#contents {
    overflow : hidden;
    position : relative;
	width : 1300px;
	margin : 0 auto 70px auto;
}

#contents dl {
	position : absolute;
	width : 400px;
	top : 5px;
	left : 50px;
}

#contents dl dt {
	margin-bottom : 25px;
    padding-bottom : 25px;
    border-bottom : solid 1px #b4b4b4;
	font-size : 160%;
	font-weight : 600;
    line-height : 1.4em;
}

#contents dl dd {
	line-height : 1.7em;
}

#contents ul {
    list-style : none;
    margin-left : 500px;
}

#contents ul li {
    float : left;
    position : relative;
    width : 385px;
    height : 400px;
    margin-right : 30px;
}

#contents ul li:last-child {
    margin : 0;
}

.thumbnail1 {
	width : 100%;
	background-size : cover;
	background-position : center center;
	padding-top : 400px;
}

.thumbnail1:after {
	position : absolute;
	content : "";
	top : 0;
	left : 0;
	width : 100%;
	height : 100%;
	background : -webkit-linear-gradient(top,rgba(0,0,0,0)40%,rgba(0,0,0,0.6)90%);
}

#contents ul li h4 {
	position : absolute;
	width : 80%;
	color : #ffffff;
	line-height : 1.4em;
	font-size : 180%;
	font-weight : 600;
    letter-spacing : 3px;
	text-align : center;
	bottom : 35px;
	left : 10%;
}

#contents ul li h4 span {
	display : block;
	font-size : 60%;
	color : rgba(255,255,255,0.6);
	letter-spacing : 3px;
}

#contents ul li a:hover p {
	opacity : 0.6;
	filter: sepia(95%);
}

/*----------WORKS----------*/

#works {
    overflow : hidden;
    width : 100%;
    margin-bottom : 70px;
    padding : 60px 0 60px 0;
    background : #000000;
}

#wbox {
    position : relative;
    width : 1300px;
    margin : 0 auto 0 auto;
}

#wbox dl {
    position : absolute;
    width : 275px;
    color : #ffffff;
    top : 0;
    right : 0;
}

#wbox dl dt {
	margin-bottom : 25px;
    padding-bottom : 25px;
    border-bottom : solid 1px #ffffff;
	font-size : 180%;
	font-weight : 600;
}

#wbox dl dd {
	line-height : 1.7em;
}

#wbox ul {
    list-style : none;
    width : 1000px;
}

#wbox ul li {
    float : left ;
    position : relative;
    width : 230px;
    margin-right : 20px;
}

.thumbnail2 {
	width : 100%;
	background-size : cover;
	background-position : center center;
	padding-top : 300px;
}

.thumbnail2:after {
	position : absolute;
	content : "";
	top : 0;
	left : 0;
	width : 100%;
	height : 100%;
	background : -webkit-linear-gradient(top,rgba(0,0,0,0)40%,rgba(0,0,0,0.6)90%);
}

#wbox ul li h4 {
	position : absolute;
	width : 80%;
	color : #ffffff;
	line-height : 1.4em;
	font-size : 94%;
	font-weight : 500;
    letter-spacing : 3px;
	text-align : center;
	bottom : 25px;
	left : 10%;
}

/*----------NEWS----------*/

#news {
    clear : both;
    position : relative;
    width : 950px;
    margin : 0 auto 70px auto;
}

#news h3 {
	position : absolute;
	font-size : 180%;
    font-weight : 500;
    letter-spacing : 3px;
    line-height : 1em;
	-webkit-writing-mode : vertical-rl;
	-ms-writing-mode : tb-rl;
	writing-mode : vertical-rl;
	top : 0;
	left : 0;
}

#news dl {
    width : 870px;
    margin-left : 80px;
	padding-top : 10px;
	border-top : solid 6px #d1d1d1;
}

#news dl dt {
	float: left;
	width : 165px;
	padding : 14px 0 16px 0;
    letter-spacing : 1px;
}

#news dl dt {
	clear : left;
}

#news dl dd {
	padding : 14px 0 16px 0;
	border-bottom : dashed 1px #b4b4b4;
}

#news dl dd a {
	color : #282828;
	text-decoration : underline;
}

#news dl dd a:hover {
	color : #282828;
	text-decoration : none;
}

/*----------ABOUT----------*/

#about {
    position : relative;
    width : 1300px;
    margin : 0 auto 80px auto;
}

.thumbnail3 {
	width : 600px;
	background-size : cover;
	background-position : center center;
	padding-top : 300px;
}

#about dl {
    position : absolute;
    width : 600px;
    top : 40px;
    right : 50px;
}

#about dl dt {
    margin-bottom : 20px;
	font-size : 160%;
    font-weight : 500;
}

#about dl dt span {
    padding : 5px 20px 7px 20px;
    float : right;
    font-size : 60%;
    font-weight : 500;
    color : #ffffff;
    background : #000000;
    vertical-align : 7px;
}

#about dl dd {
    line-height : 1.7em;
}

#about a {
    display : block;
    width : 100%;
    height : 300px;
    color : #282828;
    background : #e1e1e1;
    text-decoration : none;
}

#about a:hover {
    background : #d1d1d1;
}