/*-----------------------------------------------------	*/
/*	for all						*/
/*-----------------------------------------------------	*/

.ios div, .ios dt, .ios dd, .ios ul li, .ios h1, .ios h2, .ios h3, .ios h4, .ios h5, .ios h6,
.ios p, .ios blockquote, .ios th, .ios td {
	letter-spacing: -0.001em;
}

html {
	-webkit-text-size-adjust: none;
	height: 100%;
}

body {
	height: 100%;
	background-color: #666;
}

.opening #wrapper {
	height: 100%;
	overflow: hidden;
}

img {
	max-width: 100%;
	height: auto;
	width /***/: auto; /* for ie8 */
}

.red {
	color: #d42d83 !important;
}

.hidden {
	display: none;
}


/* ------ Header ------ */


header {
	position: fixed;
	z-index: 3;
	height: 100%;
	top: 0;
	left: 0;
	background-color: #111;
}
@media screen and (min-width: 2201px) {
	header {width: 250px;}
}
@media screen and (min-width: 1601px) and (max-width: 2200px) {
	header {width: 200px;}
}
@media screen and (min-width: 1151px) and (max-width: 1600px) {
	header {width: 180px;}
}
@media screen and (min-width: 981px) and (max-width: 1150px) {
	header {width: 170px;}
}

@media screen and (min-width: 721px) and (max-width: 980px) {
	header {width: 20%;}
}

header h1 {
	position: absolute;
	display: block;
	width: 102px;
	height: 109px;
	top: 50%;
	left: 50%;
	margin: -220px 0 0 -51px;
}

header nav {
	position: absolute;
	width: 70px;
	height: 320px;
	bottom: 3%;
	left: 50%;
	margin-left: -35px;
}

header nav ul li {
	width: 70px;
	height: 65px;
	margin-bottom: 15px;
}

#gnav01 {background: url('../images/gnav1_hover.gif') no-repeat center top;}
#gnav02 {background: url('../images/gnav2_hover.gif') no-repeat center top;}
#gnav03 {background: url('../images/gnav3_hover.gif') no-repeat center top;}
#gnav04 {background: url('../images/gnav4_hover.gif') no-repeat center top;}

header nav ul li a {
	display: block;
	width: 100%;
	height: 100%;
	text-align: center;
	font-size: 11px;
	letter-spacing: 2px;
}

header nav ul li a:link,
header nav ul li a:visited {text-decoration: none; color: #555;}
header nav ul li a:hover,
header nav ul li a:active,
header nav ul li.current a {text-decoration: none; color: #7d2e7d !important;}

header nav ul li a img {
	display: block;
	margin: 0 auto 3px;
}

header nav ul li.current a img {
	visibility: hidden;
}

header:after {
	content: "";
	position: absolute;
	width: 11px;
	height: 21px;
	top: 50%;
	right: -11px;
	margin-top: -10px;
	background: url('../images/header_mark_v.gif') no-repeat;
}


/* ------ Contents ------ */

h2 {
	font-size: 14px;
	font-weight: bold !important;
	color: #000;
}
h2 a:link,
h2 a:visited {text-decoration: none; color: #000;}
h2 a:hover,
h2 a:active {text-decoration: underline; color: #999;}

#works section {
	position: relative;
	width: 100%;
	overflow: hidden;
}

#works section .inner {
	position: relative;
	overflow: hidden;
}

.sp #works section .inner {
	-webkit-Transform: translate3d(0px,0px,0px);
}

#works h2 {
	position: absolute;
	top: 0;
	left: 0;
}

#works1 h2, 
#works3 h2, 
#works4 h2, 
#works6 h2 {color: #fff;}
#works1 h2 a:link,
#works3 h2 a:link,
#works4 h2 a:link,
#works6 h2 a:link,
#works1 h2 a:visited,
#works3 h2 a:visited,
#works4 h2 a:visited,
#works6 h2 a:visited {text-decoration: none; color: #fff;}
#works1 h2 a:hover,
#works3 h2 a:hover,
#works4 h2 a:hover,
#works6 h2 a:hover,
#works1 h2 a:active,
#works3 h2 a:active,
#works4 h2 a:active,
#works6 h2 a:active {text-decoration: underline; color: #fff;}

