@charset 'UTF-8';

/***************************************
 * select-unit
 ***************************************/
#select-unit {
  background: url("../images/top_visual_bg.png") center top no-repeat;
  position: relative;
  width: 100%;
  height: 777px;
  box-shadow: 0px 5px 30px rgba(0,0,0,0.2);
}
#leading {
  text-align: center;
  font-size: 20px;
  letter-spacing: 0.15em;
  color: #ffffff;
  text-shadow: 0px 0px 10px rgba(0,0,0,0.2);
  position: relative;
  top: 25px;
}
#chose-ship {
  position: absolute;
  top: 425px;
  left: 371px;
  background-color: #ecee40;
  color: #3e3e3e;
  font-size: 18px;
  opacity: 0.8;
  width: 357px;
  height: 55px;
  border-radius: 10px;
  text-align: center;
  line-height: 55px;
  z-index: 5;
  box-shadow: 0px 0px 30px rgba(0,0,0,0.6);
}
#unit01 {
  width: 119px;
  height: 149px;
  background:  url(../images/unit01.png) top center no-repeat;
  background-size: 119px;
  position: absolute;
  top: 89px;
  left: 792px;
}
#unit01 a {
  display: block;
  width: 119px;
  height: 149px;
}
#unit02 {
  width: 155px;
  height: 87px;
  background: url(../images/unit02.png) top center no-repeat;
  background-size: 155px;
  position: absolute;
  top: 214px;
  left: 600px;
  z-index: 15;
}
#unit02 a {
  display: block;
  width: 155px;
  height: 87px;
}
#unit03 {
  width: 147px;
  height: 87px;
  background: url(../images/unit03.png) top center no-repeat;
  background-size: 147px;
  position: absolute;
  top: 158px;
  left: 449px;
}
#unit03 a {
  display: block;
  width: 147px;
  height: 87px;
  z-index: 10;
}
#unit04-parts {
  width: 433px;
  height: 502px;
  background: url(../images/unit04_parts.png) top center no-repeat;
  background-size: 433px;
  position: absolute;
  top: 229px;
  left: 631px;
}
#unit04 {
  width: 305px;
  height: 215px;
  background: url(../images/unit04.png) top center no-repeat;
  background-size: 305px;
  position: absolute;
  top: 0px;
  right: 0px;
  z-index: 10;
}
#unit04 a {
  width: 305px;
  height: 215px;
  display: block;
}
#unit05-parts {
  width: 289px;
  height: 428px;
  background: url(../images/unit05_parts.png) top center no-repeat;
  background-size: 289px;
  position: absolute;
  top: 248px;
  left: 264px;
}
#unit05 {
  width: 289px;
  height: 187px;
  background: url(../images/unit05.png) top center no-repeat;
  background-size: 289px;
  position: relative;
  z-index: 10;
}
#unit05 a {
  width: 289px;
  height: 187px;
  display: block;
}
#unit06 {
  width: 100px;
  height: 94px;
  background: url(../images/unit06.png) top center no-repeat;
  background-size: 100px;
  position: absolute;
  top: 590px;
  left: 524px;
  z-index: 12;
}
#unit06 a {
  display: block;
  width: 100px;
  height: 94px;
}
#unit07 {
  width: 248px;
  height: 164px;
  background: url(../images/unit07.png) top center no-repeat;
  background-size: 248px;
  position: absolute;
  top: 150px;
  left: 63px;
  z-index: 10;
}
#unit07 a {
  display: block;
  width: 248px;
  height: 164px;
}
#unit08 {
  width: 26px;
  height: 51px;
  background: url(../images/unit08.png) top center no-repeat;
  background-size: 26px;
  position: absolute;
  top: 115px;
  left: 384px;
}
#unit08-parts {
  width: 39px;
  height: 39px;
  background: url(../images/unit08_parts.png) top center no-repeat;
  background-size: 39px;
  position: absolute;
  top: -17px;
  left: -2px;
  z-index: 12;
}
#unit08 a {
  width: 26px;
  height: 51px;
  display: block;
}
#unit09 {
  width: 39px;
  height: 18px;
  background: url(../images/unit09.png) top center no-repeat;
  background-size: 39px;
  position: absolute;
  top: 119px;
  left: 204px;
}
.pukapuka {
  -webkit-animation: pukapuka 5s ease-in-out infinite;
  animation: pukapuka 5s ease-in-out infinite;
}
@-webkit-keyframes pukapuka {
  0%, 100% { transform:translateY(5px); }
  50% { transform:translateY(-8px); }
}
@keyframes pukapuka {
  0%, 100% { transform:translateY(5px); }
  50% { transform:translateY(-8px); }
}
.hurahura {
  -webkit-animation: hurahura 8s ease-in-out infinite;
  animation: hurahura 8s ease-in-out infinite;
}
@-webkit-keyframes hurahura {
  0%, 100% { transform:translateX(0px); }
  50% { transform:translateX(-50px); }
}
@keyframes hurahura {
  0%, 100% { transform:translateX(0px); }
  50% { transform:translateX(-50px); }
}
.kurukuru {
  animation: kurukuru 8s linear infinite;
}
@-webkit-keyframes kurukuru {
  0% { transform: rotateZ(0deg) }
  100% { transform: rotateZ(360deg) }
}
@keyframes kurukuru {
  0% { transform: rotateZ(0deg) }
  100% { transform: rotateZ(360deg) }
}



