@charaset "utf-8";
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font: inherit;
  font-size: 100%;
  vertical-align: baseline;
}

html {
  line-height: 1;
}

ol, ul {
  list-style: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

caption, th, td {
  text-align: left;
  font-weight: normal;
  vertical-align: middle;
}

q, blockquote {
  quotes: none;
}
q:before, q:after, blockquote:before, blockquote:after {
  content: "";
  content: none;
}

a img {
  border: none;
}

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary {
  display: block;
}

/* ===================================================== default */
body {
  padding: 0;
  margin: 0;
  background: #fff;
  color: #666666;
  font: 10px;
  *font-size: small;
  *font: x-small;
}

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
  font-family: "ヒラギノ角ゴ Pro W3", Hiragino Kaku GothicPro, "メイリオ", Meiryo, "ＭＳ Ｐゴシック", Helvetica, Arial, sans-serif;
}


/* ============================================= map */
#map {
  z-index: 2000;
  position: fixed;
  top: 45%;
  left: 35px;
  display: none;
  padding: 15px 5px 15px 15px;
  margin-left: -15px;
}

/* 丸いボタン */
.works_NavigationButton {
  float: left;
  width: 16px;
  height: 16px;
  margin-right: 4px;
  margin-top: 4px;
  background: #ffffff;
  /*	background: #3495d8;*/
  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;
  -ms-border-radius: 8px;
  -o-border-radius: 8px;
  border-radius: 8px;
}

/* ============================================= nav_btn */
#works_NavigationButton0, #works_NavigationButton1, #works_NavigationButton2, #works_NavigationButton3, #works_NavigationButton4, #works_NavigationButton5, #works_NavigationButton6, #works_NavigationButton7, #works_NavigationButton8 {
  display: block;
}

/* ============================================= nav */
#prevNext {
  z-index: 2000;
  position: fixed;
  top: 40%;
  left: -15px;
  width: 70px;
  background: rgba(0, 0, 0, 0.2);
  padding: 10px 10px 10px 30px;
  -webkit-border-radius: 6px;
  -moz-border-radius: 6px;
  -ms-border-radius: 6px;
  -o-border-radius: 6px;
  border-radius: 6px;
}

#works_Prev {
  float: left;
  font-size: 0px;
  cursor: pointer;
}

#works_Next {
  float: left;
  margin-top: 20px;
  font-size: 0px;
  cursor: pointer;
}

#prevNext img {
  width: 0px;
  height: 0px;
}

#works_Prev {
  background: url("../../img/nav_arrow_t.png") 0px 0px;
  width: 62px;
  height: 62px;
  display: block;
}

#works_Next {
  background: url("../../img/nav_arrow_b.png") 0px 0px;
  width: 62px;
  height: 62px;
  display: block;
}

#works_Prev:hover {
  background: url("../../img/nav_arrow_t.png") 62px 0px;
  width: 62px;
  height: 62px;
  display: block;
}

#works_Next:hover {
  background: url("../../img/nav_arrow_b.png") 62px 0px;
  width: 62px;
  height: 62px;
  display: block;
}

/* ============================================= project */
.project_1 {
  height: 100%;
  width: 100%;
  /*	z-index: 1200;*/
}

.project_2, .project_3, .project_4 {
  height: 100%;
  width: 100%;
}

/* ============================================= works */
#works_0 {
  background: url("../img/top_bk.png") #a5d433;
  background-size: 18%;
  overflow: auto;
}

#works_1 {
  background: #dddddd;
  overflow: auto;
}

#works_2 {
  background: #ff8123;
  overflow: auto;
}

#works_3 {
  background: #33d44a;
  overflow: auto;
}

#works_4 {
  background: #4e87f9;
  overflow: auto;
}

#works_5 {
  background: #fc5100;
  overflow: auto;
}

#works_6 {
  background: #ffd923;
  overflow: auto;
}

#works_7 {
  background: #33d2d4;
  overflow: auto;
}