.jsOn #works .scrollbar {
	position: absolute;
	width: 200px;
	height: 5px;
	bottom: 5px;
	left: 5px;
}

.jsOn #works .scrollbar div {
	height: 5px;
	border: solid 1px #fff;
	background-color: #000;
	-webkit-border-radius: 5px;
	border-radius: 5px;
}

#about {
	background: url('../images/about_bg.png') #eee;
}

.opening #about {
	display: none;
}

#about section {
	width: 100%;
}

#about p {
	margin-bottom: 20px;
	font-size: 13px;
	line-height: 1.8em;
	color: #666;
}
.win10.chrome #about p {font-weight: 500;}

#about dl {
	font-size: 13px;
	color: #666;
	line-height: 1.8em;
}
.win10.chrome #about dl {font-weight: 500;}

#about dt {
	color: #000;
}

#about dd li {
	padding-left: 10px;
	background: url('../images/list_mark.gif') no-repeat 0 7px;
}

#about a:link,
#about a:visited {text-decoration: none;}
#about a:hover,
#about a:active {text-decoration: underline;}

#message {
	background: url('../images/about_bg.png') #eee;
}

.opening #message {
	display: none;
}

#message section {
	width: 100%;
}

#message p, #message dl {
	margin-bottom: 20px;
	font-size: 13px;
	line-height: 1.8em;
	color: #666;
}
.win10.chrome #message p, #message dl {font-weight: 500;}

.note {
	font-size: 11px !important;
}

.note dt {
	float: left !important;
	width: 1.5em !important;
}

.note dd {
	margin-left: 1.5em !important;
}

/* ------ Form ------ */

#message form dt {
	clear: both;
	float: left;
	width: 120px;
	padding-bottom: 10px;
	color: #000;
}

#message form dd {
	margin-left: 130px;
	padding-bottom: 10px;
}

#message form input {
	width: 99%;
	padding: 3px 0;
	border: solid 1px #e5e5e5;
}

#message form textarea {
	width: 99%;
	height: 150px;
	padding: 3px 0;
	border: solid 1px #e5e5e5;
}

#message form .btnBox {
	text-align: center;
}

#message .btn {
	display: inline-block;
	width: 70px;
	margin: 0 10px;
	cursor: pointer;
}

#submit {background: url('../images/btn_submit_hover.gif') no-repeat;}
#back {background: url('../images/btn_back_hover.gif') no-repeat;}

*:first-child+html #message .btn {display: inline;}
* html #message .btn {display: inline;}


/* ------ Footer ------ */

footer {
	position: relative;
	background: url('../images/about_bg.png') #eee;
}

.opening footer {
	display: none;
}

#copyright {
	float: right;
	line-height: 60px;
	padding-right: 30px;
	font-size: 10px;
	color: #999;
}
#copyright a:link,
#copyright a:visited {text-decoration: none; color: #999;}
#copyright a:hover,
#copyright a:active {text-decoration: underline; color: #d42d83;}

#social {
	float: left;
	width: 108px;
	height: 50px;
	padding: 10px 0 0 30px;
	background: url('../images/btn_social_over.png') no-repeat;
	background-position: 30px 10px;
}

#social li {
	float: left;
	width: 31px;
	height: 32px;
	margin-right: 5px;
}



/*-----------------------------------------------------	*/
/*	for 1151px or more				*/
/*-----------------------------------------------------	*/

@media screen and (min-width: 1151px) {

#about .leftColumn,
#message .leftColumn {width: 500px;}

#works1 p, #works4 p {color: #fff;}
#works1 p a:link,
#works4 p a:link,
#works1 p a:visited,
#works4 p a:visited {text-decoration: none; color: #fff;}
#works1 p a:hover,
#works4 p a:hover,
#works1 p a:active,
#works4 p a:active {text-decoration: underline; color: #fff;}

#works2 p, #works5 p {color: #888;}
#works2 p a:link,
#works5 p a:link,
#works2 p a:visited,
#works5 p a:visited {text-decoration: none; color: #888;}
#works2 p a:hover,
#works5 p a:hover,
#works2 p a:active,
#works5 p a:active {text-decoration: underline; color: #888;}

#works3 p, #works6 p {color: #d7e0e7;}
#works3 p a:link,
#works6 p a:link,
#works3 p a:visited,
#works6 p a:visited {text-decoration: none; color: #d7e0e7;}
#works3 p a:hover,
#works6 p a:hover,
#works3 p a:active,
#works6 p a:active {text-decoration: underline; color: #d7e0e7;}

}



