/**************************************************************
 /css/design.css
****************************************************************
 1) ページ共通
 2) 横浜クルーズ
 3) プラン
------------------------------------------------------------*/


/**************************************************************
 1) ページ共通
**************************************************************/
article {
	padding-top: 60px;/* ヘッダーの高さ */
}
/*---------- 開いたときのアニメーション ----------*/
/* 0〜1秒 */
body {
	animation-name: fadeInAnime0-10;
	animation-duration: 1s;
	animation-fill-mode: forwards;
	opacity:0;
}
@keyframes fadeInAnime0-10 {
  from {
		opacity: 0;
  }
  to {
		opacity: 1;
  }
}
/*---------- キービジュアル ----------*/
.kvWrap .kv {
	width: 100%;
	height: 350px;
	background: no-repeat center/cover;
	overflow: hidden;
	text-indent: 100%;
	white-space: nowrap;
}
/*---------- タイトル ----------*/
.kvWrap .pageTitle {
	font-family: 'EB Garamond', 'Times New Roman', Times, serif;
	line-height: 1.08;
	text-align: center;
	font-weight: 500;
	color: #111d39;
	margin: 75px 10px 60px;
}
/*---------- タイトル下テキスト ----------*/
.introWrap .txtWrap {
	padding: 0 20px 50px;
}
.introWrap .txtWrap p.txt + p.txt {
	margin-top: 1.6em;
}
/*---------- 2つ目の写真 ----------*/
.introWrap {
	padding: 0 0 75px;
}
.introWrap .subKv {
	width: 88%;
	height: 225px;
	background: no-repeat center/cover;
	overflow: hidden;
	text-indent: 100%;
	white-space: nowrap;
	border-radius: 0 30px 30px 0;
}
/*---------- セクションのタイトル ----------*/
.secTitle {
	line-height: 1.08;
	text-align: center;
	color: #111d39;
}

/* タブレット〜PC用
------------------------------------------------------------*/
@media screen and (min-width:770px) {
	article {
		padding-top: 68px;/* ヘッダーの高さ */
	}
	/*---------- キービジュアル ----------*/
	.kvWrap .kv {
		height: 400px;
	}
	/*---------- タイトル ----------*/
	.kvWrap .pageTitle {
		margin: 80px 10px 65px;
	}
	/*---------- 2つ目の写真 ----------*/
	.introWrap {
		padding: 0 0 90px;
	}
	.introWrap .subKv {
		height: 300px;
	}
}

/* PC用
------------------------------------------------------------*/
@media screen and (min-width:960px) {
/*---------- キービジュアル ----------*/
	.kvWrap {
		padding: 0 0 120px;
		display: -webkit-box;
		display: flex;
    	-webkit-justify-content: space-between;
    	justify-content: space-between;
		-webkit-align-items: center;
		align-items: center;
    	-webkit-flex-direction: row-reverse;
    	flex-direction: row-reverse;
	}
	.kvWrap .kv {
		width: 54%;
		height: 550px;
		border-radius: 40px 0 0 40px;
	}
	/*---------- キャッチ ----------*/
	.kvWrap .pageTitle {
		width: 46%;
		text-align: left;
		margin: 0;
		padding: 0 2% 0 6%;
	}
	/*---------- 導入部分 ----------*/
	.introWrap {
		padding: 0 0 140px;
		display: -webkit-box;
		display: flex;
    	-webkit-justify-content: space-between;
    	justify-content: space-between;
    	-webkit-flex-direction: row-reverse;
    	flex-direction: row-reverse;
	}
	.introWrap .txtWrap {
		width: 63%;
	}
	.introWrap .subKv {
		width: 37%; 
		height: auto;
		border-radius: 0 40px 40px 0;
	}
}

@media screen and (min-width:1200px) {
	article {
		padding-top: 0;
	}
}

