@charset "UTF-8";
/* OKINAWA MARINE SERVICE CSS */
/*---------------------------------------------
フレーム調整
  ---------------------------------------------*/
.header_japanese {
  position: absolute;
  right: 0;
  top: 0;
  width: 100px;
}
.header_japanese a {
  display: block;
  text-align: center;
  background: #175a90;
  color: #fff;
  line-height: 84px;
}
@media screen and (max-width: 598px) {
  header h1.sitetitle a .corp_en {
    line-height: 1.3;
  }
}
@media screen and (min-width: 599px) {
  header h1.sitetitle a .corp_en br {
    display: none;
  }
  .header_japanese a {
    line-height: 92px;
  }
}
@media screen and (min-width: 798px) {
  .header_japanese {
    width: 120px;
  }
}
@media (hover:hover) {
  .header_japanese a:hover {
    opacity: 0.7;
    filter: alpha(opacity=70);
  }
}
@media screen and (min-width: 1360px) {
  header ul.hnav {
    position: absolute;
    top: 24px;
    right: 120px;
  }
}
#english footer {
  background: #f1f6fa;
  padding: 2em !important;
  margin: 0 !important;
}
#english footer .en_footframe {
  text-align: center;
}
#english footer .en_footframe .logo {
  margin-bottom: 1em;
}
#english footer .en_footframe .logo img {
  max-width: 100px;
}
#english footer .en_footframe .corp_en {
  color: #1082ce;
  font-size: 1.3em;
}
/*----メイン動画--------*/
.vid_contents {
  position: relative;
  width: 100%;
  height: 400px;
  overflow: hidden;
  z-index: -1;
}
@media screen and (min-width: 598px) {
  .vid_contents {
    height: 600px;
  }
}
.vid_inner {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  overflow: hidden;
}
.vid_inner video {
  position: absolute;
  top: 50%;
  left: 50%;
  object-fit: cover;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
}
.vid_contents .catch-copy {
  position: absolute;
  top: 0;
  /*bottom: 0;*/
  left: 0;
  width: 100%;
  height: -webkit-max-content;
  height: -moz-max-content;
  height: max-content;
  text-shadow: 1px 1px 20px #000;
  color: #fff;
  margin: auto;
  padding: 0 2em;
}
@media screen and (max-width: 597px) {
  .vid_contents .catch-copy {
    margin: 2em auto;
  }
}
@media screen and (max-width: 797px) {
  .vid_contents .catch-copy {
    margin: 4em auto 0;
  }
}
@media (min-width: 798px) {
  .vid_contents .catch-copy {
    margin: 6em auto 0;
    /*padding: 0 3em;*/
  }
}
.vid_contents .catch-copy h2 {
  max-width: 1360px;
  margin: 0 auto 16px;
  font-weight: bold;
  animation: slideUp 3s ease 0s 1 normal;
}
.vid_contents .catch-copy p {
  max-width: 1360px;
  margin: 0 auto;
  font-weight: bold;
  animation: slideUp 4s ease 0s 1 normal;
}
@media screen and (min-width: 598px) {
  .vid_contents .catch-copy h2 {
    font-size: calc(22px + 1vw);
  }
  .vid_contents .catch-copy p {
    font-size: calc(22px + .2vw);
  }
}
/*---------------------------------------------
マップ外観
  ---------------------------------------------*/
.map_gaikan {}
.map_gaikan .gaikan {
  background-image: url("../image/top/marin_gaikan.webp");
  background-size: cover;
  background-position: center center;
}
.map {
  position: relative;
  width: 100%;
}
.map iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
@media screen and (max-width: 797px) {
  .map {
    padding-top: 56.25%;
    height: 0;
  }
  .map_gaikan .gaikan {
    height: 330px;
  }
}
@media (min-width: 798px) {
  .map_gaikan {
    display: table;
    width: 100%;
  }
  .map {
    display: table-cell;
    width: 50%;
  }
  .gaikan {
    display: table-cell;
    width: 50%;
  }
  .map, .gaikan {
    height: 300px;
  }
}
@media screen and (min-width: 960px) {
  .map, .gaikan {
    height: 400px;
  }
}
@media screen and (min-width: 1360px) {
  .map, .gaikan {
    height: 500px;
  }
}
/*------所有船舶 agent------*/
#english table {
  border: none;
}
#english table td {
  border: none;
  border-top: 1px solid #e0e0e0;
  padding: .5em 0;
  vertical-align: top;
}
#english table tr > *:first-child {
  color: #20496b;
  font-weight: bold;
  padding-right: 1em;
  padding-left: .3em;
}
#english table tr > *:last-child {
  color: #20496b;
}
/*---------------------------------------------
会社概要テーブル
  ---------------------------------------------*/
#english .corp_table {}
#english .corp_table table {
  border: none;
}
#english .corp_table table td {
  border: none;
  border-top: 1px solid #e0e0e0;
  padding: 1em 0;
  vertical-align: top;
}
#english .corp_table table tr > *:first-child {
  color: #20496b;
  font-weight: bold;
  white-space: nowrap;
  padding-right: 1em;
}
#english .corp_table table tr > *:last-child {
  color: #20496b;
}
@media screen and (max-width: 597px) {
  #english .corp_table table tr, #english .corp_table table td {
    display: block;
    width: 100%;
  }
  #english .corp_table table td:first-child {
    padding-bottom: 0;
  }
  #english .corp_table table td:last-child {
    border-top: none;
    padding-top: 0;
  }
}
/*---------------------------------------------
印刷対応
  ---------------------------------------------*/
@media print {
.l-drawer__menu,.header_japanese {
    display: none;
  }
	  header h1.sitetitle a .corp_en br {
    display: none;
  }
	  .vid_contents .catch-copy {
    margin: 4em auto 0;
  }
	  .vid_contents .catch-copy h2 {
    font-size: calc(22px + 1vw);
  }
  .vid_contents .catch-copy p {
    font-size: calc(22px + .2vw);
  }
}