@charset "utf-8";

/* font size
10px = 77%    11px = 85%    12px = 93%    13px = 100%
14px = 108%    15px = 116%    16px = 123%    17px = 131%
18px = 139%    19px = 147%    20px = 154%    21px = 162%
22px = 170%    23px = 177%    24px = 185%    25px = 193%
26px = 200%    27px = 208%    28px = 214%    29px = 223%
30px = 230%
------------------------------------------------------------ */


/* base
------------------------------------------------------------ */
html {
	background: #fff;
}
body,
form * {
	background: #fff;
	color: #222;
	font-family: YuGothic, "游ゴシック", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", "メイリオ", Meiryo, sans-serif !important;
}
a {
	color: #2be;
	text-decoration: underline;
}
a:hover {
	color: #2be;
	text-decoration: none;
}
.image {
	font-size: 0;
	line-height: 0;
}

/* header
------------------------------------------------------------ */
header {
	width: 984px;
	height: 54px;
	margin: 9px auto 12px;
	position: relative;
}

/* h1 (logo)
------------------------------------------------------------ */
h1 {
	float: left;
}

/* global-navigation
------------------------------------------------------------ */
nav {
	float: right;
}
nav ul {
	position: absolute;
    top: 50%;
	right: 0;
	margin-top: -0.5em;
}
nav ul li {
	float: left;
	margin-right: 42px;
}
nav ul li:last-child {
	margin-right: 0;
}
header nav ul li a {
    color: #222;
	text-decoration: none;
}
header nav ul li a.active {
    color: #2be;
}
header nav ul.global-navigation li a:hover {
    color: #2be;
}

/* footer
------------------------------------------------------------ */
footer {
	width: 984px;
	margin: 90px auto 60px;
}
footer .tuad {
	height: 51px;
	position: relative;
}
footer .tuad p:last-child {
	position: absolute;
	bottom: 0;
	left: 63px;
}
footer ul {
}
footer ul li {
	float: left;
	padding-left: 12px;
	padding-right: 12px;
	border-left: 1px solid #ddd;
}
footer ul li:first-child {
	padding-left: 0;
	border: none;
}
footer ul li:last-child {
	padding-right: 0;
}
footer ul li a {
    color: #222;
	text-decoration: none;
}
footer ul li a:hover {
    color: #222;
	text-decoration: underline;
}

/* page-top
------------------------------------------------------------ */
.pagetop {
	display: none;
	width: 90px;
	height: 90px;
	border-radius: 45px;
	-moz-border-radius: 45px;
	-webkit-border-radius: 45px;
	border: 1px solid #2be;
	position: fixed;
	right: 30px;
	bottom: 30px;
	background: #fff;
}
.pagetop i {
	color: #2be;
	position: absolute;
	top: 50%;
	left: 50%;
	margin-top: -0.5em;
	margin-left: -0.25em;
}

/* main-visual
------------------------------------------------------------ */
#body-top #main-visual {
	background: url(/images/image_visual-01.jpg) center 100% no-repeat;
	background-size: cover;
	height: 540px;
}
#body-top #main-visual h2 {
	text-align: center;
	padding-top: 225px;
}
#body-casestudy #main-visual {
	background: url(/images/casestudy/image_visual-03.jpg) center 100% no-repeat;
	background-size: cover;
	height: 690px;
}
#body-casestudy #main-visual p {
	text-align: center;
	padding-top: 300px;
	color: #fff;
	text-shadow: 0px 0px 2px #000, 2px 2px 2px #333;
}

/* second-visual
------------------------------------------------------------ */
#body-about #second-visual {
	background: url(/images/about/image_visual-01.jpg) center 100% no-repeat;
	background-size: cover;
	height: 150px;
}
#body-order #second-visual {
	background: url(/images/order/image_visual-01.jpg) center 100% no-repeat;
	background-size: cover;
	height: 150px;
}
#body-casestudy #second-visual {
	background: url(/images/casestudy/image_visual-01.jpg) center 100% no-repeat;
	background-size: cover;
	height: 150px;
}
#body-designers #second-visual {
	background: url(/images/designers/image_visual-01.jpg) center 100% no-repeat;
	background-size: cover;
	height: 150px;
}
#body-contact #second-visual {
	background: url(/mailbox/common-kyoso16/images/image_visual-01.jpg) center 100% no-repeat;
	background-size: cover;
	height: 150px;
}
#body-link #second-visual {
	background: url(/images/link/image_visual-01.jpg) center 100% no-repeat;
	background-size: cover;
	height: 150px;
}

