@charset "UTF-8";

/* ----------------------------------------------- CSS Information
 Style Info:     尾道水道クルーズ、尾道〜鞆の浦 航路、尾道〜瀬戸田 航路
 Notes:          
--------------------------------------------------------------- */
.content .wrap {

}
.map-wrap {
	margin: 0 auto 10%;
}
.map-wrap .txt01 {
	color: #484848;
	font-size: 2em;
	font-weight: 500;
	letter-spacing: 0.5em;
	text-indent: 0.5em;
	text-align: center;
	margin: 0 auto 5%;
}
.map-wrap .map-box {
	background-color: #EFEFEF; 
}
.map-box .map {
	width: 80%;
  max-width: 1225px;
  margin: 0 auto;
	line-height: 0;
}
.route-wrap .txt01 {
	margin: 0 auto 3%;
	font-size: 2em;
	letter-spacing: 0.5em;
	text-indent: 0.5em;
	line-height: 1.5;
	color: #484848;
}
.route-wrap .txt02 {
	text-align: justify;
}
.route-wrap .wrap01 {
	margin: 0 auto 10%
}
.route-wrap .wrap01 .txt01 {
	text-align: center;
}
.route-wrap .wrap01 .txt02 {
	width: 80%;
	margin: 0 auto;
}
.route-wrap .wrap01 .box01 {
	margin: 0 auto 3%;
}
.route-wrap .wrap01 .box02 {
	width: 80%;
  max-width: 1225px;
  margin: 0 auto;
}
.route-wrap .wrap01 .box03 {
	width: 80%;
  max-width: 1225px;
	margin: 0 auto;
	position: relative;
}
.route-wrap .wrap01 .heritage {
	width: 6%;
	position: absolute;
	left: 0;
	bottom: 0;
	border: 1px solid #000;
}
.route-wrap .wrap02 {
	margin: 0 auto 10%;
	display: flex;
	justify-content: center;
	align-items: flex-end;
}
.route-wrap .wrap02 .txt01 {
	text-indent: 0;
}
.route-wrap .wrap02 .txt02 {
	
}
.route-wrap .wrap02 .box01 {
	width: 50%;
}
.route-wrap .wrap02 .box02 {
	width: 37%;
  max-width: 550px;
  margin: 0 auto 0 3%;
}
.route-wrap .wrap03 {
	margin: 0 auto 10%;
	display: flex;
	justify-content: center;
	align-items: flex-end;
}
.route-wrap .wrap03 .box01 {
	width: 50%;
	order: 2;
	line-height: 0;
}
.route-wrap .wrap03 .box02 {
	width: 37%;
  max-width: 550px;
  margin: 0 3% 0 auto;
	order: 1;
}
.route-wrap .wrap03 .txt01 {
	text-indent: 0;
}
.btn-wrap {
	width: 80%;
	max-width: 900px;
	margin: 0 auto 10%;
	display: flex;
	justify-content: center;
	align-items: center;
}
.btn-wrap .btn {
	margin: 0 5%;
	text-align: center;
}
.btn-wrap .btn a {
  min-width: 12em;
	padding: 1em 5em;
  display: block;
	color: #00469B;
	position: relative;
	border: 1px solid #00469B;
}
.btn-wrap .btn a:before {
	content: '\03009';
	position: absolute;
	top: 50%;
  left: 20%;
	position: absolute;
  transform: translateY(-50%) translateX(-20%);
  -webkit- transform: translateY(-50%) translateX(-20%);
	color: #00469B;
	font-size: 1.5em;
	line-height: 0;
}
.ship-wrap .headline {
	margin: 0 auto 5%;
	padding: 0.5em 0;
	color: #00469B;
	font-size: 2em;
	font-weight: bold;
	text-align: center;
	background-color: #D9E3F0;
}
.ship-wrap .wrap01 {
  margin: 0 auto 5%;
}
.ship-wrap .ship {
	width: 80%;
  max-width: 1225px;
	margin: 0 auto;
	border: 1px solid #00469B;
}
.ship-wrap .photo {
	line-height: 0;
}
.ship-wrap .txt01 {
	padding: 0.5em 0;
	color: #00469B;
	font-size: 1.8em;
	font-weight: bold;
	text-align: center;
	letter-spacing: 0.5em;
	text-indent: 0.5em;
}
.ship-wrap .txt02 {
	width: 80%;
	max-width: 1225px;
	margin: 0 auto;
}
.ship-wrap .btn {
	display: table;
	margin: 0 auto 10%;
	text-align: center;
}
.ship-wrap .btn a {
	padding: 0.5em 6em;
	color: #FFF;
	font-size: 1.3em;
	background-color: #00469B;
}
.ship-wrap .banner-wrap {
	margin: 0 auto 10%;
}
.ship-wrap .banner {
	width: 70%;
	max-width: 966px;
	margin: 0 auto 3%;
}
.ship-wrap .banner a {
	display: flex;
	justify-content: space-between;
	align-items: center;
	border: 1px solid #000;
	background-color: #FFEB0A;
}
.banner .box01 {
	width: 55%;
	text-align: center;
	font-size: 1.2em;
	color: #000;
}
.banner .box02 {
	max-width: 45%;
	text-align: center;
	line-height: 0;
	background-color: #FFF;
}
.heritage-wrap {
	width: 80%;
	max-width: 1225px;
	margin: 0 auto 10%;
	padding: 3% 3% 3% 6%;
	box-sizing: border-box;
	display: flex;
	justify-content: space-around;
	align-items: center;
	background-color: #FFFADA;
}
.heritage-wrap .box01 {
	width: 60%;
	font-size: 1.5em;
}
.heritage-wrap .box02 {
	width: 35%;
	transform: rotate(5deg);
	line-height: 0;
}
/* ================= smartphone ================= */
@media only screen and (max-width:699px) {
.content .wrap {
}
.map-wrap .txt01 {
  font-size: 1.3em;
}
.map-box .map {
  width: 100%;
}
.route-wrap .txt01 {
  font-size: 1.2em;
	text-align: center;
}
.route-wrap .wrap01 .box02 {
  width: 95%;
}
.route-wrap .wrap01 .box03 {
  width: 100%;
}
.wrap01 .box03 .txt02 {
  width: 59%;
  margin: 0 10% 0 auto;
}
.route-wrap .wrap01 .heritage {
  width: 16%;
  top: 3.2em;
	left: 12%;
	bottom: unset;
  border: 1px solid #000;
}
.route-wrap .wrap02 {
  margin: 0 auto 10%;
  display: block;
  justify-content: center;
  align-items: flex-end;
}
.route-wrap .wrap02 .box01 {
  width: 100%;
	margin: 0 auto 3%;
}
.route-wrap .wrap02 .box02 {
  width: 80%;
	margin: 0 auto
}
.route-wrap .wrap03 {
  display: block;
}
.route-wrap .wrap03 .box01 {
  width: 100%;
	margin: 0 auto 3%;
}
.route-wrap .wrap03 .box02 {
  width: 80%;
	margin: 0 auto
}
.btn-wrap {
  display: block;
}
.btn-wrap .btn {
	width: 100%;
  margin: 0 auto 10%;
  display: block;
}
.btn-wrap .btn a {
  display: block;
}
.ship-wrap .headline {
  font-size: 1.5em;
}
.ship-wrap .wrap01 {
  margin: 0 auto 10%;
}
.ship-wrap .ship {
  width: 90%;
}
.ship-wrap .txt01 {
	padding: 0.5em 0;
	font-size: 1.2em;
}
.ship-wrap .txt02 {
  width: 90%;
}
.ship-wrap .btn a {
  padding: 0.5em 2em;
  font-size: 1.3em;
}
.ship-wrap .banner {
  width: 90%;
}
.ship-wrap .banner a {
  display: block;
}
.banner .box01 {
  width: 100%;
  padding: 1em 0;
	font-size: 12px;
}
.banner .box02 {
  width: 100%;
  max-width: none;
	padding: 0 0 2px;
}
.heritage-wrap {
  width: 95%;
  display: block;
}
.heritage-wrap .box01 {
  width: 90%;
	font-size: 1em;
	margin: 0 auto 5%
}
.heritage-wrap .box02 {
  width: 60%;
	margin: 0 auto 5%
}
}