/***************************************
 * unit-detail
 ***************************************/
#unit-image {
  width: 100%;
  position: relative;
  background-color: #ffffff;
}
.partslist-box {
  position: relative;
}
.partslist {
  display: none;
  position: absolute;
  left: 400px;
  padding-top: 32px;
  z-index: 10;
}
.partslist h2 {
  margin: 0;
  text-align: center;
  border: #000 solid 1px;
  border-width: 1px 1px 0 1px;
  padding: 5px;
  background-color:#fff;
  font-size: 18px;
  width: 300px;
  box-sizing: border-box;
}
.partslist .close {
  position: absolute;
  top: 0;
  right: 0;
  background-color:#fff;
  border: #000 solid 1px;
  text-align: center;
  width: 30px;
  height: 30px;
  cursor: pointer;
}
.partslist ul {
  margin:0;
  padding:0;
  list-style-type: none;
  background-color:#005d97;
  width: 300px;
  display:table;
  border-bottom:#000 solid 1px;
}
.partslist ul > li {
  display:table-row;
}
.partslist ul > li > a {
  display: block;
  color: #fff;
  text-decoration: none;
}
.partslist ul li > a div {
  padding: 5px 3px;
  display:table-cell;
  box-sizing: border-box;
}
.partslist ul li a div.num {
  text-align: center;
  width: 30px;
  border:#000 solid 1px;
  border-width: 1px 1px 0 1px;
}
.partslist ul li a div.parts {
  width: 280px;
  border:#000 solid 1px;
  border-width: 1px 1px 0 0;
}