/* sub-visual
------------------------------------------------------------ */
#body-top #sub-visual {
	background: url(/images/image_visual-02.jpg) center 100% no-repeat;
	background-size: cover;
	height: 540px;
	margin-top: 51px;
}
#body-about #sub-visual {
	background: url(/images/about/image_visual-02.jpg) center 100% no-repeat;
	background-size: cover;
	height: 540px;
}
#body-order #sub-visual {
	background: url(/images/order/image_visual-02.jpg) center 100% no-repeat;
	background-size: cover;
	height: 540px;
	margin-top: 75px;
}
#body-casestudy #sub-visual {
	background: url(/images/casestudy/image_visual-02.jpg) center 100% no-repeat;
	background-size: cover;
	height: 540px;
	margin-top: 45px;
}
#body-casestudy #sub-visual-voice {
	background: url(/images/casestudy/image_visual-04.jpg) center 100% no-repeat;
	background-size: cover;
	height: 540px;
	margin-top: 75px;
}
#body-designers #sub-visual {
	background: url(/images/designers/image_visual-02.jpg) center 100% no-repeat;
	background-size: cover;
	height: 540px;
	margin-top: 30px;
}

/* 2nd-title
------------------------------------------------------------ */
.content-title,
.content-title2 {
	text-align: center;
}
.content-title {
	margin-top: 60px;
}
.content-title2 {
	margin-top: 150px;
}
.content-title p.eng,
.content-title2 p.eng {
	color: #2be;
}
.content-title h2,
.content-title2 h2 {
	margin-top: 24px;
}
.content-title p.image {
	margin-top: 60px;
}

/* 2nd-lead
------------------------------------------------------------ */
.lead {
	margin-top: 60px;
	text-align: center;
}

/* 2nd-text
------------------------------------------------------------ */
.text {
	width: 816px;
	margin-left: auto;
	margin-right: auto;
}

/* top-contents
------------------------------------------------------------ */
#body-top ul.contents {
	width: 984px;
	margin: 60px auto 0;
}
#body-top ul.contents li {
	width: 226px;
	border: 1px solid #9df;
	float: left;
	margin-right: 24px;
}
#body-top ul.contents li a {
	text-decoration: none;
	display: block;
}
#body-top ul.contents li:last-child {
	margin-right: 0;
}
#body-top ul.contents li:hover {
	border: 1px solid #2be;
}
#body-top ul.contents li p.eng {
	color: #2be;
	padding-top: 24px;
	margin-left: 24px;
}
#body-top ul.contents li h3 {
	color: #222;
	margin-top: 21px;
	margin-left: 24px;
}
#body-top ul.contents li p.image {
}

/* top-casestudy
------------------------------------------------------------ */
#body-top ul.casestudy {
	width: 984px;
	margin: 60px auto 0;
}
#body-top ul.casestudy li {
	width: 478px;
	border: 1px solid #9df;
	float: left;
	margin-right: 24px;
	margin-bottom: 24px;
}
#body-top ul.casestudy li a {
	text-decoration: none;
	display: block;
}
#body-top ul.casestudy li:nth-child(2n) {
	margin-right: 0;
}
#body-top ul.casestudy li:hover {
	border: 1px solid #2be;
}
#body-top ul.casestudy li .grid .column-1 {
	margin-top: 24px;
	margin-left: 24px;
	margin-bottom: 30px;
	width: 256px;
}
#body-top ul.casestudy li .grid .column-2 {
	margin-top: 24px;
	margin-right: 24px;
	margin-bottom: 30px;
	width: 150px;
}
#body-top ul.casestudy li p.eng {
	color: #2be;
}
#body-top ul.casestudy li p.sub-title {
	color: #222;
	margin-top: 30px;
}
#body-top ul.casestudy li h3 {
	color: #222;
	margin-top: 45px;
}

/* about-services
------------------------------------------------------------ */
#body-about ul.services {
	width: 816px;
	margin: 60px auto 0;
}
#body-about ul.services li {
	width: 366px;
	float: left;
	margin-right: 84px;
	margin-bottom: 75px;
}
#body-about ul.services li:nth-child(2n) {
	margin-right: 0;
}
#body-about ul.services li .grid .column-1 {
	margin-top: 30px;
	width: 258px;
}
#body-about ul.services li .grid .column-2 {
	margin-bottom: 24px;
	width: 108px;
}
#body-about ul.services li p.eng {
	color: #2be;
}
#body-about ul.services li img {
	border-radius: 54px;
	-moz-border-radius: 54px;
	-webkit-border-radius: 54px;
}

/* casestudy-list
------------------------------------------------------------ */
#body-casestudy ul.casestudy {
	width: 922px;
	margin: 60px auto 0;
}
#body-casestudy ul.casestudy li {
	width: 208px;
	float: left;
	margin-right: 30px;
	margin-bottom: 30px;
}
#body-casestudy ul.casestudy li:hover {
	opacity: 0.8;
}
#body-casestudy ul.casestudy li:nth-child(4n) {
	margin-right: 0;
}
#body-casestudy ul.casestudy li p.eng {
	color: #2be;
}
#body-casestudy ul.casestudy li h3 {
	color: #222;
	margin-top: 45px;
}
#body-casestudy ul.casestudy li p.sub-title {
	color: #222;
	margin-top: 30px;
}
#body-casestudy ul.casestudy li a {
	text-decoration: none;
}