/**************************************************************
 2) 横浜クルーズ
**************************************************************/
/*---------- キービジュアル ----------*/
.yokohama .kvWrap .kv {
	background-image: url(../images/yokohama/kv.jpg);
}
/*---------- キャッチ ----------*/
.yokohama .kvWrap .pageTitle {
	font-size: 2.2rem;
	line-height: 1.5;
}
/*---------- 2つ目の写真 ----------*/
.yokohama .introWrap .subKv {
	background-image: url(../images/yokohama/subKv.jpg);
	background-position: left bottom;
}
/*---------- クルージングコース ----------*/
.yokohama .cruisingCourse {
	padding-bottom: 50px;
}
.yokohama .cruisingCourse .secTitle {
	font-size: 2.8rem;
	margin: 0 0 20px;
}
.yokohama .cruisingCourse .mapWrap {
	margin: 0 0 60px;
}
.yokohama .cruisingCourse .mapWrap p.map {
	margin: 0 0 28px;
}
.yokohama .cruisingCourse .mapWrap p.tokyo,
.yokohama .cruisingCourse .mapWrap p.keihin {
	position :relative;
	font-size: 1.8rem;
	line-height: 1.2;
	padding-left: 65px;
	margin: 0 0 16px;
}
.yokohama .cruisingCourse .mapWrap p.keihin {
	margin: 0 0 22px;
}
.yokohama .cruisingCourse .mapWrap p.tokyo::before,
.yokohama .cruisingCourse .mapWrap p.keihin::before {
	position: absolute;
	content: "";
	width: 50px;
	height: 3px;
	top: 47%;
	left: 0;
	background: #eb8100;
}
.yokohama .cruisingCourse .mapWrap p.keihin::before {
	background: #9068d9;
}
/*---------- ビューポイント ----------*/
.yokohama .cruisingCourse .viewPoint {
	-webkit-flex-wrap: wrap;
    flex-wrap: wrap;
}
.yokohama .cruisingCourse .viewPoint li {
	width: 48%;
	text-align: center;
	margin: 0 0 25px;
}
.yokohama .cruisingCourse .viewPoint li .photo {
	position: relative;
	margin: 0 0 6px;
}
.yokohama .cruisingCourse .viewPoint li .photo img {
	border-radius: 8px;
}
.yokohama .cruisingCourse .viewPoint li .photo .num {
	position: absolute;
	display: inline-block;
	width: 22px;
	height: 22px;
	line-height: 22px;
	font-size: 1.4rem;
	font-family: Helvetica, Arial, sans-serif;
	font-weight: bold;
	top: 5px;
	left: 5px;
	color: #fff;
	background-color: #0070b2;
	border-radius: 50%;
}
.yokohama .cruisingCourse .viewPoint li .photo small {
	position: absolute;
	font-size: 1rem;
	line-height: 1.2;
	text-align: right;
	bottom: 5px;
	right: 5px;
	color: #fff;
}
.yokohama .cruisingCourse .viewPoint li p.caption {
	font-size: 1.4rem;
	line-height: 1.3;
	margin: 4px 0 0;
}
/*---------- 文化の日プラン ----------*/
.yokohama .novemver3 {
	padding: 70px 0;
	margin: 0 0 70px;
}
.yokohama .novemver3 .catch {
	font-size: 2.5rem;
	line-height: 1.4;
	margin: 0 0 20px;
}
.yokohama .novemver3 .catch span {
	letter-spacing: -0.1em;
}
.yokohama .novemver3 .catch + p.txt {
	margin: 0 0 60px;
}
.yokohama .novemver3 .date {
	text-align: center;
	font-size: 2.2rem;
	border-top: solid 1px rgba(0, 112, 178, 0.5);
	border-bottom: solid 1px rgba(0, 112, 178, 0.5);
	margin: 0 0 30px;
}
.yokohama .novemver3 .planWrap {
	margin: 0 0 30px;
}
.yokohama .novemver3 .yokohamaPlan {
	padding: 16px 18px;
	margin: 20px 0 0;
	background-color: #fff;
	border: solid 1px #d8d8d8;
	border-radius: 8px;
}
.yokohama .novemver3 .yokohamaPlan .planName {
	font-size: 2.5rem;
	margin: 0 0 15px;
}
.yokohama .novemver3 .yokohamaPlan .planDetail {
	margin: 0 0 20px;
}
.yokohama .novemver3 .yokohamaPlan .menuTitle {
	font-size: 2rem;
	border-bottom: solid 1px rgba(0, 112, 178, 0.5);
	margin: 0 0 15px;
}
.yokohama .novemver3 .yokohamaPlan .menu p {
	font-size: 1.4rem;
}
.yokohama .novemver3 .yokohamaPlan .menuList {
	margin: 0 0 1em;
}
.yokohama .novemver3 .yokohamaPlan .menuList li {
	font-size: 1.4rem;
	text-indent: -1em;
	padding-left: 1em;
}
.yokohama .novemver3 p.access a {
	color: #0070b2;
	text-decoration: underline;
}
.yokohama .novemver3 p.access a:hover {
	text-decoration: none;
}
.yokohama .novemver3 .info li {
	font-size: 1.4rem;
	text-indent: -0.5em;
	padding-left: 0.5em;
	margin: 5px 0 30px;
}
.yokohama .novemver3 .fee li {
	font-size: 1.4rem;
	text-indent: -0.5em;
	padding-left: 0.5em;
}
.yokohama .novemver3 .fee li li {
	font-style: italic;
	text-indent: -1em;
	padding-left: 1em;
}