.detail-button {
  margin: 0;
  background-color: #008cd6;
  background-image: -webkit-gradient(linear, top left, from(#4cc1ff), to(#0073af));  
  background-image: -webkit-linear-gradient(top, #4cc1ff, #0073af);
  background-image: -moz-linear-gradient(top, #4cc1ff, #0073af);
  background-image: linear-gradient(to bottom, #4cc1ff, #0073af);
  box-shadow: 0 0 1px 1px #54c4ff inset, 0 1px 1px 0 rgba(105,104,102,0.5);
  border: solid 1px #005d97;
  border-radius: 5px;
  color: #ffffff;
  width: 10em;
  text-align: center;
  cursor: pointer;
  z-index: 5;
  height: 30px;
  line-height: 30px;
}

#position-Ship-Building.detail-button {
  background-color: #09ac11;
  background-image: -webkit-gradient(linear, top left, from(#46d84d), to(#04760a));  
  background-image: -webkit-linear-gradient(top, #46d84d, #04760a);
  background-image: -moz-linear-gradient(top, #46d84d, #04760a);
  background-image: linear-gradient(to bottom, #46d84d, #04760a);
  box-shadow: 0 0 1px 1px #41df48 inset, 0 1px 1px 0 rgba(105,104,102,0.5);
  border: solid 1px #0d8012;
}

.circle-text {
  margin: 0;
  line-height: 30px;
  background-color: #ffffff;
  z-index: 5;
}

.circle {
  width: 30px;
  height: 30px;
  cursor: pointer;
  position: relative;
  margin: 0 auto;
  z-index: 5;
}

.double-bounce1, .double-bounce2 {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  background-color: #ffc000;
  opacity: 0.7;
  position: absolute;
  top: 0;
  left: 0;

  -webkit-animation: bounce 2.0s infinite ease-in-out;
  animation: bounce 2.0s infinite ease-in-out;
}

.double-bounce2 {
  -webkit-animation-delay: -1.0s;
  animation-delay: -1.0s;
}

@-webkit-keyframes bounce {
  0%, 100% { -webkit-transform: scale(0.0) }
  50% { -webkit-transform: scale(1.0) }
}

@keyframes bounce {
  0%, 100% { transform: scale(0.0) }
  50% { transform: scale(1.0) }
}



/***************************************
 * product list
 ***************************************/
#product-list {
  font-size: 15px;
  background-color: #ffffff;
}
#product-list th {
	padding: 10px 8px;
  border: solid 1px #000000;
  color: #ffffff;
  font-weight: 300;
  vertical-align: middle;
}
#product-list tr.head th {
  padding: 10px 2px;
  background-color: #595757;
}
#product-list td {
	padding: 10px 8px;
  border: solid 1px #000000;
  vertical-align: middle;
}
#product-list td.mark {
  text-align: center;
}
#product-list td.booknum {
  text-align: center;
  background-color: #595757;
  color: #ffffff;
}
#semi-sub:target .semi-sub {
  background-color: #ff3333 !important;
}

#product-list td.space {
  border-left: #f1f0ee 1px solid;
  border-right: #f1f0ee 1px solid;
  background-color: #f1f0ee;
}

.pdf-link {
  padding-right:16px;
  background: url(../images/pdficon_small.png) top right no-repeat;
}

#Boilers { background-color: rgb(0,130,200); }
#Marine-Turbines { background-color: rgb(0,60,160); }
#Marine-Diesel-Engines { background-color: rgb(80,60,120); }
#Marine-Auxiliary-Machinery { background-color: rgb(120,0,100); }
#Ship-Maneuvering { background-color: rgb(200,0,110); }
#Shafting-and-Propellers { background-color: rgb(255,90,130); }
#Cargo-Handling { background-color: rgb(240,30,0); }
#Fittings { background-color: rgb(240,120,0); }
#Others { background-color: rgb(255,170,0); }
#Nautical-Equipment { background-color: rgb(60,160,0); }
#Trading { background-color: rgb(0,120,0); }
#Solutions { background-color: rgb(0,130,130); }
#Ship-Building { background-color: rgb(120,0,0); }
#Floating-Production-System { background-color: rgb(140,80,0); }
#Autonomous-Underwater-Vehicle { background-color: rgb(140,100,100); }
#Remotely-Operated-Vehicle { background-color: rgb(180,100,90); }
#Autonomous-Surface-Vehicle { background-color: rgb(210,160,60); }


/***************************************
 * company list
 ***************************************/
#company-list {
  font-size: 15px;
  background-color: #ffffff;
}
#company-list th {
  padding: 10px 8px;
  color: #ffffff;
  font-weight: 300;
  background: rgb(0,80,160);
  border: solid 1px #000000;
  white-space: nowrap;
  vertical-align: middle;
}
#company-list th.initial {
  vertical-align: top;
}
#company-list td {
  padding: 10px 8px;
  word-break: break-all;
  border: solid 1px #000000;
  vertical-align: middle;
}
#company-list tr:nth-child(2n+1) td {
  background: rgb(240,240,240);
}
#company-list tr:nth-child(2n) td {
  background: rgb(255,255,255);
}
#company-list td.tel {
  white-space: nowrap;
  text-align: center;
}
#index {
  margin: 1em auto;
  padding: 0;
  list-style-type: none;
  text-align: center;
}
#index li {
  display: inline;
  margin: 0 0.5em;
}



/*-------------------------------------
how to use
-------------------------------------*/
.howtouse .step img {
  float: left;
}
.howtouse .step p {
  margin: 0 0 0 600px;
}
.howtouse hr {
  margin: 50px auto;
}
.howtouse hr.downarrow {
  border: none;
  width: 100px;
  height: 50px;
  background: url(../images/downarrow.png) 0 0 no-repeat;
  background-size: 100px;
}



/***************************************
 * unit2
 ***************************************/
.unit02-detail {
  height: 800px;
  background: #ffffff url(../images/unit02_detail.png) 0 0 no-repeat; background-size: 1100px;
}
.unit02-detail #position-Other-Equipments {
  position:absolute;
  top: 9px; left: 45px;
}
.unit02-detail #position-Bridge-Equipments {
  position:absolute;
  top: 175px; left: 273px;
}
.unit02-detail #position-Dynamic-Positioning-System {
  position:absolute;
  top: 269px; left: 198px;
}
.unit02-detail #position-Engine-Room {
  position:absolute;
  top: 9px; left: 510px;
}
.unit02-detail #position-Crane {
  position:absolute;
  top: 304px; left: 449px;
}
.unit02-detail #position-Accommodation {
  position:absolute;
  top: 318px; left: 940px;
}
.unit02-detail #position-Others {
  position:absolute;
  top: 363px; left: 966px;
}
.unit02-detail #position-Control-Room {
  position:absolute;
  top: 438px; left: 933px;
}
.unit02-detail #position-Side-Thruster1 {
  position:absolute;
  top: 503px; left: 919px;
}
.unit02-detail #position-Bilge-Separator {
  position:absolute;
  top: 473px; left: 895px;
}
.unit02-detail #position-Engines {
  position:absolute;
  top: 545px; left: 812px;
}
.unit02-detail #position-Reduction-Gears {
  position:absolute;
  top: 538px; left: 723px;
}
.unit02-detail #position-Life-Saving-Equipment {
  position:absolute;
  top: 475px; left: 706px;
}
.unit02-detail #position-Paints {
  position:absolute;
  top: 627px; left: 533px;
}
.unit02-detail #position-Side-Thruster2 {
  position:absolute;
  top: 668px; left: 266px;
}
.unit02-detail #position-Propellers {
  position:absolute;
  top: 696px; left: 213px;
}
.unit02-detail #position-Rudder {
  position:absolute;
  top: 715px; left: 153px;
}
.unit02-detail #position-Trading {
  position:absolute;
  top: 756px; left: 282px;
}
.unit02-detail #position-Building {
  position:absolute;
  top: 756px; left: 470px;
}





