@charset "UTF-8";

/* ----------------------------------------------- CSS Information
 Style Info:     船のご紹介
 Notes:          
--------------------------------------------------------------- */
.content .wrap {
  margin: 0 auto 15%;
}
.name01 {
	text-align: center;
	font-size: 2em;
	font-weight: bold;
	color: #00469B;
}
.name02 {
	padding: 0.5em 0;
	text-align: center;
	color: #FFF;
	background-color: #00469B;
}
.ship-photo {
	margin: 0 auto 3%;
}
.photo-wrap {
	width: 80%;
  max-width: 1225px;
  margin: 0 auto;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
}
.photo-wrap .photo {
	width: 22%;
	margin: 0 1.5% 2%;
}
.data-area {
	width: 60%;
  max-width: 1024px;
	margin: 0 auto 3%;
	display: flex;
	justify-content: space-between;
}
.data-wrap {
	width: 49.5%;
}
.data-box {
	width: 100%;
	min-height: 4em;
	margin: 0 auto 1.5%;
	display: table;
	align-items: center;
	color: #004698;
	text-align: center;
	line-height: 1.5;
}
/* firefox用 */
.data-box::before {
content: "";
display: inline-block;
vertical-align: middle;
height: 100%;
min-height: 4em;
}
.data01 {
	width: 35%;
	padding: 1% 0;
	display: table-cell;
	vertical-align: middle;
	background-color: #BDCFE5;
}
.data02 {
	width: 65%;
	padding: 1% 0;
	display: table-cell;
	vertical-align: middle;
	background-color: #D9E3F0;
}
/* ================= smartphone ================= */
@media only screen and (max-width:699px) {
.content .wrap {
	margin: 0 auto 20%;
}
.name01 {
	font-size: 1.5em;
}
.ship-photo {
	height: 10em;
	margin: 0 auto 2em;
	position: relative;
	overflow: hidden;
}
.ship-photo img {
	height: 100%;
	max-width: none;
	position: absolute;
}
.position01 img {
	top: 50%;
  left: 45%;
  transform: translateY(-50%) translateX(-45%);
  -webkit- transform: translateY(-50%) translateX(-45%);
}
.position02 img {
	top: 50%;
  left: 45%;
  transform: translateY(-50%) translateX(-45%);
  -webkit- transform: translateY(-50%) translateX(-45%);
}
.position03 img {
	top: 50%;
  left: 25%;
  transform: translateY(-50%) translateX(-25%);
  -webkit- transform: translateY(-50%) translateX(-25%);
}
.position04 img {
	top: 50%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
  -webkit- transform: translateY(-50%) translateX(-50%);
}
.position05 img {
	top: 50%;
  left: 5%;
  transform: translateY(-50%) translateX(-5%);
  -webkit- transform: translateY(-50%) translateX(-5%);
}
.position06 img {
	top: 50%;
  left: 30%;
  transform: translateY(-50%) translateX(-50%);
  -webkit- transform: translateY(-50%) translateX(-50%);
}
.photo-wrap {
  width: 100%;
	margin: 0 auto 2em;
	justify-content: flex-start;
}
.photo-wrap .photo {
  width: 32.8%;
  margin: 0 0.25% 0.5%;
  line-height: 0;
}
.data-area {
  width: 95%;
  display: block;
}
.data-wrap {
  width: 100%;
}
}