/* タブレット〜PC用
------------------------------------------------------------*/
@media screen and (min-width:770px) {
	/*---------- キャッチ ----------*/
	.yokohama .kvWrap .pageTitle {
		font-size: 2.8rem;
	}
	/*---------- クルージングコース ----------*/
	.yokohama .cruisingCourse .secTitle {
		font-size: 3.2rem;
	}
	.yokohama .cruisingCourse .mapWrap p.map {
		width: 68.5%;
	}
	.yokohama .cruisingCourse .mapWrap .txtWrap {
		width: 29%;
	}
	.yokohama .cruisingCourse .mapWrap p.note {
		font-size: 1.5rem;
	}
	/*---------- ビューポイント ----------*/
	.yokohama .cruisingCourse .viewPoint li {
		width: 30%;
	}
	/*---------- 文化の日プラン ----------*/
	.yokohama .novemver3 .yokohamaPlan {
		width: 47.5%;
		margin: 0;
	}
}

/* PC用
------------------------------------------------------------*/
@media screen and (min-width:960px) {
	/*---------- キャッチ ----------*/
	.yokohama .kvWrap .pageTitle {
		font-size: 3.5rem;
	}
	/*---------- 導入部分 ----------*/
	.yokohama .introWrap .txtWrap {
		padding: 45px 8.5%;
	}
	/*---------- クルージングコース ----------*/
	.yokohama .cruisingCourse {
		max-width: 1300px;
		margin: 0 auto;
		padding-bottom: 70px;
	}
	.yokohama .cruisingCourse .secTitle {
		font-size: 4.2rem;
		text-align: left;
		margin: 0 0 35px;
	}
	.yokohama .cruisingCourse .mapWrap {
		margin: 0 0 120px;
	}
	.yokohama .cruisingCourse .mapWrap p.map {
		margin: 0;
	}
	.yokohama .cruisingCourse .mapWrap p.tokyo,
	.yokohama .cruisingCourse .mapWrap p.keihin {
		font-size: 1.9rem;
		padding-left: 85px;
	}
	.yokohama .cruisingCourse .mapWrap p.keihin {
		margin: 0 0 28px;
	}
	.yokohama .cruisingCourse .mapWrap p.tokyo::before,
	.yokohama .cruisingCourse .mapWrap p.keihin::before {
		width: 70px;
		height: 6px;
	}
	.yokohama .cruisingCourse .mapWrap p.note {
		font-size: 1.7rem;
	}
	/*---------- ビューポイント ----------*/
	.yokohama .cruisingCourse .viewPoint li {
		margin: 0 0 70px;
	}
	.yokohama .cruisingCourse .viewPoint li .photo .num {
		width: 34px;
		height: 34px;
		line-height: 34px;
		font-size: 2rem;
		top: 14px;
		left: 14px;
	}
	.yokohama .cruisingCourse .viewPoint li p.caption {
		font-size: 1.7rem;
		margin: 8px 0 0;
	}	
	/*---------- 文化の日プラン ----------*/
	.yokohama .novemver3 {
	padding: 140px 0;
	margin: 0 0 140px;
	}
	.yokohama .novemver3 .catch {
		font-size: 4rem;
		line-height: 1.3;
		text-align: center;
		margin: 0 0 20px;
	}
	.yokohama .novemver3 .catch + p.txt {
		text-align: center;
	}
	.yokohama .novemver3 .date {
		font-size: 3.2rem;
		margin: 0 0 50px;
	}
	.yokohama .novemver3 .planWrap {
		margin: 0 0 50px;
	}
	.yokohama .novemver3 .yokohamaPlan {
		padding: 25px 30px;
	}
	.yokohama .novemver3 .yokohamaPlan .planName {
		font-size: 4rem;
		margin: 0 0 15px;
	}
	.yokohama .novemver3 .yokohamaPlan .planDetail {
		font-size: 1.9rem;
		margin: 0 0 30px;
	}
	.yokohama .novemver3 .yokohamaPlan .menuTitle {
		font-size: 2.6rem;
	}
	.yokohama .novemver3 .yokohamaPlan .menu p,
	.yokohama .novemver3 .yokohamaPlan .menuList li,
	.yokohama .novemver3 .info li,
	.yokohama .novemver3 .fee li {
		font-size: 1.5rem;
	}
}