/* casestudy-table
------------------------------------------------------------ */
#body-casestudy table.casestudy {
	width: 984px;
	margin: 60px auto 0;
}
#body-casestudy table.casestudy tr {
	border-bottom: 1px solid #fff;
}
#body-casestudy table.casestudy tr:nth-child(odd) {
	background: #e9f8fc;
}
#body-casestudy table.casestudy tr:nth-child(even) {
	background: #f4fbfe;
}
#body-casestudy table.casestudy tr:first-child {
	background: #cef !important;
}
#body-casestudy table.casestudy tr:last-child {
	border-bottom: none;
}
#body-casestudy table.casestudy tr th,
#body-casestudy table.casestudy tr td {
	border-right: 1px solid #fff;
}
#body-casestudy table.casestudy tr th:last-child,
#body-casestudy table.casestudy tr td:last-child {
	border-right: none;
}
#body-casestudy table.casestudy tr th {
	padding: 21px 12px;
}
#body-casestudy table.casestudy tr td {
	padding: 12px;
}
#body-casestudy table.casestudy tr td:nth-child(1) {
	padding-right: 0;
	border-right: none;
	width: 1%;
}
#body-casestudy table.casestudy tr td:nth-child(2) {
	width: 40%;
}
#body-casestudy table.casestudy tr td:nth-child(3) {
	width: 15%;
}
#body-casestudy table.casestudy tr td:nth-child(4) {
	width: 24%;
}
#body-casestudy table.casestudy tr td:nth-child(5) {
	width: 19%;
}
#body-casestudy table.casestudy tr td:nth-child(6) {
	width: 1%;
}

/* casestudy-detail
------------------------------------------------------------ */
#body-casestudy .detail-image {
	width: 984px;
	margin: 60px auto 0;
}
#body-casestudy .detail-image .grid .column-1 {
	width: 672px;
	height: 672px;
	background: #f4fbfe;
	position: relative;
}
#body-casestudy .detail-image .grid .column-1 img {
	position: absolute;
	display: block;
	width: auto;
	height: auto;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	margin: auto;
}
#body-casestudy .detail-image .grid .column-2 {
	width: 252px;
	height: 672px;
	position: relative;
}
#body-casestudy .detail-image .grid .column-2 ul {
	width: 252px;
}
#body-casestudy .detail-image .grid .column-2 ul li {
	width: 108px;
	float: left;
	border-top: 1px solid #eee;
	padding-top: 18px;
	margin-bottom: 18px;
}
#body-casestudy .detail-image .grid .column-2 ul li:nth-child(odd) {
	padding-right: 18px;
}
#body-casestudy .detail-image .grid .column-2 ul li:nth-child(even) {
	padding-left: 18px;
}
#body-casestudy .detail-image .grid .column-2 ul li p.number {
	float: left;
	color: #999;
}
#body-casestudy .detail-image .grid .column-2 ul li p.image {
	float: right;
	width: 78px;
	height: 78px;
	position: relative;
}
#body-casestudy .detail-image .grid .column-2 ul li p.image img {
	position: absolute;
	display: block;
	width: auto;
	height: auto;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	margin: auto;
}
#body-casestudy .detail-image .grid .column-2 p.caption {
	position: absolute;
	bottom: 0;
}
#body-casestudy .detail-text {
	width: 984px;
	margin: 60px auto 0;
}
#body-casestudy .detail-text .grid .column-1 {
	width: 252px;
}
#body-casestudy .detail-text .grid .column-1 ul {
	width: 180px;
}
#body-casestudy .detail-text .grid .column-1 ul li {
	float: left;
	width: 90px;
}
#body-casestudy .detail-text .grid .column-1 ul li a {
	color: #222;
	text-decoration: none;
}
#body-casestudy .detail-text .grid .column-1 ul li a:hover {
	text-decoration: underline;
}
#body-casestudy .detail-text .grid .column-1 ul li a i {
	color: #2be;
}
#body-casestudy .detail-text .grid .column-2 {
	width: 672px;
}
#body-casestudy .detail-text .grid .column-2 ul.designer {
	width: 552px;
}
#body-casestudy .detail-text .grid .column-2 ul.designer li {
	float: left;
	width: 276px;
	margin-bottom: 12px;
}
#body-casestudy .detail-text .grid .column-2 dl dt {
	float: left;
	margin-right: 0.25em;
}
#body-casestudy .detail-text .grid .column-2 .tag-print {
	width: 672px;
	position: relative;
}
#body-casestudy .detail-text .grid .column-2 .tag-print ul {
	float: left;
}
#body-casestudy .detail-text .grid .column-2 .tag-print ul a {
	color: #fff;
	text-decoration: none;
}
#body-casestudy .detail-text .grid .column-2 .tag-print ul li {
	float: left;
	padding: 6px 9px;
	background: #9df;
	margin-right: 3px;
}
#body-casestudy .detail-text .grid .column-2 .tag-print ul li:hover {
	opacity: 0.8;
}
#body-casestudy .detail-text .grid .column-2 .tag-print p.print:hover {
	opacity: 0.8;
}
#body-casestudy .detail-text .grid .column-2 .tag-print a {
	color: #fff;
	text-decoration: none;
}
#body-casestudy .detail-text .grid .column-2 .tag-print p.print {
	padding: 9px 12px;
	background: #2be;
	position: absolute;
	height: auto;
	bottom: 0;
	right: 0;
}

