@charset "utf-8";

html {
}

body {
	font-size: 16px;
	font-family:"Noto Sans JP","ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN","游ゴシック", YuGothic, "メイリオ", Meiryo, sans-serif;
	font-weight: 400;
	font-feature-settings: "palt";
}

article, aside, figcaption, figure, footer, header, hgroup, main, nav, section {
  display: block;
}

h1 {
	margin: 0;
}


/* ===== header ===== */

header {
	position: fixed;
	width: 100%;
	height: 80px;
	z-index: 1000;
}

header .container {
	position: relative;
}

header .container .menu-icon {
	position: absolute;
	top: 8px;
	right: 8px;
	width: 64px;
	height: 64px;
	background: rgba(70, 193, 239, 1.0);
	border-radius: 8px;
	box-shadow: 0px 2px 5px 1px rgba(50, 50, 50, 0.2);
	text-align: center;
	cursor:pointer;
}

header .container .menu-icon i.material-icons {
	font-size: 2.0rem;
	line-height: 64px;
	color: rgba(255, 255, 255, 1.0);
}

header .container .menu-icon:hover,
header .container .menu-icon:active {
	background: #29B6F6;
	cursor: pointer;
}

header .container .mask {
	display: none;
  position: fixed;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.8);
  z-index: 9999;
  transition: opacity 0.5s;
  opacity: 0;
}

body.open-drawer header .container .mask {
  display: block;
}

body.open-drawer header .container .mask.show {
  opacity: 1.0;
}

body.open-drawer header .container button {
	color: rgba(255, 255, 255, 1.0);
  appearance: none;
  border: none;
  background: transparent;
  display: block;
  width: 56px;
  height: 56px;
  margin: 8px 0 0 8px;
  padding: 0;
  font-size: 12px;
  text-align: center;
}

body.open-drawer header .container button .material-icons {
  display: block;
  font-size: 40px;
}

header .container .drawer {
	display: none;
  position: fixed;
	padding: 16px 16px 0 16px;
	box-sizing: border-box;
  top: 0;
  right: -236px;
  width: 236px;
  height: 100%;
  background: rgba(255, 255, 255, 1.0);
  transition: right 0.5s;
  z-index: 10000;
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
  transition: right 0.25s;
}

body.open-drawer .drawer {
  display: block;
}

body.open-drawer .drawer.show {
  right: 0;
}

body.open-drawer .drawer h1 {
  
}

body.open-drawer .drawer h1 img {
  width: 100%;
	height: auto;
}

body .drawer p.time {
	margin: 8px 0 0 0;
  width: auto;
  text-align: center;
  line-height: 1.5;
  font-size: 0.75rem;
	font-weight: 600;
}

body .drawer a.tel,
body .drawer a.access {
	display: block;
	margin: 16px 0;
	padding: 8px;
  width: auto;
  background: rgba(70, 193, 239, 1.0);
  border-radius: 8px;
  box-shadow: 0px 1px 5px 1px rgba(50, 50, 50, 0.2);
  text-align: center;
  line-height: 1.8;
  font-size: 0.875rem;
  color: rgba(255, 255, 255, 1.0);
  font-weight: 500;
}

body .drawer a.tel span,
body .drawer a.access span {
	display: inline-block;
	font-size: 0.75rem;
	line-height: 1.2;
}

body .drawer a.tel i,
body .drawer a.access i {
	vertical-align: middle;
}

body .drawer a.access i {
	margin: -2px 2px 0 0;
}

body .drawer a.tel:link,
body .drawer a.tel:visited,
body .drawer a.access:link,
body .drawer a.access:visited {
	color: rgba(255, 255, 255, 1.0);
	text-decoration: none;
}

body .drawer a.tel:hover,
body .drawer a.tel:active,
body .drawer a.access:hover,
body .drawer a.access:active {
	color: rgba(255, 255, 255, 1.0);
	text-decoration: none;
}

body .drawer address {
	margin: 8px 0 0 0;
	font-style: normal;
	text-align: center;
	line-height: 1.75;
	font-weight: 600;
	display: none;
}

body .drawer address span {
	display: block;
	font-size: 0.735rem;
}

body .drawer nav {
	margin: 16px 0 0 0;
}

body .drawer nav ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

body.drawer nav ul li {}

body .drawer nav ul li.access {
	margin: 0;
}

body .drawer nav ul li.contact {
	margin: 0;
}

body .drawer nav ul li.contact a{
	box-shadow: none;
	border-radius: 0;
}

body .drawer nav ul li a {
	display: block;
	line-height: 44px;
	font-size: 0.9375rem;
	border-bottom: solid 1px #eee;
}

body .drawer nav ul li a:link,
body .drawer nav ul li a:visited {
	color: rgba(40, 40, 40, 1.0);
	text-decoration: none;
}

body .drawer nav ul li a:hover,
body .drawer nav ul li a:active {
	color: rgba(40, 40, 40, 1.0);
	text-decoration: none;
}

body .drawer nav ul li:first-child a {
	border-top: solid 1px #eee;
}

body .drawer nav ul li a br {
	display: none;
}


/* Color */

.text-home {
  color: #0288D1;
}

.text-marinetaxi {
  color: #0097A7; 
}

.text-cruise {
  color: #00796B;
}

.text-cafe {
  color: #FFA000;
}

.text-sky {
  color: #0088f0;
}

.text-cafe_01 {
  color: #118ddb;
}

.text-cafe_02 {
  color: #f5900c;
}

.text-sky_02 {
  color: #0088f0;
}

.text-cafe_03 {
  color: #fab42e;
  padding-top: 10px;
}

.text-access {
  color: #E64A19;
}

.text-kashikojima {
  color: #0083ce;
}

.text-puebloamigo {
  color: #e94829;
}

.text-taso {
  color: #008900;
}

.text-error {
  color: #FF0000;
  font-weight: bold;
}

.error {
  margin: 24px 0 0 0;
}


.border-home {
  border-left-color: #81D4FA;
}

.border-marinetaxi {
  border-left-color: #80DEEA; 
}

.border-cruise {
  border-left-color: #80CBC4;
}

.border-cafe {
  border-left-color: #FFE082;
}

.border-access {
  border-left-color: #FFAB91;
}

.clearfix {
 clear: both;
}

/* responsive
@media (min-width: 576px) {}

@media (min-width: 768px) {}

@media (min-width: 992px) {}
	
@media (min-width: 1200px) {}
*/