@media screen and (min-width:1440px) {
	/*---------- キャッチ ----------*/
	.yokohama .kvWrap .pageTitle {
		font-size: 3.9rem;
	}
}

/**************************************************************
 3) プラン
**************************************************************/
/*---------- キービジュアル ----------*/
.lunchCruise .kvWrap .kv {
	background-image: url(../images/plan/kv_lunchCruise.jpg);
}
.afternoonCruise .kvWrap .kv {
	background-image: url(../images/plan/kv_afternoonCruise.jpg);
}
.dinnerCruise .kvWrap .kv {
	background-image: url(../images/plan/kv_dinnerCruise.jpg);
}
.nightCruise .kvWrap .kv {
	background-image: url(../images/plan/kv_nightCruise.jpg);
}
.lunchSet .kvWrap .kv {
	background-image: url(../images/plan/kv_lunchSet.jpg);
}
.dinnerSet .kvWrap .kv {
	background-image: url(../images/plan/kv_dinnerSet.jpg);
}
.clubhouseLunch .kvWrap .kv {
	background-image: url(../images/plan/kv_clubhouseLunch.jpg);
}
.clubhouseDinner .kvWrap .kv {
	background-image: url(../images/plan/kv_clubhouseDinner.jpg);
}
/*---------- タイトル ----------*/
.plan .kvWrap .pageTitle {
	font-size: 3.2rem;
}
.plan .kvWrap .pageTitle .pr {
	padding-right: 0.1em;
}
.plan .kvWrap .pageTitle small {
	display: block;
	font-size: 0.5em;
	margin: 6px 0;
}
/*---------- リード ----------*/
.plan .introWrap .txtWrap {
	padding: 0 20px 40px;
}
.plan .introWrap .lead {
	font-size: 2.3rem;
	line-height: 1.4;
	font-family: 'EB Garamond', 'Times New Roman', Times, serif;
	color: #111d39;
}
.plan .introWrap .lead br {
	display: none;
}
/*---------- 2つ目の写真 ----------*/
.lunchCruise .introWrap .subKv {
	background-image: url(../images/plan/subKv_lunchCruise.jpg);
}
.afternoonCruise .introWrap .subKv {
	background-image: url(../images/plan/subKv_afternoonCruise.jpg);
}
.dinnerCruise .introWrap .subKv {
	background-image: url(../images/plan/subKv_dinnerCruise.jpg);
}
.nightCruise .introWrap .subKv {
	background-image: url(../images/plan/subKv_nightCruise.jpg);
}
.lunchSet .introWrap .subKv {
	background-image: url(../images/plan/subKv_lunchSet.jpg);
}
.dinnerSet .introWrap .subKv {
	background-image: url(../images/plan/subKv_dinnerSet.jpg);
	background-position: left center;
}
.clubhouseLunch .introWrap .subKv {
	background-image: url(../images/plan/subKv_clubhouseLunch.jpg);
}
.clubhouseDinner .introWrap .subKv {
	background-image: url(../images/plan/subKv_clubhouseDinner.jpg);
}
/*---------- プランの詳細 ----------*/
.plan .planDetail {
	padding-top: 65px;
	padding-bottom: 70px;
}
.plan .planDetail .secTitle {
	font-size: 3.2rem;
	margin: 0 0 35px;
}
.plan .planDetail .detailWrap {
	padding-bottom: 62px;
}
/* 料金 */
.plan .planDetail .priceWrap {
	padding: 0 0 20px;
}
.plan .planDetail .priceWrap .price,
.plan .planDetail .priceWrap .children {
	font-size: 2.2rem;
	line-height: 1.18;
	font-weight: 400;
	padding: 21px 12px;
	margin: 0 0 8px;
	background-color: #fff;
	border: #e8e8eb solid 1px;
	border-radius: 8px;
}
.plan .planDetail .priceWrap .price dt {
	display: inline-block;
	width: 71%;
	font-weight: 400;
	vertical-align: middle;
}
.plan .planDetail .priceWrap .price dd {
	display: inline-block;
	width: 29%;
	text-align: right;
	vertical-align: middle;
}
.plan .planDetail .priceWrap .price dd small {
	font-size: 0.64em;
}
.plan .planDetail .txtWrap .priceNote {
	margin: 0 0 40px;
}
.plan .planDetail .txtWrap .day-time {
	font-size: 2.2rem;
	line-height: 1.5;
	font-family: 'EB Garamond', 'Times New Roman', Times, serif;
	color: #111d39;
}
.plan .planDetail .txtWrap .day-time li.mbtm {
	margin-bottom: 1.2em;
}
/* クルージングコース */
.plan .planDetail .txtWrap .course {
	display: inline-block;
	font-size: 2.2rem;
	font-family: 'EB Garamond', 'Times New Roman', Times, serif;
	color: #111d39;
	margin: 40px 0 7px;
}
.plan .planDetail .txtWrap .course span {
	display: inline-block;
	width: 34px;
	font-size: 2.4rem;
	line-height: 34px;
	font-family: "Open Sans", Helvetica, Arial, sans-serif;
	font-weight: bold;
	font-weight: 600;
	text-align: center;
	margin: 0 7px;
	vertical-align: middle;
}
.plan .planDetail .txtWrap .course span.a {
	color: #000;
	background-color: #ff0;
}
.plan .planDetail .txtWrap .course span.b {
	color: #fff;
	background-color: #0f7735;
}
.plan .planDetail .txtWrap .course span.c {
	color: #fff;
	background-color: #bd385d;
}
.plan .planDetail .txtWrap .courseNote {
	margin: 0 0 15px;
}
.plan .planDetail .txtWrap .btn {
	width: 170px;
	line-height: 50px;
}
.plan .planDetail .txtWrap .btn a {
	font-size: 1.4rem;
	padding-left: 15px;
}
.plan .planDetail .txtWrap .btn a::before {
	position: absolute;
	content: "";
	width: 13px;
	height: 13px;
	background: url(../images/icon_route.png) no-repeat center/100% auto;
	left: 12px;
	top: 50%;
	transform: translateY(-50%);
}
/*---------- 予約の注意事項 ----------*/
.plan .planDetail .reservation {
	background-color: #fff;
	padding: 30px 20px;
	border-radius: 30px;
}
.plan .planDetail .reservation .reserveTitle {
	font-size: 2.2rem;
	line-height: 1.18;
	font-family: 'EB Garamond', 'Times New Roman', Times, serif;
	color: #111d39;
	margin: 0 0 25px;
}
.plan .planDetail .reservation p.txt {
	margin: 0 0 1.6em;
}
.plan .planDetail .reservation .child li {
	font-style: italic;
	text-indent: -1em;
	padding-left: 1em;
}