#works_8 {
  background: #a5d433;
  overflow: auto;
}

/* ------------------------------------------------▼1019 追加 ---------------------------------------------------- */
.box {
  width: 1260px;
  margin: 0 auto;
  overflow: hidden;
  height: 100%;
  min-height: 100%;
}

.contents {
  background: #fff;
  width: 1024px;
  margin: 0 auto;
  height: 100%;
  min-height: 100%;
  -webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.4);
  -moz-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.4);
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.4);
  -webkit-box-shadow: 0px 0px 10px #333333;
  -moz-box-shadow: 0px 0px 10px #333333;
  box-shadow: 0px 0px 10px #333333;
}

.container {
  background: #fff;
  float: right;
  width: 670px;
  overflow: auto;
  /*floatの解除、ここがポイント*/
  position: relative;
  /*DWで正常にプレビューできるようになります。*/
  zoom: 1;
  /*IE6でレイアウト崩れを防ぐためのものです。*/
  padding: 0 30px;
  height: 100%;
  min-height: 100%;
  /*  @include box-shadow(0px 0px 7px rgba(0,0,0,0.3));*/
}

.fukidashi {
  background: url("../../img/fukidashi.png") no-repeat left top;
  float: right;
  width: 23px;
  overflow: auto;
  position: relative;
  zoom: 1;
  height: 100%;
  min-height: 100%;
}

.contents h2 {
  font-size: 120%;
  font-weight: bold;
  color: #666666;
  line-height: 1.8em;
  margin-bottom: 1em;
  text-align: center;
}
.contents h2 span {
  font-size: 90%;
  margin-top: 0;
  color: #555;
}
.contents h3 {
  margin-top: 20px;
  margin-bottom: 15px;
  font-size: 110%;
  font-weight: bold;
  color: #333333;
  line-height: 1.8em;
}
.contents p {
  font-size: 90%;
  line-height: 1.6em;
  text-shadow: 1px 1px 1px #fff;
  color: #333333;
  margin-bottom: 1em;
}

/* homeの2タイトル枠 */
.topbox {
  padding-top: 500px;
  font-size: 90%;
  line-height: 140%;
  overflow: hidden;
  *zoom: 1;
}
.topbox div {
  float: left;
  width: 300px;
  padding: 0px;
}
.topbox div.top_dev {
  margin-left: 42px;
}
.topbox div.top_design {
  margin-left: 258px;
}

/* 製品画像 */
.contents .product {
  text-align: center;
  margin: 25px auto;
  width: 654px;
  height: 290px;
}
.contents .title {
  width: 670px;
  height: 50px;
  margin-top: 25px;
  margin-bottom: 15px;
}
.contents .photo_l {
  float: left;
  margin-top: 5px;
  margin-right: 20px;
}
.contents .photo_r {
  float: right;
  margin-top: 5px;
  margin-left: 20px;
}

.label {
  float: left;
  width: 262px;
  height: 124px;
}

/* タイトル画像 */
#works_0 .contents {
  background-image: url("../img/dev_uxd_00.png");
  background-repeat: no-repeat;
  background-position: left center;
  background-size: 100%;
  -moz-background-size: 100%;
}
#works_0 .contents .product {
  background: url("../img/photo_00.png") no-repeat center center;
}
#works_0 .contents .title {
  background: url("../img/title_00.png") no-repeat center center;
}

#works_1 .contents {
  background-image: url("../img/dev_uxd_01.png");
  background-repeat: no-repeat;
  background-position: -100px top;
  background-size: contain;
  -moz-background-size: contain;
}
#works_1 .contents .product {
  background: url("../img/photo_01.png") no-repeat center center;
}
#works_1 .contents .product2 {
  background: url("../img/photo_01_2.png") no-repeat center center;
}
#works_1 .contents .product3 {
  background: url("../img/photo_01_3.png") no-repeat center center;
}
#works_1 .contents .product4 {
  background: url("../img/photo_01_4.png") no-repeat center center;
}
#works_1 .contents .product5 {
  background: url("../img/photo_01_5.png") no-repeat center center;
}
#works_1 .contents .title {
  background: url("../img/title_01.png") no-repeat center center;
}
#works_1 .contents .label {
  background: url("../img/label_01.png") no-repeat left top;
}
#works_1 .contents .photo_l, #works_1 .contents .photo_r {
  width: 276px;
  height: 365px;
}