/*-----------------------------------------------------	*/
/*	for 981px or more				*/
/*-----------------------------------------------------	*/

@media screen and (min-width: 981px) {

header {
	height: 100%;
}

#mainvisual {
	position: aboslute;
	top: 0;
	overflow: hidden;
}

#mainvisual div {
	position: fixed;
	z-index: 2;
	height: 200%;
	top: 0;
	left: 0;
	background-repeat: no-repeat;
	background-attachment: fixed;
}
#mainvisual div#mainvisual01_01 {background-image: url('../images/mainvisual01_01.jpg');background-color: #d3fff2;}
#mainvisual div#mainvisual01_02 {background-image: url('../images/mainvisual01_02.png');}
#mainvisual div#mainvisual01_03 {background-image: url('../images/mainvisual01_03.png');}
#mainvisual div#mainvisual01_butterfly_01 {background-image: url('../images/mainvisual_butterfly_01.png');}
#mainvisual div#mainvisual01_butterfly_02 {background-image: url('../images/mainvisual_butterfly_02.png');display: none;}
#mainvisual div#mainvisual01_butterfly_03 {background-image: url('../images/mainvisual_butterfly_03.png');display: none;}
#mainvisual div#mainvisual01_butterfly_04 {background-image: url('../images/mainvisual_butterfly_04.png');display: none;}
#mainvisual div#mainvisual01_butterfly_05 {background-image: url('../images/mainvisual_butterfly_05.png');display: none;}
#mainvisual div#mainvisual01_butterfly_06 {background-image: url('../images/mainvisual_butterfly_06.png');display: none;}
#mainvisual div#mainvisual01_04 {background-image: url('../images/mainvisual01_04.png');}

#mainvisual div#mainvisual02_01,
#mainvisual div#mainvisual02_02,
#mainvisual div#mainvisual02_monitor_01,
#mainvisual div#mainvisual02_monitor_02 {position: absolute;top: 2880px;}

#mainvisual div#mainvisual02_01 {background-image: url('../images/mainvisual02_01.jpg');background-color: #d7d7d7;}
#mainvisual div#mainvisual02_02 {background-image: url('../images/mainvisual02_02.jpg');}
#mainvisual div#mainvisual02_monitor_01 {background-image: url('../images/mainvisual_monitor_01.jpg');display: none;}
#mainvisual div#mainvisual02_monitor_02 {background-image: url('../images/mainvisual_monitor_02.jpg');display: none;}

.opening #mainvisual02_01,
.opening #mainvisual02_02,
.opening #mainvisual02_monitor_01,
.opening #mainvisual02_monitor_02 {display: none;}

}



/*-----------------------------------------------------	*/
/*	for 721px or more				*/
/*-----------------------------------------------------	*/

@media screen and (min-width: 721px) {

/* ------ Loading ------ */

#loader {
	display: none;
	position: fixed;
	z-index: 10;
	width: 100%;
	height: 100%;
	background-color: #111;
}

.opening #loader {
	display: block;
}

#loader .logo {
	position: absolute;
	width: 102px;
	height: 109px;
	top: 50%;
	left: 50%;
	margin: -220px 0 0 -51px;
}

#loader .animation {
	position: absolute;
	width: 32px;
	height: 32px;
	top: 60%;
	left: 50%;
	margin: 0 0 0 -16px;
}


/* ------ Wrapper ------ */

.sp #wrapper {
	position: relative;
	z-index: 1;
	width: 100%;
	height: 100%;
	overflow: hidden;
}



/* ------ Contents ------ */

#scroller {
	position: relative;
	top: 0;
}

#works section .inner {
	width: 100%;
	min-width: 1400px;
	height: 480px;
}

#works1 .inner, #works4 .inner {background: url('../images/works_bg_01.jpg') repeat-x;}
#works2 .inner, #works5 .inner {background: url('../images/works_bg_02.jpg') repeat-x;}
#works3 .inner, #works6 .inner {background: url('../images/works_bg_03.jpg') repeat-x;}

#works .leftColumn {
	position: absolute;
}

#works h3 {
	font-size: 12px;
	font-weight: bold;
}