/***************************************
 * unit4
 ***************************************/
.unit04-detail {
  height: 900px;
  background: #ffffff url(../images/unit04_detail.png) 0 0 no-repeat; background-size: 1100px;
}
.unit04-detail #position-Lights {
  position:absolute;
  top: 146px; left: 465px;
}
.unit04-detail #position-Nautical-Instrument {
  position:absolute;
  top: 126px; left: 337px;
}
.unit04-detail #position-Sealing {
  position:absolute;
  top: 168px; left: 303px;
}
.unit04-detail #position-Control-Room {
  position:absolute;
  top: 795px; left: 64px;
}
.unit04-detail #position-Accommodation {
  position:absolute;
  top: 166px; left: 357px;
}
.unit04-detail #position-Floating-Production-System {
  position:absolute;
  top: 136px; left: 526px;
}
.unit04-detail #position-Marine-Solar-Power {
  position:absolute;
  top: 153px; left: 643px;
}
.unit04-detail #position-Pump1 {
  position:absolute;
  top: 183px; left: 667px;
}
.unit04-detail #position-Pump2 {
  position:absolute;
  top: 100px; left: 960px;
}
.unit04-detail #position-Cargo-Handling-Equipment {
  position:absolute;
  top: 229px; left: 735px;
}
.unit04-detail #position-Side-Thruster {
  position:absolute;
  top: 266px; left: 727px;
}
.unit04-detail #position-Paints-Coatings {
  position:absolute;
  top: 294px; left: 656px;
}
.unit04-detail #position-Life-Saving-Equipment {
  position:absolute;
  top: 222px; left: 509px;
}
.unit04-detail #position-Boiler-Accessories {
  position:absolute;
  top: 385px; left: 423px;
}
.unit04-detail #position-Other-Equipments {
  position:absolute;
  top: 355px; left: 534px;
}
.unit04-detail #position-Engineering {
  position:absolute;
  top: 631px; left: 580px;
}
.unit04-detail #position-Trading {
  position:absolute;
  top: 832px; left: 807px;
}
.unit04-detail #position-Building {
  position:absolute;
  top: 861px; left: 743px;
}




/***************************************
 * unit5
 ***************************************/
.unit05-detail {
  height: 940px;
  background: #ffffff url(../images/unit05_detail.png) 0 0 no-repeat; background-size: 1100px
}
.unit05-detail #position-Control-Room {
  position:absolute;
  top: 327px; left: 215px;
}
.unit05-detail #position-Other-Equipments {
  position:absolute;
  top: 654px; left: 61px;
}
.unit05-detail #position-Engine-Room {
  position:absolute;
  top: 574px; left: 927px;
}
.unit05-detail #position-Auxilary-Machinery-Space {
  position:absolute;
  top: 805px; left: 895px;
}
.unit05-detail #position-Nautical-Instrument {
  position:absolute;
  top: 234px; left: 30px;
}
.unit05-detail #position-Signaling-Equipment {
  position:absolute;
  top: 248px; left: 274px;
}
.unit05-detail #position-Accommodation {
  position:absolute;
  top: 339px; left: 290px;
}
.unit05-detail #position-Elevator {
  position:absolute;
  top: 324px; left: 306px;
}
.unit05-detail #position-Side-Thruster {
  position:absolute;
  top: 520px; left: 157px;
}
.unit05-detail #position-Others {
  position:absolute;
  top: 468px; left: 326px;
}
.unit05-detail #position-Paints-Coatings {
  position:absolute;
  top: 470px; left: 636px;
}
.unit05-detail #position-Engines {
  position:absolute;
  top: 440px; left: 810px;
}
.unit05-detail #position-Propellers {
  position:absolute;
  top: 463px; left: 852px;
}
.unit05-detail #position-Engineering {
  position:absolute;
  top: 742px; left: 410px;
}
.unit05-detail #position-Trading {
  position:absolute;
  top: 867px; left: 665px;
}
.unit05-detail #position-Building {
  position:absolute;
  top: 897px; left: 665px;
}