@media (min-width: 992px) {	
	
	header {
		width: 100%;
		height: 100px;
		box-shadow: 0px 0px 16px 1px rgba(0, 0, 0, 0.3);
		background: rgba(255, 255, 255, 1.0);
	}

	header .container {
		width: 100%;
		margin: 0;
		padding: 0;
	}

	header .container::before,
	header .container::after {
		display: table;
		content: " ";
	}
	
	body .drawer address span {
		display: inline-block;
	}
	
	header .container .menu-icon {
		display: none;
	}
	
	body.open-drawer header .container .mask,
	header .container .mask {
		display: none;
	}
	
	header .container .drawer {
		display: block;
		position: relative;
		padding: 0;
		top: 0;
		right: 0;
		width: auto;
		height: 100px;
		background: none;
		transition: none;
		z-index: auto;
		overflow-y: auto;
		-webkit-overflow-scrolling: none;
		transition: none;
	}
	
	body .drawer a.tel,
	body .drawer a.access {
		display: none;
	}
	
	body .drawer p.time {
		display: none;
	}
	
	header .container h1 {
		margin: 22px 48px;
		padding: 0;
		width: 224px;
		height: 56px;
		float: left;
	}

	header .container address {
		display: block;
		margin: 0 0 0 320px;
		padding: 8px 16px 0 0;
		height: 16px;
		line-height: 16px;
		font-size:0.875rem;
		text-align: right;
		font-weight: 500;
		font-style: normal;
	}

	header .container address span {
		padding-left: 16px;
		font-size: 0.75rem;
	}

	header .container nav {
		margin: 16px 0 0 320px;
		height: 60px;
	}

	header .container nav::before,
	header .container nav::after {
		display: table;
		content: " ";
	}

	header .container nav::after {
		clear: both;
	}

	header .container nav ul {
		margin: 0;
		padding: 0;
		width: 100%;
		float: left;
		list-style: none;
	}

	header .container nav ul::before,
	header .container nav ul::after {
		display: table;
		content: " ";
	}

	header .container nav ul::after {
		clear: both;
	}

	header .container nav ul li {
		float: left;
		box-sizing: border-box;
	}

	header .container nav ul li a {
		padding: 0 0 0 16px;
		width: 100%;
		height: 60px;
		display: inline-block;
		font-size: 0.875rem;
		font-weight: 500;
		line-height: 60px;
		box-sizing: border-box;
	}
	
	body .drawer nav ul li:first-child a {
    border-top: none;
	}
	
	body .drawer nav ul li a br {
			display: inline;
	}

	header .container nav ul li.marinetaxi a {
		padding: 8px 0 0 16px;
		line-height: 20px;
	}

	header .container nav ul li.cruise a {
		padding: 8px 0 0 16px;
		line-height: 20px;
	}

	header .container nav ul li.contact a {
		padding: 0;
		text-align: center;
    border-bottom: none;
	}

	header .container nav ul li a:link,
	header .container nav ul li a:visited {
		color: rgba(0,0,0,1.0);
		text-decoration: none;
	}

	header .container nav ul li a:hover,
	header .container nav ul li a:active {
		background: #F5F5F5;
		color: rgba(0,0,0,1.0);
		text-decoration: none;     
    
	}
  
	header .container nav ul li.contact a:link,
	header .container nav ul li.contact a:visited {
		color: rgba(255,255,255,1.0);
		text-decoration: none;
    background: #0288D1;
	}

	header .container nav ul li.contact a:hover,
	header .container nav ul li.contact a:active {
		color: rgba(255,255,255,1.0);
		text-decoration: none;
    background: #0277BD;
	}
	
	header .container nav ul li.home {
		width: 12%;
		border-left: solid 2px #81D4FA;
	}

	header .container nav ul li.marinetaxi {
		width: 18%;
		border-left: solid 2px #80DEEA; 
	}

	header .container nav ul li.cruise {
		width: 20%;
		border-left: solid 2px #80CBC4;
	}

	header .container nav ul li.cafe {
		width: 12%;
		border-left: solid 2px #FFE082;
	}

	header .container nav ul li.access {
		width: 13%;
		border-left: solid 2px #FFAB91;
	}

	header .container nav ul li.contact {
		width: 25%;
	}
  
}

/* ===== main ===== */

main {
	position: relative;
	margin: 0;
	padding: 0;
}


/* ===== main .visual ===== */

main .visual {
	position: relative;
	margin: 0;
	height: 615px;
	background-image:url("../img/main_visual_bg.png");
  background-size: auto;
	background-position: center top;
	background-attachment: fixed;
  background-repeat: no-repeat;
}

main .visual .bard {
	position: absolute;
	top: 160px;
	left: 50%;
	margin-left: -37.5%;
	width: 75%;
	height: auto;
}

main .visual .bard img {
	width: 100%;
	height: auto;
}

main .visual h1 {
	position: absolute;
	top: 112px;
	left: 50%;
	margin-left: -32%;
	width: 64%;
	height: auto;
	text-align: center;
}

main .visual h1 img {
	width: 100%;
	height: auto;
}

main .visual .wave {
	position: absolute;
	bottom: 0px;
	width: 100%;
	height:50px;
	background-image:url("../img/main_visual_wave.png");
  background-size: auto;
  background-repeat: repeat-x;
}

@media (min-width: 576px) {

}

@media (min-width: 727px) {
	main .visual h1 {
		position: absolute;
		top: 112px;
		left: 0;
		margin-left: 0;
		width: 100%;
		height: 615px;
		text-align: center;
	}
	
	main .visual h1 img {
		width: auto;
		height: auto;
	}
}

@media (min-width: 768px) {
	
}

@media (min-width: 992px) {
	main {
		position: relative;
		padding-top: 100px;
	}

  .preview main {
		padding-top: 0px;
	}
  
	main .visual {
		position: relative;
		height: 615px;
		background-image:url("../img/main_visual_bg.png");
		background-size: auto;
		background-position: center 100px;
		background-attachment: fixed;
		background-repeat: no-repeat;
	}

	main .visual .bard {
		position: absolute;
		top: 160px;
		left: 50%;
		margin-left: -397px;
		width: 794px;
		height: 208px;
	}

	main .visual h1 {
		position: absolute;
		top: 112px;
		left: 0;
		margin-left: 0;
		width: 100%;
		height: 615px;
		text-align: center;
	}
	
	main .visual h1 img {
		width: auto;
		height: auto;
	}

	main .visual .wave {
		position: absolute;
		bottom: 0px;
		width: 100%;
		height:50px;
		background-image:url("../img/main_visual_wave.png");
		background-size: auto;
		background-repeat: repeat-x;
	}
}
	
@media (min-width: 1200px) {}

@media (min-width: 1366px) {
	main .visual {
		background-size: 100%;
	}
}


/* ===== main .container ===== */

main .container {
	position: relative;
	margin: 0 24px;
	padding: 0;
}


@media (min-width: 576px) {
	main .container {
		margin: 0 auto;
		padding: 0;
		width: 480px;
	}
}

@media (min-width: 768px) {
	main .container {
		width: 640px;
	}
}

@media (min-width: 992px) {
	main .container {
		width: 864px;
	}
}
	
@media (min-width: 1200px) {
	main .container {
		width: 1080px;
	}
}

/* ===== status ===== */

.status {
	position: relative;
	margin: -240px 0 140px 0;
	padding: 16px 8px;
	background: rgba(244, 250, 252, 0.8);
	border: dotted 2px rgba(181, 224, 237, 1.0);
	border-radius: 16px;
	text-align: center;
}

.preview .status {
  margin: 16px 0;
}

.status h1 {
	margin: 0;
	font-size: 0.875rem;
	font-weight: 500;	
}

.status h2 {
	margin: 8px 0 0 0;
	font-size: 0.875rem;
	font-weight: 500;	
}

.status p {
	margin: 8px 8px 0 8px;
	font-weight: 600;
  line-height: 1.5;
}

.status p.notice {
	font-size: 0.75rem;
  margin: 4px 8px 0 8px;
	font-weight: 400;
  line-height: 1.5;
}

.status.out {
  background: rgba(238, 238, 238, 0.8);
  border-color: #BDBDBD;
}

.status.out h1,
.status.out h2,
.status.out p {
	color: #212121;
}

.status.holiday {
  background: rgba(255, 235, 238, 0.8);
  border-color: #EF5350;
}

.status.holiday h1,
.status.holiday h2,
.status.holiday p {
	color: #B71C1C;
}

.status.custom {
  background: rgba(255, 235, 238, 0.8);
  border-color: #EF5350;
}

.status.custom h1,
.status.custom h2,
.status.custom p {
	color: #B71C1C;
}

.status.reserved {
  background: rgba(255, 235, 238, 0.8);
  border-color: #EF5350;
}

.status.reserved h1,
.status.reserved h2,
.status.reserved p {
	color: #B71C1C;
}

@media (min-width: 576px) {
	.status {
		margin: 16px 0 24px 0;
	}
  .preview .status {
    margin: 16px 0;
  }
}

@media (min-width: 768px) {}

@media (min-width: 992px) {}
	
@media (min-width: 1200px) {}


/* ===== SNS ===== */

.sns {
	position: relative;
}

.sns h2 {
	margin: 0;
	text-align: center;
	font-size: 16px;
	font-weight: 500;	
}