#works1 h3, #works4 h3 {color: #fff;}
#works2 h3, #works5 h3 {color: #000;}
#works3 h3, #works6 h3 {color: #fff;}

#works p {
	margin-bottom: 20px;
	font-size: 11px;
}
.win10.chrome #works p {font-weight: 500;}

#works .rightColumn {
	position: absolute;
}

}



/*-----------------------------------------------------	*/
/*	for 481px or more				*/
/*-----------------------------------------------------	*/

@media screen and (min-width: 481px) {

#about dt {
	float: left;
	width: 6em;
}

#about dd {
	padding: 0 0 10px 7em;
}

}



/*-----------------------------------------------------	*/
/*	for 2201px or more				*/
/*-----------------------------------------------------	*/

@media screen and (min-width: 2201px) {

#mainvisual div {width: 25%;background-position: 250px 0;}
#scroller {width: 75%; left: 25%;}
article, footer {width: 100%;}
#about {padding-top: 30px;}
#works .leftColumn {width: 280px;top: 100px;left: 70px;}
#works .rightColumn {top: 0;left: 0;}
#about .leftColumn, #message .leftColumn {padding: 0 10px 0 70px;}
#works h2 {padding: 60px 0 20px 70px;}
#about h2, #message h2 {padding: 30px 0 20px 70px;}

}


/*-----------------------------------------------------	*/
/*	for 1601px - 2200px				*/
/*-----------------------------------------------------	*/

@media screen and (min-width: 1601px) and (max-width: 2200px) {

#mainvisual div {width: 30%;background-position: 200px 0;}
#scroller {width: 70%; left: 30%;}
article, footer {width: 100%;}
#about {padding-top: 30px;}
#works .leftColumn {width: 280px;top: 100px;left: 70px;}
#works .rightColumn {top: 0;left: 0;}
#about .leftColumn, #message .leftColumn {padding: 0 10px 0 70px;}
#works h2 {padding: 60px 0 20px 70px;}
#about h2, #message h2 {padding: 30px 0 20px 70px;}

}



/*-----------------------------------------------------	*/
/*	for 1151px - 1600px				*/
/*-----------------------------------------------------	*/

@media screen and (min-width: 1151px) and (max-width: 1600px) {

#mainvisual div {width: 35%;background-position: 180px 0;}
#scroller {width: 65%; left: 35%;}
article, footer {width: 100%;}
#about {padding-top: 30px;}
#works .leftColumn {width: 280px;top: 100px;left: 60px;}
#works .rightColumn {top: 0;left: -20px;}
#about .leftColumn, #message .leftColumn {padding: 0 10px 0 60px;}
#works h2 {padding: 60px 0 20px 60px;}
#about h2, #message h2 {padding: 30px 0 20px 60px;}

}



/*-----------------------------------------------------	*/
/*	for 1150px or less				*/
/*-----------------------------------------------------	*/

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

#works1 p, #works4 p {color: #fff;}
#works1 p a:link,
#works4 p a:link,
#works1 p a:visited,
#works4 p a:visited {text-decoration: none; color: #fff;}
#works1 p a:hover,
#works4 p a:hover,
#works1 p a:active,
#works4 p a:active {text-decoration: underline; color: #fff;}

#works2 p, #works5 p {color: #888;}
#works2 p a:link,
#works5 p a:link,
#works2 p a:visited,
#works5 p a:visited {text-decoration: none; color: #888;}
#works2 p a:hover,
#works5 p a:hover,
#works2 p a:active,
#works5 p a:active {text-decoration: underline; color: #888;}

#works3 p, #works6 p {color: #b7bec2;}
#works3 p a:link,
#works6 p a:link,
#works3 p a:visited,
#works6 p a:visited {text-decoration: none; color: #b7bec2;}
#works3 p a:hover,
#works6 p a:hover,
#works3 p a:active,
#works6 p a:active {text-decoration: underline; color: #b7bec2;}

}



/*-----------------------------------------------------	*/
/*	for 981px - 1150px				*/
/*-----------------------------------------------------	*/