/* casestudy-voices
------------------------------------------------------------ */
#body-casestudy .voices {
	text-align: center;
}
#body-casestudy .voices span.voice {
	background: #def5fc;
}
#body-casestudy .voices span.clients {
	color: #999;
}

/* order-flow
------------------------------------------------------------ */
#body-order ul.flow {
	width: 696px;
	margin: 60px auto 0;
}
#body-order ul.flow li {
	width: 696px;
	border: 1px solid #9df;
	margin-bottom: 30px;
}
#body-order ul.flow li .grid .column-1 {
	margin-top: 30px;
	margin-left: 30px;
	margin-bottom: 36px;
	width: 498px;
}
#body-order ul.flow li .grid .column-2 {
	margin-top: 30px;
	margin-right: 30px;
	width: 108px;
}
#body-order ul.flow li p.eng {
	color: #2be;
}
#body-order ul.flow li img {
	border-radius: 54px;
	-moz-border-radius: 54px;
	-webkit-border-radius: 54px;
}

/* order-policy
------------------------------------------------------------ */
#body-order ul.policy {
	width: 984px;
	margin: 60px auto 0;
}
#body-order ul.policy li {
	width: 282px;
	float: left;
	margin-right: 69px;
}
#body-order ul.policy li:last-child {
	margin-right: 0;
}

/* designers-list
------------------------------------------------------------ */
#body-designers ul {
	width: 876px;
	margin: 60px auto 0;
}
#body-designers ul li {
	width: 252px;
	float: left;
	margin-right: 60px;
	margin-bottom: 45px;
}
#body-designers ul li:nth-child(3n) {
	margin-right: 0;
}

/* contact-form
------------------------------------------------------------ */
#body-contact form {
	width: 648px;
	margin: 75px auto 0;
}
#body-contact form table {
	width: 100%;
}
#body-contact form table tr td {
	padding-top: 12px;
	padding-bottom: 30px;
}
#body-contact form table tr th.company,
#body-contact form table tr td.company {
	padding-left: 2em;
}
#body-contact form table tr td.cfm {
	color: #999;
}
#body-contact form table tr th.first {
	padding-top: 30px;
}
#body-contact form table tr td input,
#body-contact form table tr td textarea {
	width: 100%;
	border-radius: 6px;
	-moz-border-radius: 6px;
	-webkit-border-radius: 6px;
	padding: 3px;
	border: 1px solid #ddd;
}
#body-contact form table tr td input.data {
	width: 50% !important;
}
#body-contact form table tr td input.button {
	width: auto !important;
}
#body-contact form table tr td label {
	margin-right: 2em;
}
#body-contact form .form-button {
	overflow: hidden;
	position: relative;
}
#body-contact form .form-button ul {
	left: 50%;
	float: left;
	position: relative;
}
#body-contact form .form-button ul li {
	left: -50%;
	float: left;
	margin-left: 15px;
	position: relative;
}
#body-contact form .form-button ul li:first-child {
	margin-left: 0;
}
#body-contact form .form-button ul li button.form-btn01 {
	text-align: center;
	display: block;
	width: 312px;
    color:#fff;
	text-decoration: none;
	background: #2be;
	border-radius: 6px;
	-moz-border-radius: 6px;
    -webkit-border-radius: 6px;
    padding: 12px 0;
	border: 0;
	cursor: pointer;
}
#body-contact form .form-button ul li button.form-btn02 {
	text-align: center;
	display: block;
	width: 192px;
    color:#fff;
	text-decoration: none;
	background: #999;
	border-radius: 6px;
	-moz-border-radius: 6px;
    -webkit-border-radius: 6px;
    padding: 12px 0;
	border: 0;
}
#body-contact form .form-button ul li button.form-btn01:hover,
#body-contact form .form-button ul li button.form-btn02:hover {
	opacity: 0.8;
}

/* link
------------------------------------------------------------ */
#body-link .link {
	text-align: center;
}