#works_2 .contents {
  background-image: url("../img/dev_uxd_02.png");
  background-repeat: no-repeat;
  background-position: -40px top;
  background-size: contain;
  -moz-background-size: contain;
}
#works_2 .contents .product {
  background: url("../img/photo_02.png") no-repeat center center;
}
#works_2 .contents .title {
  background: url("../img/title_02.png") no-repeat center center;
}
#works_2 .contents .label {
  background: url("../img/label_02.png") no-repeat left top;
}

#works_3 .contents {
  background-image: url("../img/dev_uxd_03.png");
  background-repeat: no-repeat;
  background-position: -60px top;
  background-size: contain;
  -moz-background-size: contain;
}
#works_3 .contents .product {
  background: url("../img/photo_03.png") no-repeat center center;
}
#works_3 .contents .title {
  background: url("../img/title_03.png") no-repeat center center;
}
#works_3 .contents .label {
  background: url("../img/label_03.png") no-repeat left top;
}

#works_4 .contents {
  background-image: url("../img/dev_uxd_04.png");
  background-repeat: no-repeat;
  background-position: -10px top;
  background-size: contain;
  -moz-background-size: contain;
}
#works_4 .contents .product {
  background: url("../img/photo_04.png") no-repeat center center;
}
#works_4 .contents .title {
  background: url("../img/title_04.png") no-repeat center center;
}
#works_4 .contents .label {
  background: url("../img/label_04.png") no-repeat left top;
}

#works_5 .contents {
  background-image: url("../img/dev_uxd_05.png");
  background-repeat: no-repeat;
  background-position: -25px top;
  background-size: contain;
  -moz-background-size: contain;
}
#works_5 .contents .product {
  background: url("../img/photo_05.png") no-repeat center center;
}
#works_5 .contents .title {
  background: url("../img/title_05.png") no-repeat center center;
}
#works_5 .contents .label {
  background: url("../img/label_05.png") no-repeat left top;
}

#works_6 .contents {
  background-image: url("../img/dev_uxd_06.png");
  background-repeat: no-repeat;
  background-position: -40px top;
  background-size: contain;
  -moz-background-size: contain;
  overflow: hidden;
}
#works_6 .contents .product {
  background: url("../img/photo_06.png") no-repeat center center;
}
#works_6 .contents .title {
  background: url("../img/title_06.png") no-repeat center center;
}
#works_6 .contents .label {
  background: url("../img/label_06.png") no-repeat left top;
}

#works_7 .contents {
  background-image: url("../img/dev_uxd_07.png");
  background-repeat: no-repeat;
  background-position: -10px top;
  background-size: contain;
  -moz-background-size: contain;
}
#works_7 .contents .product {
  background: url("../img/photo_07.png") no-repeat center center;
}
#works_7 .contents .title {
  background: url("../img/title_07.png") no-repeat center center;
}
#works_7 .contents .label {
  background: url("../img/label_07.png") no-repeat left top;
}

#works_8 .contents {
  background-image: url("../img/dev_uxd_08.png");
  background-repeat: no-repeat;
  background-position: -40px top;
  background-size: contain;
  -moz-background-size: contain;
}
#works_8 .contents .product {
  background: url("../img/photo_08.png") no-repeat center center;
}
#works_8 .contents .title {
  background: url("../img/title_08.png") no-repeat center center;
}
#works_8 .contents .label {
  background: url("../img/label_08.png") no-repeat left top;
}

.clear {
  *zoom: 1;
  overflow: hidden;
}

.top12 {
  margin-top: 12px;
}

.top18 {
  margin-top: 24px;
}