@media screen and (min-width: 981px) and (max-width: 1150px) {

#mainvisual div {width: 40%;background-position: 170px 0;}
#scroller {width: 60%; left: 40%;}
article, footer {width: 100%;}
#about {padding-top: 30px;}
#works .leftColumn {width: 280px;top: 80px;left: 1000px;}
#works .rightColumn {top: 0;left: -340px;}
#about .leftColumn, #message .leftColumn {padding: 0 60px;}
#works h2 {padding: 40px 0 20px 60px;}
#about h2, #message h2 {padding: 20px 0 20px 60px;}

}



/*-----------------------------------------------------	*/
/*	for 721px - 980px				*/
/*-----------------------------------------------------	*/

@media screen and (min-width: 721px) and (max-width: 980px) {

#mainvisual {display: none;}
#scroller {width: 80%; left: 20%;}
article, footer {width: 100%;}
#about {padding-top: 30px;}
#works .leftColumn {width: 280px;top: 80px;left: 1000px;}
#works .rightColumn {top: 0;left: -340px;}
#about .leftColumn, #message .leftColumn {padding: 0 60px;}
#works h2 {padding: 40px 0 20px 60px;}
#about h2, #message h2 {padding: 20px 0 20px 60px;}

}



/*-----------------------------------------------------	*/
/*	for 720px or less				*/
/*-----------------------------------------------------	*/

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

#wrapper {
	height: 100%;
}

/* ------ Loading ------ */

#loader {
	display: none;
	position: fixed;
	z-index: 10;
	width: 100%;
	height: 100%;
	margin-top: -20px;
	padding-bottom: 20px;
	background-color: #111;
}

.sp body,
.sp #loader {
	height: 130%;
}

.opening #loader {
	display: block;
}

#loader .logo {
	position: absolute;
	z-index: 12;
	width: 102px;
	height: 109px;
	top: 50%;
	left: 50%;
	margin: -85px 0 0 -51px;
}

#loader .animation {
	position: absolute;
	z-index: 11;
	width: 32px;
	height: 32px;
	top: 60%;
	left: 50%;
	margin: 30px 0 0 -16px;
}


/* ------ Header ------ */

header {
	position: relative;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	margin-top: -20px;
	padding-bottom: 20px;
}

h1 {
	margin: -85px 0 0 -51px !important;
}

header nav {
	position: absolute;
	width: 280px;
	height: 65px;
	left: 50%;
	bottom: 10%;
	margin-left: -140px;
}

header nav ul li {
	float: left;
	margin: 0;
}

header:after {
	content: "";
	width: 21px;
	height: 11px;
	top: 100%;
	left: 50%;
	right: 0;
	margin: 0 0 0 -10px;
	background: url('../images/header_mark_h.gif') no-repeat;
}

#mainvisual {
	display: none;
}


/* ------ Article ------ */

article, footer {
	width: 100%;
}

#about {padding-top: 20px;}

#works .leftColumn {
	display: none;
}

#works .rightColumn img {
	width: 100%;
}


/* ------ Footer ------ */

#copyright {
	float: none;
	padding: 0;
	text-align: center;
}

#social {
	float: none;
	height: 32px;
	padding: 20px 0 0 5px;
	margin: 0 auto;
	background-position: 5px 20px;
}

}



/*-----------------------------------------------------	*/
/*	for 481px - 720px				*/
/*-----------------------------------------------------	*/

@media screen and (min-width: 481px) and (max-width: 720px) {

#works h2 {padding: 30px 0 10px 30px;}
#about h2, #message h2 {padding: 20px 0 10px 30px;}
#works section .inner {width: 720px !important;}
#works .rightColumn {
	width: 1050px;
	margin-left: -270px;
}
#about .leftColumn, #message .leftColumn {padding: 0 30px;}

}



/*-----------------------------------------------------	*/
/*	for 480px or less				*/
/*-----------------------------------------------------	*/

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

#works h2 {padding: 20px 0 10px 20px;}
#about h2, #message h2 {padding: 20px 0 10px 20px;}
#works section .inner {width: 600px !important;}
#works .rightColumn {
	width: 875px;
	margin-left: -215px;
}
#about .leftColumn, #message .leftColumn {padding: 0 20px;}

#about dt {
	float: none;
	width: auto;
	margin: 0 0 5px;
	background-image: none;
}

#about dd {
	padding: 0 0 10px 0;
}

#message form dt {float: none;padding-bottom: 5px;}
#message form dd {margin-left: 0;}

}