.sns .icons {
	padding-top: 24px;
	text-align: center;
}

.sns .icons a {
	display: inline-block;
	margin-left: 16px;
	width: 64px;
	height: 64px;
}

.sns .icons a:first-child {
	margin-left: 0;
}

.sns .icons a img {
	width: 64px;
	height: 64px;
	border-radius: 32px;
}

.sns .icons a:hover {
  opacity: 0.75;
}

@media (min-width: 576px) {}

@media (min-width: 768px) {}

@media (min-width: 992px) {}
	
@media (min-width: 1200px) {}


/* ===== twitter ===== */

.twitter {
	width: 272px;
  height: 499px;
	margin: 32px auto 0 auto;
	border: solid 1px rgba(200, 200, 200, 1.0);
  overflow-y: scroll;
  overflow-x: hidden;
}

@media (min-width: 576px) {
  .twitter {
    width: 480px;
  }
}

@media (min-width: 768px) {}

@media (min-width: 992px) {
  .twitter {
    width: 400px;
    float: left;
  }
}
	
@media (min-width: 1200px) {
  .twitter {
    width: 480px;
  }
}


/* ===== facebook ===== */

.facebook {
	width: 272px;
  height: 499px;
	margin: 32px auto 0 auto;
	border: solid 1px rgba(200, 200, 200, 1.0);
}

@media (min-width: 576px) {
  .facebook {
    width: 480px;
  }
}

@media (min-width: 768px) {}

@media (min-width: 992px) {
  .facebook {
    width: 400px;
    float: right;
  }
}
	
@media (min-width: 1200px) {
  .facebook {
    width: 480px;
  }
}


/* ===== about ===== */

.about {
	margin: 32px 0 0 0;
}

.about p {
	font-size: 0.875rem;
	line-height: 1.75;
	text-align: justify;
}

.about p:first-child {
	text-align: center;
}

.about br.pc-only {
  display: none;
}

@media (min-width: 576px) {}

@media (min-width: 768px) {}

@media (min-width: 992px) {
  .about {
    padding: 64px 0 0 0;
    clear: both;
  }
  .about p {
    text-align: center;
    font-size: 1.125rem;
    line-height: 2.0; 
    font-weight: 300;
  }
  .about br.pc-only {
    display: inline;
  }
}
	
@media (min-width: 1200px) {
  
}


/* ===== service ===== */

.service {
	margin: 32px 0 0 0;
}

.service h2 {
	padding-top: 32px;
	font-size: 1.125rem;
	text-align: center;
	line-height: 1.5;
}

.service h2 span {
	display: block;
	font-size: 0.875rem;
	line-height: 1.5;
}

.service p {
	margin: 8px 0 0 0;
	font-size: 0.875rem;
	line-height: 1.75;
	text-align: justify;
}

.service img {
	width: 100%;
	height: auto;
}

.service a {
	display: block;
	margin: 16px 0 0 0;
	width: 100%;
	height: 46px;
	border-radius: 8px;
	box-shadow: 0px 1px 5px 1px rgba(50, 50, 50, 0.2);
	text-align: center;
	line-height: 44px;
	font-size: 0.875rem;
	color: rgba(255, 255, 255, 1.0);
	font-weight: 500;
}

.service a:link,
.service a:visited {
	text-decoration: none;
  background: #0277BD;
}

.service a:hover,
.service a:active {
	text-decoration: none;
  background: #01579B;
}

@media (min-width: 576px) {}

@media (min-width: 768px) {}

@media (min-width: 992px) {
  
  .service h2 {
    clear: both;
    padding-top: 64px;
    margin-bottom: 32px;
    font-size: 1.3rem;
  }

  .service h2 span {
    font-size: 1rem;
  }
  
  .service img {
    float: left;
    width: 416px;
    height: 281px;
    margin-right: 32px;
  }
  
  .service p {
    margin: 16px 0 0 0;
    font-size: 1rem;
  }
  
  .service a {
    margin-left: 448px;
    width: 416px;
    font-size: 1rem;
  }

}
	
@media (min-width: 1200px) {
  
  .service img {
    width: 520px;
    height: 351px;
    margin-right: 40px;
  }
  
  .service p {
    margin: 16px 0px 0 0;
  }
  
  .service a {
    margin-left: 560px;
    width: 520px;
  }
  
}


/* ===== access ===== */

.access {
	margin: 32px 0 0 0;
}

.access h2 {
	padding-top: 32px;
	font-size: 1.125rem;
	text-align: center;
	line-height: 1.5;
}

.access p {
	font-size: 0.875rem;
	text-align: center;
  line-height: 1.75;
}

.access img {
	width: 100%;
	height: auto;
}

@media (min-width: 576px) {
    .access img {
    display: block;
	  width: 476px;
	  height: auto;
    margin: 0 auto;
  }
}

@media (min-width: 768px) {
    .access img {
    display: block;
	  width: 668px;
	  height: auto;
    margin: 0 auto;
  }
}

@media (min-width: 992px) {
  main .access {
    padding-top: 64px;
	  clear: both;
  }
  
  .access h2 {
    line-height: 1.7;
  }

  .access img {
    display: block;
	  width: 626px;
	  height: auto;
    margin: 0 auto;
  }
  .access p {
    margin-top: 32px;
    font-size: 1rem;
	  line-height: 1.75;
    width: 432px;
    float: left;
  }
  .access img.ship {
    display: block;
    margin: 32px 0 0 0;
	  width: 416px;
	  height: 209px;
    float: right;
  }
}
	
@media (min-width: 1200px) {
  .access p {
    width: 532px;
	  text-align: center;
    float: left;
  }
  .access img.ship {
	  width: 520px;
	  height: 261px;
    float: right;
  }
}


/* ===== ships ===== */

.ships {
	margin: 32px 0 0 0;
}

.ships h2 {
	padding-top: 32px;
	font-size: 1.125rem;
	text-align: center;
	line-height: 1.5;
}

.ships p {
	font-size: 0.875rem;
	line-height: 1.75;
}

.ships img {
	width: 100%;
	height: auto;
}

@media (min-width: 576px) {}

@media (min-width: 768px) {}

@media (min-width: 992px) {
  main .ships {
    padding-top: 64px;
	  clear: both;
  }
  
  .ships h2 {
    line-height: 1.7;
  }
  
  .ships h3 {
    margin-top: 20px;
    text-align: center;
    font-weight: 400;
    font-size: 1.1rem;
  }
  
  .ships img {
    display: block;
	  width: 626px;
	  height: auto;
    padding-bottom: 40px;
    margin: 0 auto;
  }
  .ships p {
    font-size: 0.8rem;
	  line-height: 1.75;
    width: 432px;
    float: left;
  }
  .ships img.ship {
    display: block;
    margin: 32px 0 0 0;
	  width: 416px;
	  height: 209px;
    float: right;
  }
}
	
@media (min-width: 1200px) {
  .ships p {
    width: 480px;
    float: left;
    padding-left: 20px;
  }
  
  .ships img.ships {
	  width: 520px;
	  height: 261px;
    float: left;
  }
}


body.home .ships {
	margin: 48px 0 48px 0;
}

body.home .ships p {
  font-size: 0.875rem;
  line-height: 1.75;
  text-align: justify;
}

body.home .ships .row {
	width: 100%;
}

body.home .ships .row::before,
body.home .ships .row::after {
	display: table;
	content: " ";
}

body.home .ships .row::after {
	clear: both;
}

body.home .ships .row .item {
	margin: 0;
	float: left;
	width: 48%;
	height: auto;
}

body.home .ships .row .item:first-child {
	margin-right: 4%;
}

body.home .ships .row .item img {
	width: 100%;
	height: auto;
}

@media (min-width: 576px) {}

@media (min-width: 768px) {}

@media (min-width: 992px) {
  
  body.home .ships p {
    font-size: 0.9rem;
  }
  
}
	
@media (min-width: 1200px) {}


/* ===== contact ===== */

