.page #header{
 background: #222;
}
.page .breadcrumb{
 display: block;
 background: #444;
 color: #ccc;
 border-radius: 0px;
 margin: 0px;
 font-size: 90%;
}
.page .breadcrumb ul{
 display: block;
 max-width: 1110px;
 margin: 0px auto;
 padding: 0px 15px;
 text-align: left;
}
.page .breadcrumb ul li{
 display: inline-block;
 position: relative;
}
.page .breadcrumb ul a:after{
 display: inline-block;
 content: "＞";
 margin: 0px 1.5em;
 font-size: 80%;
 vertical-align: middle;
}
.page .breadcrumb a{
 display: inline-block;
 color: #ccc;
}
.page #ttl{
 background: #222;
 text-align: center;
 padding: 50px 15px 50px;
}
.page #ttl h2{
 font-family: 'Mukta', sans-serif;
 color: #fff;
 font-size: 300%;
}
.page #ttl .text{
 color: #029cd9;
}
.pageFooter{
 display: table;
 width: 100%;
 text-align: center;
}
.pageFooter .tel{
 display: table-cell;
 width: 50%;
 padding: 50px 15px;
}
.pageFooter .mail{
 display: table-cell;
 width: 50%;
 padding: 50px 15px;
}
.polycy {
 padding: 20px;
 border:solid 1px #aaa;
}
.polycy iframe{
 width: 100%;
 color: #fff;
}
/*
===================================================
	.about
===================================================
*/
.page.about #sec1{
 position: relative;
}
.page.about #sec1 .photo{
 width: 80%;
 display: inline-block;
}
.page.about #sec1 .maxWidth{
 max-width: 1600px;
}
.page.about #sec1 .text2{
 position: relative;
 padding: 50px;
 line-height: 2em;
 width: 50%;
 z-index: 2;
 top: -15vw;
}
.page.about #sec2{
 margin-top: -8vw;
}
.page.about .photo{
 position: relative;
}
.page.about #sec2 .photo .ttl{
 position: absolute;
 top: 45%;
 width: 100%;
 text-align: center;
}
.page.about #sec2 .photo .ttl p,
.page.about #sec2 .photo .ttl h3{
 display: inline-block;
 background: rgba(255,255,255,0.6);
 padding: 4px 10px;
}
/*
===================================================
	.company
===================================================
*/
.page.company .list li{
 display: table;
 width: 100%;
 padding:15px;
 border-bottom: solid 1px #ccc;
}
.page.company .list li:first-child{
 padding-top: 0px;
}
.page.company .list li span{
 display: table-cell;
}
.page.company .list li span:first-child{
 width: 25%;
}
.page.company .list li a{
 display: inline-block;
}
.page.company #map iframe{
 width: 100%;
}
/*
===================================================
	.recruit
===================================================
*/
.page.recruit #sec1{
 position: relative;
}
.page.recruit #sec1 .text{
 position: absolute;
 top: 48%;
 left: 0px;
 width: 100%;
 text-align: center;
 color: #fff;
}
.page.recruit .list{
 text-align: center;
}
.page.recruit .list li{
 display: inline-block;
 width: 24%;
 margin: 1px;
}
.page.recruit #sec6 .list li{
 width: auto;
}
.page.recruit #sec6 .list li img{
 display: inline-block;
 width: auto;
 vertical-align: middle;
}
.page.recruit #sec6 .list li .text{
 display: inline-block;
 width: auto;
 padding: 15px;
 vertical-align: middle;
 text-align: left;
}
.page.recruit #sec6 .list li a{
 padding: 15px 40px;
}
.page.recruit .list li a{
 display: block;
 background: #fff;
 border-radius: 5px;
 box-shadow: 2px 2px 4px rgba(0,0,0,0.2);
 padding: 15px;
 color: #222;
}
.page.recruit .list li a:hover{
 text-decoration: none;
}
.page.recruit .list li img{
 display: inline-block;
 width: 20%;
 vertical-align: middle;
}
.page.recruit .list li .text{
 display: inline-block;
 width: 75%;
 padding: 15px;
 vertical-align: middle;
 text-align: center;
}
.page.recruit .name .status{
 background: #000;
 color: #fff;
 border-radius: 5px;
 display: inline-block;
 margin-right: 1em;
 padding: 5px 1em;
 font-size: 100%;
 vertical-align: middle;
}
.page.recruit .name .text{
 letter-spacing: .2em;
 font-size: 150%;
 display: inline-block;
 vertical-align: middle;
}
.page.recruit #interview1,
.page.recruit #interview2{
 border-bottom: solid 1px #eee;
 padding-bottom: 50px;
}
.page.recruit #sec4 .photo img{
 display: none;
}
.page.recruit #sec4 .photo img.active{
 display: block;
}
/*
===================================================
	.contact
===================================================
*/
.page.contact .borderRight{
 border-right: solid 1px #aaa;
}
/*
===================================================
	.service
===================================================
*/
.page.service #sec1{
 background: url(../img/service/bg1.jpg) center center;
 background-size: cover;
}
.page.service #sec1 .list {
 text-align: center;
}
.page.service #sec1 .list li{
 background: #fff;
 width: 40%;
 padding: 2%;
 margin: 10px;
 display: inline-block;
 border-radius: 5px;
}
.page.service #sec1 .list li .btn{
 border: solid 1px #222;
 border-radius: 3em;
 padding: 5px 3em;
 margin-top: 1em;
}
.page.service #sec1 .list li h4{
 margin-top: 1em;
}
.page.service #sec1 .list li a{
 color: #222;
 display: block;
}
.page.service #work1{
 background: url(../img/service/bg2.jpg) center center;
 background-size: cover;
}
.page.service #work1 .btn{
 color: #fff;
 background: linear-gradient(#26499d, #22428d);
 display: block;
 text-align: center;
 padding: 15px;
}
.page.service #work1 .btn:hover{
 background: linear-gradient(#375aae, #33549e);
}
.page.service #work1 .text{
 background: rgba(0,0,0,0.6);
 width: 40%;
 padding: 40px;
 position: relative;
 left: 50%;
 color: #fff;
}
.page.service #work2,
.page.service #work4{
 background: #3f3f3f;
}
.page.service #work3{
 background: #666666;
}
.page.service #work2 .photo,
.page.service #work3 .photo,
.page.service #work4 .photo{
 position: relative;
}
.page.service #work2 .photo img,
.page.service #work3 .photo img,
.page.service #work4 .photo img{
 box-shadow: -20px 20px 0px #22428d; 
}
/*
===================================================
	.tugboat
===================================================
*/
.page.tugboat #sec4{
 background: url(../img/tugboat/bg.jpg);
 background-size: cover;
}
.page.tugboat #sec4 .btn1{
 background: linear-gradient(#375aae, #33549e);
 color: #fff;
 display: block;
 padding: 20px 5px;
 border:solid 1px #fff;
 font-size: 110%;
}
.page.tugboat #sec4 .btn2{
 background: linear-gradient(#ae2626, #9b2222);
 color: #fff;
 display: block;
 padding: 20px 5px;
 border:solid 1px #fff;
 font-size: 110%;
}
/*
===================================================
	.owned ship
===================================================
*/
.page.shipTop #sec1{
 background: url(../img/ship/main.jpg) center center;
 background-size: cover;
}
.page.shipTop #sec2 .list{
 text-align: center;
}
.page.shipTop #sec2 .list li{
 display: inline-block;
 width: 24%;
 position: relative;
}
.page.shipTop #sec2 .list li h4{
 position: absolute;
 width: 100%;
 text-align: center;
 bottom: 10%;
 font-size: 120%;
}
.page.shipTop #sec2 .list li a{
 color: #fff;
}
.page.shipTop #sec2 .list li a:hover{
 opacity: .8;
}
.page.ship #shipttl h2{
 padding: 1.5em 15px;
 text-align: center;
 letter-spacing: .2em;
}
.page.ship #shipttl .photo{
 text-align: center;
}
.page.ship .specList li{
 border-bottom: solid 1px #fff;
 padding: 10px;
 display: table;
 width: 100%;
 font-size: 80%;
}
.page.ship .specList li .ttl{
 display: table-cell;
 width: 35%;
}
.page.ship .specList li .text{
 display: table-cell;
 width: 65%;
}
.page.ship .shipList{
 text-align: center;
}
.page.ship .shipList li{
 display: inline-block;
 width: 32%;
 text-align: center;
}
.page.ship .shipList li a{
 color: #fff;
 background: #375aae;
 display: block;
 padding: 30px 10px;
 border-radius: 5px;
 box-shadow: 2px 2px 4px rgba(0,0,0,0.1);
}
.page.ship .photoList{
 text-align: center;
 max-width: 1400px;
 margin: 30px auto 0;
}
.page.ship .photoList li{
 display: inline-block;
 width: 18%;
}
.page.ship #sec3{
 position: relative;
 overflow: hidden;
}
.page.ship #sec3:before{
 content: "";
 display: block;
 width: 150%;
 height: 82%;
 background: #f8f8f8;
 position: absolute;
 z-index: -1;
 transform: rotate(-8deg);
 top: -28%;
 left: -20%;
}
.page.ship #sec3 .member1{
 position: relative;
}
.page.ship #sec3 .photo{
 position: relative;
}
.page.ship #sec3 .photo img.main{
 max-width: 60%;
 position: relative;
 z-index: 2;
}
.page.ship #sec3 .photo:before{
 content: "";
 display: block;
 width: 40%;
 height: 50%;
 border: solid 1px #22428d;
 position: absolute;
 top: 10%;
 left: 30%;
}
.page.ship #sec3 .name{
 max-width: 45%;
 padding: 20px;
 font-size:120%;
}
.page.ship #sec3 .text{
 position: absolute;
 background: #fff;
 z-index: 2;
 left: 50%;
 bottom: 10%;
 width: 50%;
 padding: 60px 30px;
 box-shadow: 2px 2px 4px rgba(0,0,0,0.3);
}
.page.ship1 #sec1 .text,
.page.ship2 #sec1 .text,
.page.ship3 #sec1 .text,
.page.ship4 #sec1 .text{
 max-width: 85%;
 margin: -15% auto 0px;
 background: #fafafa;
 position: relative;
 z-index: 2;
 padding:60px 50px;
}

