@charset "UTF-8";

/* ----------------------------------------------- CSS Information
 Style Info:     クルーズ一覧
 Notes:          
--------------------------------------------------------------- */
.content .wrap {
	width: 80%;
  max-width: 1225px;
  margin: 0 auto 10%;
}
.list-wrap {
	margin: 0 auto 15%;
}
.list-wrap .box01 {
	margin: 0 auto 8%;
	line-height: 0;
	position: relative;
}
.list-wrap .box01 a {
	display: block;
}
.list-wrap .box02 {
	margin: 0 auto 8%;
	line-height: 0;
	position: relative;
}
.list-wrap .box02 a {
	display: block;
}
.list-wrap .box03 {
	margin: 0 auto 8%;
	line-height: 0;
	position: relative;
}
.list-wrap .box03 a {
	display: block;
}
.list-wrap a:before {
  content: '';
  width: 100%;
  height: 7em;
  display: inline-block;
  position: absolute;
  z-index: 1;
  opacity: 0.6;
  top: 0;
  left: 0;
  background: linear-gradient(rgba(0,128,203,1), rgba(0,70,155,0));
  mix-blend-mode: multiply;
}
.list-wrap a:after {
  content: '';
  width: 100%;
  height: 7em;
  display: inline-block;
  position: absolute;
  opacity: 0.6;
  bottom: 0;
  left: 0;
  background: linear-gradient(rgba(0,70,155,0), rgba(0,128,203,1));
  mix-blend-mode: multiply;
}
.list-wrap .in-wrap {
	width: 80%;
  max-width: 1225px;
  margin: 0 auto;
	position: absolute;
	top: 50%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
  -webkit- transform: translateY(-50%) translateX(-50%);
	z-index: 2;
}
.list-wrap .in-box {
  width: 15em;
  height: 15em;
  display: flex;
  position: absolute;
  z-index: 2;
  top: 50%;
  border: 2px solid #FFF;
  box-shadow: 0 0 0.3em #0080CB;
  border-radius: 0.3em;
	background-color: rgba(255,255,255,0.76);
  line-height: 1.5;
  flex-direction: column;
  align-items: center;
  justify-content: center;
	text-align: center;
}
.box01 .in-box {
  right: 0;
  transform: translateY(-50%) translateX(0);
  -webkit- transform: translateY(-50%) translateX(0);
}
.box02 .in-box {
  left: 0;
  transform: translateY(-50%) translateX(0);
  -webkit- transform: translateY(-50%) translateX(0);
}
.box03 .in-box {
  right: 0;
  transform: translateY(-50%) translateX(0);
  -webkit- transform: translateY(-50%) translateX(0);
}
.in-box .txt01 {
	width: 90%;
	margin: 0 auto 0.4em;
  padding: 0 0 0.4em;
	color: #0080CB;
	font-size: 1.8em;
	font-weight: 500;
	line-height: 1.5;
	border-bottom: 2px dashed #0080CB;
}
.in-box .txt02 {
	color: #0080CB;
	font-weight: 500;
}
/* ================= smartphone ================= */
@media only screen and (max-width:699px) {
.content .wrap {
	width: 95%;
}
.list-wrap .box01 {
	height: 15em;
}
.list-wrap .box02 {
	height: 15em;
}
.list-wrap .box03 {
	height: 15em;
}
.box01 img {
	height: 100%;
	max-width: none;
	position: absolute;
	right: -30%;
}
.box02 img {
	height: 100%;
	max-width: none;
	position: absolute;
	right: -60%;
}
.box03 img {
	height: 100%;
	max-width: none;
	position: absolute;
	right: -55%;
}
.list-wrap .in-box {
  width: 11em;
  height: 11em;
}
.list-wrap .in-wrap {
  width: 90%;
}
.in-box .txt01 {
  font-size: 1.2em;
}

}