.contact {
	margin: 16px 0 0 0;
}

.contact h1 {
	font-size: 1.0rem;
	text-align: center;
	line-height: 1.0;
}

.contact h2 {
	margin: 8px 0 8px 0;
	font-size: 1.5rem;
	text-align: center;
	line-height: 1.5;
}

.contact p {
	margin: 0 0 16px 0;
	font-size: 0.75rem;
	text-align: center;
	line-height: 1.5;
}

main .contact a {
	display: block;
	width: 100%;
	height: 44px;
	border-radius: 8px;
	box-shadow: 0px 1px 5px 1px rgba(50, 50, 50, 0.2);
	text-align: center;
	line-height: 44px;
	font-size: 0.875rem;
	color: rgba(255, 255, 255, 1.0);
	font-weight: 500;
}

main .contact a+p {
  margin: 8px 0 0 0;
}

main .contact a:link,
main .contact a:visited {
	text-decoration: none;
  background: #0277BD;
}

main .contact a:hover,
main .contact a:active {
	text-decoration: none;
  background: #01579B;
}

main .contact select.form-control {
    display: inline;
    width: auto;
}

@media (min-width: 576px) {}

@media (min-width: 768px) {}

@media (min-width: 992px) {
  main .contact {
    padding-top: 64px;
	  clear: both;
  }
  
  .marine-taxi main .contact,
  .cafe main .contact{
    padding-top: 16px;
  }
  
  main .contact a {
    height: 64px;
    line-height: 62px;
    font-size: 1.25em;
  }
}
	
@media (min-width: 1200px) {}


/* ===== footer ===== */

footer .footer-head{
	margin: 32px 0 0 0;
	height: 66px;
	background-image:url("../img/footer_header_bg.png");
	background-position: left top;
  background-repeat: repeat-x;
}

footer .footer-content {
	padding: 0 24px;
	background-image:url("../img/footer_bg.png");
	background-position: left top;
  background-repeat: repeat;
}

footer h1 {
	margin: 16px 0 0 0;
	font-size: 1.0rem;
	text-align: center;
	line-height: 1.5;
}

footer h2 {
	margin: 8px 0 8px 0;
	font-size: 1.125rem;
	text-align: center;
	line-height: 1.5;
}

footer .information h3 {
	margin: 8px 0 8px 0;
	font-size: 0.875rem;
	text-align: center;
	line-height: 1.5;
  font-weight: 400;
}

footer h2:first-child {
	font-size: 1.5rem;
}

footer p {
	font-size: 0.875rem;
	line-height: 1.75;
	text-align: center;
}

footer p:first-child {
	margin: 0;
	padding: 16px 0 0 0;
}

footer .icons {
	padding-top: 8px;
	text-align: center;
}

footer .icons a {
	display: inline-block;
	margin-left: 16px;
	width: 48px;
	height: 48px;
}

footer .icons a:first-child {
	margin-left: 0;
}

footer .icons a:hover {
  opacity: 0.75;
}

footer .icons a img {
	width: 48px;
	height: 48px;
	border-radius: 24px;
}

footer .link {
	
}

footer .link ul {}

footer .link ul li {
	padding: 8px 0 0 0;
	font-size: 0.875rem;
}

footer .link ul li a:link,
footer .link ul li a:visited {
	text-decoration: none;
	color: rgba(40, 40, 40, 1.0);
}

footer .link ul li a:hover,
footer .link ul li a:active {
  text-decoration: underline;
	color: #0D47A1;
}

footer .banner {
	margin: 32px 0 0 0;
}

footer .banner ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

footer .banner ul li {}

footer .banner ul li a {
	display: block;
	width: 100%;
	height: auto;
	margin: 16px 0 0 0;
}

footer .banner ul li a:hover {
  opacity: 0.75;
}

footer .banner ul li a img {
	width: 100%;
	height: auto;
}

footer .copyright {
	margin: 0;
	padding: 16px 0 0 0;
	background-image:url("../img/footer_bg.png");
	background-position: left top;
  background-repeat: repeat;
}

footer .copyright p {
	margin: 0;
	padding: 16px 0;
}

@media (min-width: 576px) {
	footer .footer-content .container,
	footer .footer-content .banner {
		margin: 0 auto;
		padding: 0;
		width: 480px;
	}
	
	footer .footer-content .container::before,
	footer .footer-content .container::after {
		display: table;
		content: " ";
	}
	
	footer .footer-content .container::after {
		clear: both;
	}
	
	footer .footer-content .container .information {
		width: 240px;
		float: left;
		padding: 0;
	}
	
	footer .footer-content .container .link {
		width: 224px;
		margin-left: 256px;
	}

	footer .footer-content .banner {
		padding: 24px 0 16px 0;
	}
	
	footer .footer-content .banner ul::before,
	footer .footer-content .banner ul::after {
		display: table;
		content: " ";
	}
	
	footer .footer-content .banner ul::after {
		clear: both;
	}
	
	footer .footer-content .banner ul li {
		width: 230px;
		float: left;
		padding: 0 20px 0 0;
	}
	
	footer .footer-content .banner ul li:nth-child(even) {
		padding-right: 0;
	}
}

@media (min-width: 768px) {
	
	footer .footer-content .container,
	footer .footer-content .banner {
		width: 680px;
	}
	
	footer .footer-content .container .information {
		width: 340px;
	}
	
	footer .footer-content .container .link {
		width: 300px;
		margin-left: 380px;
	}
	
	footer .footer-content .banner ul li {
		width: 320px;
		padding: 0 20px 0 0;
	}

}

@media (min-width: 992px) {}
	
@media (min-width: 1200px) {
	
}


/* ===== marine-taxi title ===== */
/* ===== adventure-cruise title ===== */
/* ===== cafe title ===== */
/* ===== contact-form title ===== */

body.marine-taxi .title,
body.adventure-cruise .title,
body.cafe .title,
body.contact-form .title {
	margin: 0;
	padding: 0;
	border-bottom: solid 1px rgba(245, 245, 245, 1.0);
}

body.marine-taxi .title .background,
body.adventure-cruise .title .background,
body.cafe .title .background,
body.cafe .title .background2,
body.contact-form .title .background {
	height: 84px;
  background-size: auto;
	background-position: center -38px;
  background-repeat: no-repeat;
}

body.marine-taxi .title .background {
	background-image:url("../img/marinetaxi_title.png");
}

body.adventure-cruise .title .background {
	background-image:url("../img/adventurecruise_title.png");
}

body.cafe .title .background {
	background-image:url("../img/cafe_title.png");
}

body.cafe .title .background2 {
	background-image:url("../img/sky_title.png");
}

body.cafe .title .background-para {
	background-image:url("../img/para_title.png");
}

body.cafe .title .background-skydiving {
	background-image:url("../img/skydiving_title.png");
}

body.cafe .title .background-sightseeing_flight {
	background-image:url("../img/sightseeing_flight_title.png");
}

body.cafe .title .background-heli_shuttle {
	background-image:url("../img/heli_shuttle_title.png");
}

body.contact-form .title .background {
	background-image:url("../img/contact_title.png");
}

body.marine-taxi .title h1,
body.adventure-cruise .title h1,
body.cafe .title h1,
body.contact-form .title h1 {
	margin-top: 0px;
	padding: 16px 24px 0 24px;
	text-align: center;
	font-size: 1.25rem;
  line-height: 1.5;
	background: rgba(250, 250, 250, 1.0);
}

body.marine-taxi .title h1 span,
body.adventure-cruise .title h1 span,
body.cafe .title h1 span,
body.contact-form .title h1 span {
	font-size: 0.875rem;
}

body.marine-taxi .title h2,
body.adventure-cruise .title h2,
body.cafe .title h2,
body.contact-form .title h2 {
	margin: 0;
	padding: 8px 24px 16px 24px;
	background: rgba(250, 250, 250, 1.0);
	text-align: center;
	font-size: 1rem;
}