/* 小さいスマホ用
------------------------------------------------------------*/
@media screen and (max-width:355px) {
	/* 料金 */
	.plan .planDetail .priceWrap .price,
	.plan .planDetail .priceWrap .children {
		font-size: 1.9rem;
	}
}

/* タブレット〜PC用
------------------------------------------------------------*/
@media screen and (min-width:770px) {
	/*---------- タイトル ----------*/
	.plan .kvWrap .pageTitle {
		font-size: 4rem;
	}
	/*---------- 導入----------*/
	.plan .introWrap {
		padding: 0;
	}
	.plan .introWrap .subKv {
		border-radius: 0 30px 0 0;
	}
	/*---------- プランの詳細 ----------*/
	.plan .planDetail {
		padding-top: 80px;
		padding-bottom: 90px;
	}
	.plan .planDetail .secTitle {
		font-size: 4rem;
	}
	.plan .planDetail .detailWrap {
		padding-bottom: 90px;
	}
	/* 料金 */
	.plan .planDetail .priceWrap {
		width: 48%;
		max-width: 570px;
		padding: 0;
	}
	.plan .planDetail .priceWrap .price,
	.plan .planDetail .priceWrap .children {
		padding: 23px 12px;
	}
	.plan .planDetail .txtWrap {
		width: 48%;
		max-width: 570px;
	}
	/*---------- 予約の注意事項 ----------*/
	.plan .planDetail .reservation {
		padding: 40px;
		border-radius: 40px;
	}
	.plan .planDetail .reservation .reserveTitle {
		font-size: 2.3rem;
		margin: 0 0 28px;
	}
}