.page.ship4 #sec3 .row{
    justify-content: center;
}


@media screen and (max-width: 1000px) {
 .page.about #sec1 .text2{
  font-size: 90%;
  width: 70%;
 }
 .page.ship #sec3 .text{
  font-size: 80%;
  padding: 30px 15px;
  bottom: 1%;
 }
}

@media screen and (max-width: 768px) {
 .page .breadcrumb{
  display: block;
  background: #444;
  color: #ccc;
  border-radius: 0px;
  margin: 0px;
  padding: 5px;
  font-size: 70%;
 }
 .page #ttl{
  padding: 30px 15px 30px
 }
 .page #ttl h2{
  font-family: 'Mukta', sans-serif;
  color: #fff;
  font-size: 150%;
 }
 .page #ttl .text{
  font-size: 90%;
 }
 .pageFooter{
  display: table;
  width: 100%;
  text-align: center;
 }
 .pageFooter .tel{
  display: block;
  width: auto;
  padding: 20px 15px;
 }
 .pageFooter .mail{
  display: block;
  width: auto;
  padding: 20px 15px;
 }

 .page.about #sec1 .photo{
  width: auto;
  display: block;
 }
 .page.about #sec1 .text2{
  font-size: 90%;
  width: auto;
  top: 0px;
  margin-top: 25px;
  padding: 25px;
 }
 .page.about #sec2{
  margin-top: 50px;
 }
 .page.about #sec2 .ceo img{
  width: 50%;
  height: auto;
  display: inline-block;
 }
 .page.about #sec2 .photo .ttl{
  position: static;
  top: 32%;
  width: 100%;
  text-align: center;
 }
 .page.company #map{
  padding: 15px;
 }
 .page.recruit .list li img{
  display: inline-block;
  width: 10%;
  vertical-align: middle;
 }
 .page.recruit .list li{
  display: block;
  width: auto;
  margin: 4px;
 }
 .page.recruit .list li a{
  padding: 5px;
 }
 .page.service #sec1 .list li{
  display: block;
  width: auto;
 }
 .page.service #sec1 .list li .btn{
  width: 100%;
  padding: 5px 0px;
  margin-top: 1em;
  font-size: 80%;
 }
 .page.service #work1 .text{
  background: rgba(0,0,0,0.6);
  width: auto;
  padding: 10px;
  position: relative;
  left: 0px;
  color: #fff;
  margin: 10px;
 }
 .page.ship #sec2 .list li{
  display: inline-block;
  width: 46%;
  position: relative;
  margin: 5px 1%;
 }
 .page.ship #sec2 .list li h4{
  position: absolute;
  width: 100%;
  text-align: center;
  bottom: 10%;
  font-size: 85%;
 }
 .page.ship #sec3:before{
  content: "";
  display: block;
  width: 150%;
  height: 55%;
  background: #f8f8f8;
  position: absolute;
  z-index: -1;
  transform: rotate(-8deg);
  top: -28%;
  left: -20%;
 }
 .page.ship #sec3 .photo img.main{
  max-width: none;
  position: relative;
  z-index: 2;
  width: 100%;
  height: auto;
 }
 .page.ship #sec3 .photo:before{
  content: "";
  display: block;
  width: auto;
  height: auto;
  border: none;
  position: static;
  top: 0%;
  left: 0%;
 }
 .page.ship #sec3 .name{
  max-width: none;
  padding: 20px;
  font-size:100%;
 }
 .page.ship #sec3 .text{
  position: static;
  background: #fff;
  z-index: 2;
  left: 0%;
  bottom: 0%;
  width: auto;
  padding: 20px;
  box-shadow: 2px 2px 4px rgba(0,0,0,0.3);
  font-size: 100%;
 }
 .page.ship1 #sec1 .text,
 .page.ship2 #sec1 .text,
 .page.ship3 #sec1 .text,
 .page.ship4 #sec1 .text{
  max-width: none;
  margin: 0px auto 0px;
  background: #fafafa;
  position: relative;
  z-index: 2;
  padding:20px;
 }
 .page.contact .borderRight {
  border-right: none;
 }
}