@media (min-width: 576px) {}

@media (min-width: 768px) {}

@media (min-width: 992px) {

	body.marine-taxi .title .background,
	body.adventure-cruise .title .background,
	body.cafe .title .background,
  body.cafe .title .background2,
  body.cafe .title .background-para,
  body.cafe .title .background-skydiving,
  body.cafe .title .background-sightseeing_flight,
  body.cafe .title .background-heli_shuttle,
  body.contact-form .title .background {
		height: 150px;
		background-position: center top;
	}
  
  body.marine-taxi .title h1,
  body.adventure-cruise .title h1,
  body.cafe .title h1,
  body.contact-form .title h1 {
    padding: 16px 24px 0 24px;
    font-size: 1.5rem;
    font-weight: 600;
  }

  body.marine-taxi .title h1 span,
  body.adventure-cruise .title h1 span,
  body.cafe .title h1 span,
  body.contact-form .title h1 span {
    font-size: 1.rem;
  }
	
}
	
@media (min-width: 1200px) {}


/* ===== marine-taxi puebloamigo ===== */

body.marine-taxi .puebloamigo {
	
}

body.marine-taxi .puebloamigo h2 {
	font-size: 1.25rem;
	text-align: center;
}

body.marine-taxi .puebloamigo h3 {
	margin: 24px 0 0 0;
	padding: 0 0 8px 0;
	font-size: 1.0rem;
	text-align: left;
	border-bottom: solid 1px rgba(200, 200, 200, 1.0);
}

body.marine-taxi .puebloamigo img {
	width: 100%;
	height: auto;
}

body.marine-taxi .puebloamigo p {
    font-size: 0.875rem;
    line-height: 1.75;
    text-align: justify;
}

body.marine-taxi .puebloamigo h3+p {
	margin: 4px 0 0 0;
}


body.marine-taxi .puebloamigo table {
	margin: 24px auto 0 auto;
	width: 240px;
	text-align: center;
	border-collapse: collapse;
}

body.marine-taxi .puebloamigo table tr {
	width: 100%;
}

body.marine-taxi .puebloamigo table tr th {
	padding: 0;
	font-size: 0.875rem;
	line-height: 32px;
	font-weight: 600;
	text-align: center;
  border: solid 1px rgba(180, 180, 180, 1.0);
	border-bottom: none;
}

body.marine-taxi .puebloamigo table tr td {
	padding: 0 16px;
	line-height: 32px;
	text-align: center;
  border: solid 1px rgba(180, 180, 180, 1.0);
	border-bottom: none;
}

body.marine-taxi .puebloamigo table tfoot tr td {
	border-bottom: solid 1px rgba(180, 180, 180, 1.0);
}

body.marine-taxi .puebloamigo table tr td p {
	margin: 8px 0;
	line-height: 1.5;
}

@media (min-width: 576px) {}

@media (min-width: 768px) {}

@media (min-width: 992px) {
  
  body.marine-taxi .puebloamigo h2 {
    margin: 32px 0;
    font-size: 1.3rem;
  }
  
  body.marine-taxi .puebloamigo h3 {
    margin: 32px 0 0 0;
    padding: 0 0 16px 0;
    font-size: 1.15rem;
  }
  
  body.marine-taxi .puebloamigo h3.clearfix {
    padding-top: 32px;
  }
  
  body.marine-taxi .puebloamigo p {
    font-size: 1rem;
  }
  
  body.marine-taxi .puebloamigo table {
    margin: 24px 0 0 64px;
    width: 336px;
    float: left;
  }
  
  body.marine-taxi .puebloamigo h3+img {
    margin: 32px 64px 0 64px;
    display: block;
    width: 740px;
  }
}
	
@media (min-width: 1200px) {
  body.marine-taxi .puebloamigo table {
    margin: 24px 0 0 172px;
  }
  
  body.marine-taxi .puebloamigo table:last-of-type {
    margin: 24px 0 0 64px;
  }
  
  body.marine-taxi .puebloamigo h3+img {
    width: 952px;
  }
}


/* ===== marine-taxi aside ===== */

body.marine-taxi aside {
	margin: 32px 0 32px 0;
	padding: 16px;
	background: rgba(250, 250, 250, 1.0);
	box-shadow: 0px 2px 5px 1px rgba(50, 50, 50, 0.2);
}

body.marine-taxi aside::before,
body.marine-taxi aside::after {
	display: table;
	content: " ";
}

body.marine-taxi aside::after {
	clear: both;
}

body.marine-taxi aside img {
	width: 120px;
	float: left;
	margin: 0 8px 0 0;
}

body.marine-taxi aside h1 {
	margin: 0;
	padding: 0; 
	font-size: 0.875rem;
	font-weight: 600;
  line-height: 1.0;
}

body.marine-taxi aside p {
	margin: 8px 0 0 0;
	font-size: 0.8125rem;
  line-height: 1.6;
	text-align: justify;
}

body.marine-taxi aside a {
	margin: 8px 0 0 0;
	padding: 0;
	font-size: 0.875rem;
  line-height: 44px;
	border-radius: 8px;
	display: block;
	text-align: center;
}

body.marine-taxi aside a:link,
body.marine-taxi aside a:visited {
	text-decoration: none;
	color: rgba(255,255,255,1.0);
	background: #F57C00;
}

body.marine-taxi aside a:hover,
body.marine-taxi aside a:active {
	text-decoration: none;
	color: rgba(255,255,255,1.0);
	background: #EF6C00;
}

@media (min-width: 576px) {}

@media (min-width: 768px) {}

@media (min-width: 992px) {
  
  body.marine-taxi aside img {
  	width:336px;
	  float: left;
	  margin: 0 16px 0 0;
  }
  
  body.marine-taxi aside h1 {
    margin: 0;
    padding: 16px 0 0 0; 
    font-size: 1.15rem;
  }
  
  body.marine-taxi aside p {
    margin: 16px 0 0 0;
    font-size: 0.925rem;
  }
  
  body.marine-taxi aside a {
    margin: 16px 0 0 352px;
    font-size: 1rem;
    line-height: 46px;
    height: 48px;
  }
  
}
	
@media (min-width: 1200px) {}


/* ===== marine-taxi shima-sg ===== */

body.marine-taxi .shima-sg {
	margin-top: 64px;
	border-top: solid 1px rgba(225, 225, 225, 1.0);
}

body.marine-taxi .shima-sg h2 {
	font-size: 1.25rem;
	text-align: center;
}

body.marine-taxi .shima-sg h3 {
	margin: 24px 0 0 0;
	padding: 0 0 8px 0;
	font-size: 1.0rem;
	text-align: left;
	border-bottom: solid 1px rgba(200, 200, 200, 1.0);
}

body.marine-taxi .shima-sg img {
	width: 100%;
	height: auto;
}

body.marine-taxi .shima-sg p {
    font-size: 0.875rem;
    line-height: 1.75;
    text-align: justify;
}

body.marine-taxi .shima-sg h3+p {
	margin: 4px 0 0 0;
}

body.marine-taxi .shima-sg ul {
	margin: 8px 0 0 0;
	padding: 0;
	list-style: none;
}

body.marine-taxi .shima-sg ul:last-child {
	margin: 8px 0 32px 0;
}

body.marine-taxi .shima-sg ul li {
	margin: 0 0 0 0;
	padding: 4px 0 0 0;
	font-size: 0.8125rem;
	line-height: 1.5;
	text-align: justify;
}

@media (min-width: 576px) {}

@media (min-width: 768px) {}

@media (min-width: 992px) {
  
  body.marine-taxi .shima-sg h2 {
    margin: 32px 0;
    font-size: 1.3rem;
  }
  
  body.marine-taxi .shima-sg h3 {
    margin: 32px 0 0 0;
    padding: 0 0 16px 0;
    font-size: 1.15rem;
  }
  
  body.marine-taxi .shima-sg p {
    font-size: 1em;
  }
}
	