/* PC用
------------------------------------------------------------*/
@media screen and (min-width:960px) {
	/*---------- タイトル ----------*/
	.plan .kvWrap {
		padding: 0;
	}
	.plan .kvWrap .pageTitle {
		font-size: 5rem;
	}
	.plan .kvWrap .pageTitle small {
		font-weight: 400;
		margin: 16px 0 8px;
	}
	/*---------- リード ----------*/
	.plan .introWrap {
		-webkit-align-items: center;
    	align-items: center;
	}
	.plan .introWrap .txtWrap {
		padding: 0 8.5%;
	}
	.plan .introWrap .lead {
		font-size: 2.8rem;
	}
	.plan .introWrap .lead br {
		display: inline;
	}
	/*---------- 2つ目の写真 ----------*/
	.plan .introWrap .subKv {
		height: 450px;
	}

	/*---------- プランの詳細 ----------*/
	.plan .planDetail {
		padding-top: 140px;
		padding-bottom: 150px;
	}
	.plan .planDetail .inner {
		max-width: 1200px;
		margin: 0 auto;
	}
	.plan .planDetail .secTitle {
		font-size: 5rem;
		text-align: left;
		margin: 0 0 50px;
	}
	.plan .planDetail .detailWrap {
		padding-bottom: 135px;
	}
	/* 料金 */
	.plan .planDetail .priceWrap .price,
	.plan .planDetail .priceWrap .children {
		font-size: 2.8rem;
		padding: 26px 5%;
		margin: 0 0 15px;
	}
	.plan .planDetail .txtWrap .priceNote {
		margin: 0 0 45px;
	}
	.plan .planDetail .txtWrap .day-time {
		font-size: 2.8rem;
	}
	/* クルージングコース */
	.plan .planDetail .txtWrap .course {
		font-size: 2.8rem;
		margin: 45px 0 7px;
	}
	.plan .planDetail .txtWrap .course span {
		width: 40px;
		font-size: 2.8rem;
		line-height: 40px;
	}
	.plan .planDetail .txtWrap .courseNote {
		margin: 0 0 20px;
	}
	.plan .planDetail .txtWrap .btn {
		width: 220px;
		line-height: 60px;
	}
	.plan .planDetail .txtWrap .btn a {
		font-size: 1.7rem;
		padding-left: 20px;
	}
	.plan .planDetail .txtWrap .btn a::before {
		width: 16px;
		height: 16px;
		left: 18px;
	}
	/*---------- 予約の注意事項 ----------*/
	.plan .planDetail .reservation {
		padding: 72px 80px;
		border-radius: 35px;
	}
	.plan .planDetail .reservation .reserveTitle {
		font-size: 3.6rem;
	}
}