@media (min-width: 1200px) {}


/* ===== marine-taxi nhstaxi ===== */

body.marine-taxi .nhstaxi {
	
}

body.marine-taxi .nhstaxi h2 {
	padding-top: 40px;
  font-size: 1.25rem;
	text-align: center;
}

body.marine-taxi .nhstaxi h3 {
	margin: 24px 0 0 0;
	padding: 0 0 8px 0;
	font-size: 1.0rem;
	text-align: left;
	border-bottom: solid 1px rgba(200, 200, 200, 1.0);
}

body.marine-taxi .nhstaxi img {
	width: 100%;
	height: auto;
}

body.marine-taxi .nhstaxi p {
    font-size: 0.875rem;
    line-height: 1.75;
    text-align: justify;
}

body.marine-taxi .nhstaxi h3+p {
	margin: 4px 0 0 0;
}


body.marine-taxi .nhstaxi table {
	margin: 24px auto 0 auto;
	width: 240px;
	text-align: center;
	border-collapse: collapse;
}

body.marine-taxi .nhstaxi table tr {
	width: 100%;
}

body.marine-taxi .nhstaxi table tr th {
	padding: 0;
	font-size: 0.875rem;
	line-height: 32px;
	font-weight: 600;
	text-align: center;
  border: solid 1px rgba(180, 180, 180, 1.0);
	border-bottom: none;
}

body.marine-taxi .nhstaxi table tr td {
	padding: 0 16px;
	line-height: 32px;
	text-align: center;
  border: solid 1px rgba(180, 180, 180, 1.0);
	border-bottom: none;
}

body.marine-taxi .nhstaxi table tfoot tr td {
	border-bottom: solid 1px rgba(180, 180, 180, 1.0);
}

body.marine-taxi .nhstaxi table tr td p {
	margin: 8px 0;
	line-height: 1.5;
}

@media (min-width: 576px) {}

@media (min-width: 768px) {}

@media (min-width: 992px) {
  
  body.marine-taxi .nhstaxi h2 {
    margin: 32px 0;
    font-size: 1.3rem;
  }
  
  body.marine-taxi .nhstaxi h3 {
    margin: 32px 0 0 0;
    padding: 0 0 16px 0;
    font-size: 1.15rem;
  }
  
  body.marine-taxi .nhstaxi h3.clearfix {
    padding-top: 32px;
  }
  
  body.marine-taxi .nhstaxi p {
    font-size: 1rem;
  }
  
  body.marine-taxi .nhstaxi table {
    margin: 24px 0 0 64px;
    width: 336px;
    float: left;
  }
  
  body.marine-taxi .nhstaxi h3+img {
    margin: 32px 64px 0 64px;
    display: block;
    width: 740px;
  }
}
	
@media (min-width: 1200px) {
  body.marine-taxi .nhstaxi table {
    margin: 24px 0 0 172px;
  }
  
  body.marine-taxi .nhstaxi table:last-of-type {
    margin: 24px 0 0 64px;
  }
  
  body.marine-taxi .nhstaxi h3+img {
    width: 952px;
  }
}




/* ===== marine-taxi notice ===== */

body.marine-taxi .notice {
	margin-top: 64px;
	border-top: solid 1px rgba(225, 225, 225, 1.0);
}

body.marine-taxi .notice h2 {
	margin: 16px 0 0 0;
	font-size: 1.25rem;
	text-align: center;
}

body.marine-taxi .notice h2 img {
	width: 120px;
	height: auto;
}

body.marine-taxi .notice h3 {
	margin: 24px 0 0 0;
	font-size: 1rem;
  text-align: center;
}

body.marine-taxi .notice ul {
	margin: 16px 0 0 16px;
	padding: 0;
	list-style: disc;
}

body.marine-taxi .notice ul li {
	margin: 0 0 0 0;
	padding: 4px 0 0 0;
	font-size: 0.8125rem;
	line-height: 1.5;
	text-align: justify;
}

@media (min-width: 576px) {}

@media (min-width: 768px) {}

@media (min-width: 992px) {}
	
@media (min-width: 1200px) {}


/* ===== marine-taxi caution ===== */

body.marine-taxi .caution {
	margin: 32px 0 32px 0;
	padding: 24px;
	background: rgba(250, 250, 250, 1.0);
	box-shadow: 0px 2px 5px 1px rgba(50, 50, 50, 0.2);
}

body.marine-taxi .caution h2 {
	margin: 0 0 24px 0;
	font-size: 1.0rem;
	text-align: center;
}

body.marine-taxi .caution img {
	width: 100%;
	height: auto;
}

body.marine-taxi .caution p {
	margin: 16px 0 0 0;
  font-size: 0.875rem;
  line-height: 1.75;
  text-align: justify;
}

body.marine-taxi .caution ul {
	margin: 8px 0 0 0;
	padding: 0;
	list-style: none;
}

body.marine-taxi .caution ul li {
	margin: 0 0 0 0;
	padding: 4px 0 0 0;
	font-size: 0.8125rem;
	line-height: 1.5;
	text-align: justify;
}

@media (min-width: 576px) {}

@media (min-width: 768px) {}

@media (min-width: 992px) {
  
  body.marine-taxi .caution {
    margin: 32px 0 32px 0;
    padding: 16px 24px 24px 24px;
    height: 188px;
  }

  body.marine-taxi .caution h2 {
    margin: 0 0 16px 0;
    font-size: 1.125rem;
  }
  
  body.marine-taxi .caution img {
    width:336px;
	  float: left;
	  margin: 0 16px 0 0;
  }
  
  body.marine-taxi .caution p {
    margin: 0;
    font-size: 0.9rem;
    line-height: 1.6;
  }
  
}
	
@media (min-width: 1200px) {
  
  body.marine-taxi .caution {
    height: 186px;
  }
  
  body.marine-taxi .caution p {
    font-size: 1rem;
    line-height: 1.75;
  }
  
}


/* ===== cafe about ===== */

body.cafe .about {
	
}

body.cafe .about img {
	width: 100%;
	height: auto;
}

body.cafe .about p {
    font-size: 0.875rem;
    line-height: 1.75;
    text-align: justify;
}

@media (min-width: 576px) {}

@media (min-width: 768px) {}

@media (min-width: 992px) {
  
  body.cafe .about {
	  padding: 0;
  }
  
  body.cafe .about p {
    font-size: 1rem;
    line-height: 1.75;
    font-weight: 400;
}

}
	
@media (min-width: 1200px) {}


/* ===== cafe hours ===== */

body.cafe .hours {
	margin: 32px 0 32px 0;
}

body.cafe .hours h2 {
  padding: 20px 0 16px 0;
	font-size: 1.25rem;
	text-align: center;
  border-bottom: solid 1px rgba(225, 225, 225, 1.0);
}

body.cafe .hours p {
    font-size: 0.875rem;
    line-height: 1.75;
    text-align: justify;
}

body.cafe .hours p .text-small {
  font-size: 0.8rem; 
  color: #333333; 
  line-height: 1.1rem;
  display: inline-block;
}

body.cafe .hours table, th, td {
  border-collapse: collapse;
  border: solid #CCC 1px;
  line-height:1.5;
  padding: 10px;
  width: 480px;
}

body.cafe .hours img {
	width: 100%;
	height: auto;
}



.text-right {
  text-align: right;
}


@media (min-width: 576px) {}

@media (min-width: 768px) {}

@media (min-width: 992px) {
  
  body.cafe .hours p {
    font-size:1em;
  }
  
}
	
@media (min-width: 1200px) {}


/* ===== cafe menu ===== */

body.cafe .menu {
	margin: 32px 0 32px 0;
}

body.cafe .menu h2 {
  padding-bottom: 16px;
	font-size: 1.25rem;
	text-align: center;
  border-bottom: solid 1px rgba(225, 225, 225, 1.0);
}

body.cafe .menu h3 {
	margin: 24px 0 0 0;
	padding: 0 0 8px 0;
	font-size: 1.0rem;
	text-align: center;
}

body.cafe .menu ul {
	margin: 8px 0 0 0;
	padding: 0;
	list-style: none;
}

body.cafe .menu ul li {
	margin: 0 0 0 0;
	padding: 4px 0 0 0;
	font-size: 0.875rem;
	line-height: 1.5;
	text-align: center;
}

body.cafe .menu p {
	margin: 8px 0 0 0;
  font-size: 0.8125rem;
  line-height: 1.75;
  text-align: center;
}

body.cafe .menu p.caution {
	margin: 24px 0 0 0;
  font-size: 0.8125rem;
  line-height: 1.75;
  text-align: center;
}

body.cafe .menu .row {
	margin: 16px 0 0 0;
	width: 100%;
}

body.cafe .menu .row::before,
body.cafe .menu .row::after {
	display: table;
	content: " ";
}

body.cafe .menu .row::after {
	clear: both;
}

body.cafe .menu .row .item {
	margin: 0;
	float: left;
	width: 48%;
	height: auto;
}

body.cafe .menu .row .item:first-child {
	margin-right: 4%;
}

body.cafe .menu .row .item img {
	width: 100%;
	height: auto;
}

body.cafe .menu .row .item span {
	display: block;
	margin: 0;
	padding: 4px 0 0 0;
	font-size: 0.8125rem;
	line-height: 1.5;
	text-align: center;
}

@media (min-width: 576px) {}

@media (min-width: 768px) {}

@media (min-width: 992px) {
  
  body.cafe .menu .row {
    margin: 32px 0 0 0;
  }
  
  body.cafe .menu h3 {
    margin: 24px 0 0 0;
    font-size: 1.15rem;
  }
  
  body.cafe .menu ul li {
    padding: 8px 0 0 0;
    font-size: 1rem;
  }
  
  body.cafe .menu .row .item span {
    font-size: 1rem;
  }
  
  body.cafe .menu p.caution {
    font-size: 1rem;
  }

}
	
@media (min-width: 1200px) {}


/* ===== cafe tourist-information ===== */

body.cafe .tourist-information {
	margin: 48px 0 48px 0;
}

body.cafe .tourist-information p {
  font-size: 0.875rem;
  line-height: 1.75;
  text-align: justify;
}

body.cafe .tourist-information .row {
	width: 100%;
}

body.cafe .tourist-information .row::before,
body.cafe .tourist-information .row::after {
	display: table;
	content: " ";
}

body.cafe .tourist-information .row::after {
	clear: both;
}

body.cafe .tourist-information .row .item {
	margin: 0;
	float: left;
	width: 48%;
	height: auto;
}

body.cafe .tourist-information .row .item:first-child {
	margin-right: 4%;
}

body.cafe .tourist-information .row .item img {
	width: 100%;
	height: auto;
}

@media (min-width: 576px) {}

@media (min-width: 768px) {}

@media (min-width: 992px) {
  
  body.cafe .tourist-information p {
    font-size: 1rem;
  }
  
}
	
@media (min-width: 1200px) {}


/* ===== adventure-cruise plan ===== */

body.adventure-cruise .plan {
	margin: 32px 0 16px 0;
	border-top: solid 1px rgba(225, 225, 225, 1.0);
}

body.adventure-cruise .plan2 {
	margin: 32px 0 16px 0;
}

body.adventure-cruise .container .plan:first-child {
	margin: 0 0 16px 0;
	border-top: none;
}

body.adventure-cruise .plan h2 {
	font-size: 1.25rem;
	line-height: 1.35;
	text-align: left;
}

body.adventure-cruise .plan h3 {
	margin: 24px 0 0 0;
	padding: 0 0 8px 0;
	font-size: 1.0rem;
	text-align: left;
	border-bottom: solid 1px rgba(200, 200, 200, 1.0);
}

body.adventure-cruise .plan img {
	width: 100%;
	height: auto;
}

body.adventure-cruise .plan p {
    font-size: 0.875rem;
    line-height: 1.75;
    text-align: justify;
}

body.adventure-cruise .plan h3+p {
	margin: 4px 0 0 0;
}


body.adventure-cruise .plan aside {
	margin: 32px 0 32px 0;
	padding: 16px;
	background: rgba(250, 250, 250, 1.0);
	box-shadow: 0px 2px 5px 1px rgba(50, 50, 50, 0.2);
}

body.adventure-cruise .plan aside::before,
body.adventure-cruise .plan aside::after {
	display: table;
	content: " ";
}

body.adventure-cruise .plan aside::after {
	clear: both;
}

body.adventure-cruise .plan aside img {
	width: 120px;
	float: left;
	margin: 0 8px 0 0;
}

body.adventure-cruise .plan aside h1 {
	margin: 0;
	padding: 0; 
	font-size: 0.875rem;
	font-weight: 600;
  line-height: 1.0;
}

body.adventure-cruise .plan aside p {
	margin: 8px 0 0 0;
	font-size: 0.8125rem;
  line-height: 1.6;
	text-align: justify;
}

body.adventure-cruise .plan aside a {
	margin: 8px 0 0 0;
	padding: 0;
	font-size: 0.875rem;
  line-height: 44px;
	border-radius: 8px;
	display: block;
	text-align: center;
  font-weight: 400;
}

body.adventure-cruise .plan aside a:link,
body.adventure-cruise .plan aside a:visited {
	text-decoration: none;
	color: rgba(255,255,255,1.0);
	background: #F57C00;
}

body.adventure-cruise .plan aside a:hover,
body.adventure-cruise .plan aside a:active {
	text-decoration: none;
	color: rgba(255,255,255,1.0);
	background: #EF6C00;
}

body.adventure-cruise .plan a {
	display: block;
	height: 44px;
  margin: 16px 0 0 0;
	border-radius: 8px;
	box-shadow: 0px 1px 5px 1px rgba(50, 50, 50, 0.2);
	text-align: center;
	line-height: 44px;
	font-size: 0.875rem;
	color: rgba(255, 255, 255, 1.0);
	font-weight: 500;
}

body.adventure-cruise .plan a:link,
body.adventure-cruise .plan a:visited {
	text-decoration: none;
  background: #C62828;
}

body.adventure-cruise .plan a:hover,
body.adventure-cruise .plant a:active {
	text-decoration: none;
  background: #B71C1C;
}

body.adventure-cruise .plan p.caution {
	margin: 8px 0 0 0;
  font-size: 0.8125rem;
  line-height: 1.5;
  text-align: left;
}

@media (min-width: 576px) {}

@media (min-width: 768px) {}

@media (min-width: 992px) {
  
  body.adventure-cruise .plan h2 {
    margin: 32px 0;
    font-size: 1.3rem;
    text-align: center;
  }
  
  body.adventure-cruise .plan h3 {
    margin: 32px 0 0 0;
    padding: 0 0 16px 0;
    font-size: 1.15rem;
  }
  
  body.adventure-cruise .plan p {
    font-size: 1em;
  }
  
  body.adventure-cruise .plan aside img {
  	width:336px;
	  float: left;
	  margin: 0 16px 0 0;
  }
  
  body.adventure-cruise .plan aside h1 {
    margin: 0;
    padding: 16px 0 0 0; 
    font-size: 1.15rem;
  }
  
  body.adventure-cruise .plan aside p {
    margin: 16px 0 0 0;
    font-size: 0.925rem;
    line-height: 1.75;
  }
  
  body.adventure-cruise .plan aside a {
    margin: 16px 0 0 352px;
    font-size: 1rem;
    line-height: 46px;
    height: 48px;
  }
  
  body.adventure-cruise .plan a {
    margin: 32px 0 0 0;
    height: 64px;
    line-height: 62px;
    font-size: 1.25em;
  }
  
  body.adventure-cruise .plan p.caution {
    line-height: 1.75;
    text-align: center;
  }
}
	
@media (min-width: 1200px) {}


/* ===== calendar ===== */

.calendar {
  clear: both;
	margin: 0;
}

.calendar h2 {
	padding-top: 32px;
	font-size: 1.125rem;
	text-align: center;
	line-height: 1.5;
}

.calendar h2 span {
	display: block;
	font-size: 0.875rem;
	line-height: 1.5;
}

.calendar .calendar-header {
  width: 100%;
  height: 36px;
}
  
.calendar .calendar-header::before,
.calendar .calendar-header::after {
	display: table;
	content: " ";
}

.calendar .calendar-header .prev {
	float: left;
  width: 64px;
  height: 32px;
  display: none;
}

.calendar .calendar-header .next {
	float: right;
  width: 64px;
  height: 32px;
  display: none;
}

.calendar .calendar-header .next.show,
.calendar .calendar-header .prev.show {
  display: block;
}

.calendar .calendar-header .prev a,
.calendar .calendar-header .next a {
  display: block;
  margin: 0 2px 0 0;
  padding: 0;
  background: #0288D1;
  color: #fff;
  width: 64px;
  height: 36px;
  line-height: 36px;
  font-size: 0.8rem;
  border-radius: 4px;
  text-align: center;
}

.calendar .calendar-header .prev a {
  margin: 0 0 0 2px;
  width: 64px;
}

.calendar .calendar-header .prev a:link,
.calendar .calendar-header .prev a:visited,
.calendar .calendar-header .next a:link,
.calendar .calendar-header .next a:visited {
  text-decoration: none;
}

.calendar .calendar-header .prev a:hover,
.calendar .calendar-header .prev a:active,
.calendar .calendar-header .next a:hover,
.calendar .calendar-header .next a:active {
  background: #0277BD;
  text-decoration: none;
}

.calendar h3 {
  margin: 0 64px;
  line-height: 32px;
	font-size: 1.1rem;
	text-align: center;
}

.calendar table {
  width: 100%;
  margin: 24px auto 0 auto;
}

.calendar tr {
  
}

.calendar th {
  line-height: 48px;
  background: #E0E0E0;
}

.calendar th.sun {
  background: #C62828;
  color: #fff;
}

.calendar th.sat {
  background: #1565C0;
  color: #fff;
}

.calendar td {
  height: 102px;
  line-height: 48px;
  text-align: center;
  font-weight: bold;
  background: #F0F0F0;
}

.calendar td.none {
  background: #fafafa;
}

.calendar td.sun,
.calendar td.holiday {
  background: #FFEBEE;
  color: #C62828;
}

.calendar td.sat {
  background: #E3F2FD;
  color: #1565C0;
}

.calendar td.false,
.calendar td.sun.false,
.calendar td.holiday.false,
.calendar td.sat.false {
  color: #9E9E9E;
}

.calendar td a {
  display: block;
  margin: 0 4px 4px 4px;
  padding: 4px 0;
  background: #0288D1;
  color: #fff;
  line-height: 12px;
  font-size: 8px;
  font-weight: bold;
  border-radius: 8px;
  text-align: center;
}

.calendar td a:link,
.calendar td a:visited {
  text-decoration: none;
}

.calendar td a:hover,
.calendar td a:active {
  background: #0277BD;
  text-decoration: none;
}

.calendar br.br {
  display: inline-block;
}


@media (min-width: 576px) {}

@media (min-width: 768px) {
  
  .calendar .calendar-header {
    width: 680px;
    margin: 16px auto 0 auto;
  }
  
  .calendar .calendar-header .prev {
    width: 96px;
    height: 36px;
  }

  .calendar .calendar-header .next {
    width: 97px;
    height: 36px;
  }

  .calendar .calendar-header .prev a,
  .calendar .calendar-header .next a {
    width: 94px;
    height: 36px;
    line-height: 36px;
    font-size: 0.9rem;
  }
  
  .calendar h3 {
    margin: 0 102px;
    line-height: 36px;
    font-size: 1.2rem;
    text-align: center;
  }
  
  .calendar table {
    width: 680px;
  }
  
  .calendar td a {
    padding: 8px 0;
    line-height: 16px;
    font-size: 12px;
  }
  
  .calendar br.br {
    display: none;
  }
  
}

@media (min-width: 992px) {
  
  .calendar h2 {
    clear: both;
    padding-top: 64px;
    margin-bottom: 0px;
    font-size: 1.3rem;
  }

  .scalendar h2 span {
    font-size: 1rem;
  }

}
	
@media (min-width: 1200px) {
  
}

/* ===== .form ===== */

.form {
	margin: 24px 0 0 0;
  width: 100%;
}

.form p {
  margin: 0 0 8px 0;
	padding: 0px;
	font-size: 1rem;
	line-height: 1.5;
}

.form p.center {
  padding: 8px 0 8px 0;
  text-align: center;
}

.form p.center+p.center {
  padding: 0;
}

.form p strong {
  
  font-size: 1.5rem;
}

.form h3 {
 margin: 32px 0 0 0;
 padding: 0;
 font-size: 1rem;
}

.form input {
  margin: 12px 0 0 0;
  width: 100%;
  padding: 0 12px 0 12px;
  border: 1px solid #dddddd;
  border-radius: 8px;
  font-size: 16px;
  line-height: 44px;
  box-sizing: border-box;
}

.form input[type="checkbox"] {
  width: auto;
  margin-right: 8px;
}

.checkbox-item {
  padding: 4px 0;
}

h3+.checkbox-item {
  padding-top: 8px;
}

.form input[type="checkbox"]+label:hover {
  cursor: pointer;
}


.form select {
  margin: 12px 0 0 0;
  padding: 10px 8px 12px 8px;
  font-size: 16px;
  line-height: 18px;
  outline: none;
  border-radius: 8px;
  -webkit-appearance: none;
  border: 1px solid #dddddd;
  border-radius: 8px;
}

.form textarea {
  margin: 12px 0 0 0;
  width: 100%;
  padding: 6px 12px 6px 12px;
  border: 1px solid #dddddd;
  border-radius: 8px;
  font-size: 16px;
  line-height: 1.65;
  box-sizing: border-box;
}

.form input.readonly,
.form textarea.readonly,
.form input.readonly:focus,
.form textarea.readonly:focus {
  border-color: #fff;
  background: #fafafa;
  outline: none;
}


.form input.submit {
  margin: 36px 0 0 0;
  border: 1px solid #0288D1;
  color: rgba(255,255,255,1.0);
  text-decoration: none;
  background: #0288D1;
}

.form input.submit:hover {
  cursor: pointer;
  background: #0277BD;
}

.form table tr {}

.form table th {}

.form table td {}

.form .row {
  margin: 16px 0;
}

.form .row:before,
.form .row:after {
	display: table;
	content: " ";
}

.form .row:after {
	clear: both;
}
 
.form .row .item {
  width: 48%;
  float: left;
}

.form .row .item:last-child {
  margin-left: 4%;
}

.form .row .item:first-child input {
  width: 100%;
  padding: 0;
  background: #0288D1;
  color: #fff;
}

.form .row .item:last-child input {
  width: 100%;
  padding: 0;
  background: #777;
  color: #fff;
}

.form .row .item:first-child input:hover,
.form .row .item:first-child input:active {
  width: 100%;
  background: #0277BD;
  color: #fff;
  cursor: pointer;
}

.form .row .item:last-child input:hover,
.form .row .item:last-child input:active {
  width: 100%;
  background: #666;
  color: #fff;
  cursor: pointer;
}


@media (min-width: 576px) {}

@media (min-width: 768px) {
  .form {
    width: 680px;
    margin: 32px auto 0 auto;
  }
}

@media (min-width: 992px) {

}
	
@media (min-width: 1200px) {
  
}

.error-list .error-item {
  padding-top: 4px;
  line-height:1.5;
}