/**************************************************************
 /css/top.css
****************************************************************
 1) header
 2) slider
 3) section
 4) yokohama
 5) welcome
 6) cruise, clubhouse
 7) plan
 8) cuisine
 9) access
 10) contact
 11) ファーストビューのアニメーション
 12) スクロールアニメーション
------------------------------------------------------------*/



/*************************************************************
 1) header
**************************************************************/
/*---------- ロゴ ----------*/
#header.topPage .logoWrap {
	background-color: transparent;
	transition:all 0.4s linear;
}
#header.topPage .logoWrap .hdLogo {
	display: none;
}

/* スクロールしたら */
#header.topPage.HeightMin .logoWrap {
	background-color:#fff;
	z-index: 2;
}
#header.topPage.HeightMin .logoWrap .hdLogo {
	display: block;
}

/*---------- グローバルナビゲーション ----------*/
@media screen and (max-width:1199px) {	
	#header.topPage .openbtn span {
		background-color: #fff;
		transition:all 0.4s linear;
	}
	#header.topPage .openbtn.active span:nth-of-type(1),
	#header.topPage  .openbtn.active span:nth-of-type(3) {
    	background-color: #0070b2;
	}
	/* スクロールしたら */
	#header.topPage.HeightMin .openbtn span {
		background-color: #0070b2;
	}
}

@media screen and (min-width:1200px) {
	#header.topPage #gNav ul.globalNav li a {
		color: #fff;
		text-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
	}
	#header.topPage #gNav ul.globalNav li.jpNav a {
    	border-color: #fff;
	}
	#header.topPage #gNav ul.globalNav li.jpNav a:hover {
		background-color: #0070b2;
	}
	/* スクロールしたら */
	#header.topPage.HeightMin #gNav ul.globalNav li a {
		color: #111d39;
		text-shadow: none;
	}
	#header.topPage.HeightMin #gNav ul.globalNav li.jpNav a {
    	border-color: #111d39;
	}
	#header.topPage.HeightMin #gNav ul.globalNav li.jpNav a:hover {
		background-color: #d9eaf3;
	}
}

/*************************************************************
 2) slider
**************************************************************/
.sliderWrap {
	position: relative;
	overflow: hidden;
}
/*---------- ロゴ ----------*/
.innerLogo {
	position: absolute;
	width: 150px;
	height: 106px;
	top: 30px;
	left:  8%;
	background: url(../images/logo2.png) no-repeat;
	background-size: 100% auto;
	overflow: hidden;
	text-indent: 100%;
	white-space: nowrap;
	z-index: 2;
}
/*---------- スライダー ----------*/
.slider {
    position:relative;
	z-index: 1;
  	height: 100vh;
	height: 100svh;
	height: 100dvh;
	color: #fff;
}
.slider .slider-item01 span {
    background-image: url(../images/index/slider01-sp.jpg);
}
.slider .slider-item02 span {
    background-image: url(../images/index/slider02-sp.jpg);
}
.slider .slider-item03 span {
    background-image: url(../images/index/slider03-sp.jpg);
}
.slider .slider-item04 span {
    background-image: url(../images/index/slider04-sp.jpg);
}
.slider .slider-item05 span {
    background-image: url(../images/index/slider05-sp.jpg);
}
.slider .slider-item {
	position:relative;
    width: 100%;
    height:100vh;
	height: 100svh;
	height: 100dvh;
}
.slider .slider-item span {
	display: block;
    width: 100%;
    height:100%;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}
/*---------- ドットナビゲーションの設定 ----------*/
.slider .slick-dots {
	position: relative;
	text-align: center;	
	margin: -70px 0 0;/*ドットの位置*/
	z-index: 3;
}
.slider .slick-dots li {
    display:inline-block;
	margin: 0 8px;
}
.slider .slick-dots button {
    color: transparent;
    outline: none;
    width: 10px;/*ドットボタンのサイズ*/
    height: 10px;/*ドットボタンのサイズ*/
    display: block;
    border-radius: 50%;
    background:	#aeaeae;/*ドットボタンの色*/
}
.slider .slick-dots .slick-active button{
    background: #0070b2;/*ドットボタンの現在地表示の色*/
}
/*---------- スライダー内のテキスト ----------*/
.slider-item .innerWrap {
	position: absolute;
	width: 100%;
	overflow: hidden;
	top: 50%;
	transform: translateY(-50%);
	text-align: center;
}
.slider-item .innerWrap h2 {
	font-size: 4.5rem;
	line-height: 1.08;
	text-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
}
.slider-item03 .innerWrap h2 {
	color: #111d39;
	text-shadow: none;
}
/*---------- ズームアニメーション ----------*/
.add-anime span {
    animation: zoom-anime 10s linear 0s normal both;
}
@keyframes zoom-anime {
    0% {
        transform: scale(1.3);
    }
    100% {
        transform: scale(1);
    }
}

/* タブレット用
------------------------------------------------------------*/
@media screen and (min-width:600px) {
	/*---------- ロゴ ----------*/
	.innerLogo {
		width: 170px;
		height: 120px;
		top: 50px;
		left:  50px;	
	}
	/*---------- スライダー内のテキスト ----------*/
	.slider-item .innerWrap h2 {
		font-size: 6.5rem;
	}
	/*---------- ドットナビゲーションの設定 ----------*/
	.slider .slick-dots {
		margin:-50px 0 0 0;/*ドットの位置*/
	}
}

/* タブレット〜PC用
------------------------------------------------------------*/
@media screen and (min-width:770px) {
	/*---------- ロゴ ----------*/
	.innerLogo {
		width: 200px;
		height: 141px;
	}
	/*---------- スライダー ----------*/
	.slider .slider-item01 span {
    	background-image: url(../images/index/slider01-pc.jpg);
	}
	.slider .slider-item02 span {
    	background-image: url(../images/index/slider02-pc.jpg);
	}
	.slider .slider-item03 span {
    	background-image: url(../images/index/slider03-pc.jpg);
	}
	.slider .slider-item04 span {
    	background-image: url(../images/index/slider04-pc.jpg);
	}
	.slider .slider-item05 span {
    	background-image: url(../images/index/slider05-pc.jpg);
	}
	/*---------- スライダー内のテキスト ----------*/
	.slider-item .innerWrap h2 {
		font-size: 8rem;
	}
	.slider-item04 .innerWrap h2 {
		color: #111d39;
		text-shadow: none;
	}
}

/* PC用
------------------------------------------------------------*/
@media screen and (min-width:1200px) {
	/*---------- スライダーの高さと位置 ----------*/
	.sliderWrap {
		top: -68px;
		margin-bottom: -68px;
	}
}

/*************************************************************
 3) section
**************************************************************/
.home section {
	border-bottom: solid 1px rgba(0,0,0,0.2);
	padding-bottom: 80px;
}
.home section .title {
	font-size: 3.4rem;
	line-height: 1.08;
	font-family: 'EB Garamond', 'Times New Roman', Times, serif;
	font-weight: 500;
	text-align: center;
	color: #111d39;
}
.home section#yokohama .title {
	font-size: 3.2rem;
}
.home section .kv {
	width: 88%;
	height: 250px;
	margin: 0 0 54px auto;
	border-radius: 0 0 0 35px;
}
.home #cruise .kv {
	background-image: url(../images/index/cruise.jpg);
}
.home #clubhouse .kv {
	background-image: url(../images/index/clubhouse.jpg);
}
.home #cuisine .kv {
	background-image: url(../images/index/cuisine.jpg);
}
.home #service .kv {
	background-image: url(../images/index/service.jpg);
}
.home section .overview .title {
	margin: 0 0 42px;
}
.home section .overview .lead {
	font-size: 2.3rem;
	line-height: 1.4;
	font-family: 'EB Garamond', 'Times New Roman', Times, serif;
	color: #111d39;
	margin: 0 0 25px;
}

/* タブレット用
------------------------------------------------------------*/
@media screen and (min-width:600px) {
	.home section .kv {
		height: 350px;
	}
}

/* タブレット〜PC用
------------------------------------------------------------*/
@media screen and (min-width:770px) {
	.home section {
		padding-bottom: 110px;
	}
	.home section .kv {
		width: 48%;
		height: auto;
		margin: 0;
		border-radius: 0 0 0 40px;
	}
	.home section .title {
		font-size: 4rem;
	}
	.home section .overview {
    	-webkit-box-direction: reverse;
    	-webkit-flex-direction: row-reverse;
    	flex-direction: row-reverse;
	}
	.home section .overview .txtWrap {
    	width: 52%;
		padding: 85px 5% 0 6%;
	}
	.home section .overview .title {
    	text-align: left;
		margin: 0 0 65px;
	}
}

/* PC用
------------------------------------------------------------*/
@media screen and (min-width:960px) {
	.home section {
		padding-bottom: 150px;
	}
	.home section .title {
		font-size: 5rem;
	}
	.home section .overview .txtWrap {
		padding: 140px 6% 0 7%;
	}
	.home section .overview .title {
		margin: 0 0 80px;
	}
	.home section .overview .lead {
		font-size: 2.8rem;
		margin: 0 0 30px;
	}
	
}

/*************************************************************
 4) yokohama
**************************************************************/
.home #yokohama {
	padding-top: 40px;
	padding-bottom: 40px;
}
.home #yokohama .imgWrap {
	height: 170px;
	margin: 0 0 32px;
}
.home #yokohama .imgWrap span {
	width: 49.4%;
	height: 170px;
	background-image: url(../images/index/yokohama.jpg);
	border-radius: 0 30px 30px 0;
}
.home #yokohama .imgWrap span:first-child {
	background-image: url(../images/index/shinagawa.jpg);
	border-radius: 30px 0 0 30px;
}
.home #yokohama .txtWrap {
	text-align: center;
}
.home #yokohama .txtWrap .route {
	position: relative;
	font-size: 2.7rem;
	line-height: 1;
	margin: 0 0 14px;
}
.home #yokohama .txtWrap .route::after {
	position: absolute;
	content: "⇄";
	font-size: 1.8rem;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%) scale(1.4, 1) rotate(90deg);
}
.home #yokohama .txtWrap .route span {
	display: block;
}
.home #yokohama .txtWrap .route span:first-child {
	padding: 0 0 24px;
}
.home #yokohama .txtWrap p.txt {
	font-size: 1.9rem;
	line-height: 1.3;
	margin: 0 0 22px;
}
.home #yokohama .txtWrap p.btn {
	width: 240px;
	margin: 0 auto;
}
.home #yokohama .txtWrap p.btn a::after {
	position: absolute;
	content: "";
	width: 12px;
	height: 12px;
	background: url(../images/arrow1.png) no-repeat;
	background-size: 100% auto;
	top: 50%;
	right: 12px;
	transform: translateY(-50%);
}

/* タブレット用
------------------------------------------------------------*/
@media screen and (min-width:600px) {
	.home #yokohama .txtWrap .route::after {
		transform: translate(-50%, -50%) scale(1, 1.4) rotate(0);
	}
	.home #yokohama .txtWrap .route span {
		display: inline-block;
	}
	.home #yokohama .txtWrap .route span:first-child {
		padding: 0 50px 0 0;
	}
	.home #yokohama .txtWrap p.btn {
		width: 280px;
	}
}

/* タブレット〜PC用
------------------------------------------------------------*/
@media screen and (min-width:770px) {
	.home #yokohama {
		padding-top: 50px;
		padding-bottom: 50px;
	}
	.home #yokohama .imgWrap {
		height: 230px;
	}
	.home #yokohama .imgWrap span {
		height: 230px;
		border-radius: 0 40px 40px 0;
	}
	.home #yokohama .imgWrap span:first-child {
		border-radius: 40px 0 0 40px;
	}
	.home #yokohama .txtWrap .route {
		font-size: 3.4rem;
		margin: 0 0 16px;
	}
	.home #yokohama .txtWrap .route::after {
		font-size: 2rem;
	}
	.home #yokohama .txtWrap p.txt {
		font-size: 2.2rem;
		margin: 0 0 25px;
	}
}

/* PC用
------------------------------------------------------------*/
@media screen and (min-width:960px) {
	.home #yokohama {
		display: -webkit-box;
		display: flex;
		-webkit-box-pack: justify;
    	-webkit-justify-content: space-between;
    	justify-content: space-between;
		-webkit-align-items: center;
    	align-items: center;
	}
	.home #yokohama .imgWrap {
		width: 100%;
		margin: 0 6% 0 0;
	}
	.home #yokohama .txtWrap {
		text-align: left;
	}
	.home #yokohama .txtWrap .route {
		white-space: nowrap;
	}
	.home #yokohama .txtWrap p.btn {
		margin: 0;
	}
}

/*************************************************************
 5) welcome
**************************************************************/
.home #welcome {
	padding-top: 68px;
}
.home #welcome .title {
	margin: 0 0 28px;
}
.home #welcome .bgImg {
	height: 220px;
	background-image: url(../images/index/welcome.jpg);
	margin: 0 0 30px;
}
.home #welcome .txtWrap p.txt {
	margin: 0 0 1.6em;
}
.home #welcome .txtWrap li {
	text-indent: -1.05em;
	padding-left: 1.05em;
}

/* タブレット用
------------------------------------------------------------*/
@media screen and (min-width:600px) {
	.home #welcome .bgImg {
		height: 300px;
	}
}

/* タブレット〜PC用
------------------------------------------------------------*/
@media screen and (min-width:770px) {
	.home #welcome {
		padding-top: 150px;
	}
	.home #welcome .title {
		margin: 0 0 60px;
	}
	.home #welcome .bgImg {
		height: 400px;
		margin: 0 50px 60px;
		border-radius: 40px;
	}
	.home #welcome .txtWrap {
		max-width: 900px;
		margin: 0 auto;
	}
}

/*************************************************************
 6) cruise, clubhouse
**************************************************************/
.home #cruise .overview,
.home #clubhouse .overview {
	padding-bottom: 60px;
}
.home .blockTitle {
	font-size: 2.8rem;
	line-height: 1.1;
	text-align: center;
	color: #111d39;
	margin: 0 0 15px;
}
/*---------- クルージングコース ----------*/
.home .cruisingCourse .blockTitle {
	margin: 0 0 20px;
}
.home .cruisingCourse .mapWrap p.map {
	margin: 0 0 20px;
}
.home .cruisingCourse .mapWrap dl {
	line-height: 24px;
	overflow: auto;
	margin: 0 0 8px;
}
.home .cruisingCourse .mapWrap dt {
	float: left;
	clear: left;
	font-size: 1.6rem;
	font-weight: bold;
	font-weight: 600;
	padding: 0 8px;
	margin: 0 10px 13px 0;
}
.home .cruisingCourse .mapWrap .txtWrap dt.couseA {
	color: #000;
	background-color: #ff0;
}
.home .cruisingCourse .mapWrap .txtWrap dt.couseB {
	color: #fff;
	background-color: #0f7735;
}
.home .cruisingCourse .mapWrap .txtWrap dt.couseC {
	color: #fff;
	background-color: #bd385d;
}
.home .cruisingCourse .mapWrap .txtWrap dd {
	font-size: 1.8rem;
	float: left;
	margin: 0 0 13px;
}

/* タブレット〜PC用
------------------------------------------------------------*/
@media screen and (min-width:770px) {
	.home #cruise .overview,
	.home #clubhouse .overview {
		padding-bottom: 100px;
	}
	.home .blockTitle {
		font-size: 3.2rem;
		margin: 0 0 25px;
	}
	/*---------- クルージングコース ----------*/
	.home .cruisingCourse {
		padding-left: 26px;
		padding-right: 40px;
	}
	.home .cruisingCourse .mapWrap p.map {
		max-width: 898px;
		margin: 0;
	}
	.home .cruisingCourse .mapWrap .txtWrap {
		max-width: 250px;
		margin: 0 0 0 5px;
	}
}

/* PC用
------------------------------------------------------------*/
@media screen and (min-width:960px) {
	.home #cruise .overview,
	.home #clubhouse .overview {
		padding-bottom: 135px;
	}
	.home .blockTitle {
		font-size: 4.2rem;
	}
	/*---------- クルージングコース ----------*/
	.home .cruisingCourse .mapWrap .txtWrap {
		max-width: 300px;
	}
	.home .cruisingCourse .txtWrap .mapWrap dl {
		line-height: 26px;
		margin: 0 0 15px;
	}
	.home .cruisingCourse .mapWrap .txtWrap dt {
		font-size: 1.7rem;
		padding: 0 10px;
		margin: 0 15px 15px 0;
	}
	.home .cruisingCourse .mapWrap .txtWrap dd {
		font-size: 1.9rem;
		margin: 0 0 15px;
	}
}

@media screen and (min-width:1200px) {
	.home .blockTitle {
		text-align: left;
	}
	.home .cruisingCourse .blockTitle {
		margin: 0 0 36px 14px;
	}
	.home .cruisingCourse {
		max-width: 1280px;
		margin: 0 auto;
	}
}

/*************************************************************
 7) plan
**************************************************************/
/*---------- カルーセルで1つ表示の時 ----------*/
.carouselWrap {
	width: 302px;
	margin: 0 auto;
}
/*---------- プランボックス ----------*/
.plan {
	margin: 0 0 60px;
}
.plan.restaurant {
	margin: 0;
}
.planBox {
	width: 262px;
	line-height: 1.6;
	background-color: #fff;
	border: solid 1px #d8d8d8;
	border-radius: 8px;
	margin: 10px 20px 0;
}
.planBox a {
	position: relative;
	display: block;
	width: 100%;
	height: 100%;
	text-decoration: none;
}
.planBox a p.planType {
	position: absolute;
	display: inline-block;
	font-size: 1.5rem;
	line-height: 1.75;
	font-family: 'EB Garamond', 'Times New Roman', Times, serif;
	padding: 0 12px;
	color: #fff;
	background-color: #0070b2;
	border-radius: 3px;
	top: -10px;
	right: 10px;
}
.planBox a p.planType.clubhouse {
	background-color: #a9274c;
}
.planBox a p.planType.set {
	background-color: #006837;
}
.planBox a img  {
	width: 100%;
	border-radius: 8px 8px 0 0;
}
.planBox a .txtWrap {
	padding: 16px 18px;
}
.planBox a .planName {
	font-size: 2.6rem;
	font-family: 'EB Garamond', 'Times New Roman', Times, serif;
	color: #111d39;
	margin: 0 0 6px;
}
.planBox a p.txt {
	font-size: 1.5rem;
}
/*---------- ドットナビゲーションの設定 ----------*/
.carouselWrap .slick-dots {
    text-align:	center;
	margin: 12px 0 0 0;
	height: 10px;
}
.carouselWrap .slick-dots li {
    display:	inline-block;
	margin:	0 6px;
}

.carouselWrap .slick-dots button {
    color: transparent;
    outline: none;
    width: 10px;/*ドットボタンのサイズ*/
    height: 10px;/*ドットボタンのサイズ*/
    display: block;
    border-radius: 50%;
    background:	#aeaeae;/*ドットボタンの色*/
}

.carouselWrap .slick-dots .slick-active button{
    background: #0070b2;/*ドットボタンの現在地表示の色*/
}

@media screen and (min-width:630px) {
	/*---------- カルーセルで2つ表示の時 ----------*/
	.carouselWrap {
		width: 604px;
	}
	/* ボックスの高さを揃える */
	.carouselWrap .slick-track {
  		display: flex;
	}
	.carouselWrap .slick-slide {
  		height: auto !important;
	}
}

@media screen and (min-width:770px) {
	.plan {
		margin: 0 0 100px;
	}
	#cruise .plan,
	#clubhouse .planWrap {
		padding: 0 40px;
	}
	#cruise .carouselWrap {
		-webkit-flex-wrap: wrap;
    	flex-wrap: wrap;
	}
	.carouselWrap {
		width: 624px;
		margin: 0 auto;
	}
	/*---------- プランボックス ----------*/
	.planBox {
		margin: 10px 25px 0;
	}
	.planBox a:hover {
		opacity: 0.7;
	}
	#cruise .carouselWrap .planBox:first-child,
	#cruise .carouselWrap .planBox:nth-child(2) {
		margin: 10px 25px 50px;
	}
}

@media screen and (min-width:1200px) {
	.plan {
		margin: 0;
	}
	#cruise .plan,
	#clubhouse .planWrap {
		width: auto;
		max-width: 1300px;
		padding: 0 50px;
		margin: 0 auto 130px;
	}
	#clubhouse .planWrap {
		display: -webkit-box;
		display: flex;
		-webkit-box-pack: justify;
    	-webkit-justify-content: space-between;
    	justify-content: space-between;
		margin: 0 auto
	}
	#clubhouse .planWrap .plan {
		width: 47.9%;
	}
	#clubhouse .planWrap .plan .blockTitle {
		font-size: 3.4rem;
	}
	.carouselWrap {
		width: 100%;
	}
	#cruise .carouselWrap {
		-webkit-flex-wrap: nowrap;
    	flex-wrap: nowrap;
	}
	.planBox {
		margin: 10px 0 0 !important;
		
	}
	#clubhouse .planWrap .plan.restaurant .planBox p.txt {
		margin-bottom: 3.2em;
	}
}

@media screen and (min-width:1200px) and (max-width:1250px) {
	#clubhouse .planWrap .plan {
		width: 48.9%;
	}
}

/*************************************************************
 8) cuisine
**************************************************************/
.home .chefWrap {
	margin: 60px  20px 0;
	border-radius: 30px;
}  
.home .chefWrap .chef {
	padding: 20px;
	display: -webkit-box;
	display: flex;
    -webkit-align-items: center;
    align-items: center;
} 
.home .chefWrap .chef p.photo {
	max-width: 300px;
	height: 258px;
	background: url(../images/index/chef.jpg) no-repeat center top/cover;
	border-radius: 8px;
	overflow: hidden;
	text-indent: 100%;
	white-space: nowrap;
}
.home .chefWrap .chef figcaption {
	font-size: 1.9rem;
	line-height: 1.4;
	width: 160px;
	margin: 0 0 0 20px;
}
.home .chefWrap .txtWrap {
	padding: 0 20px 20px;
}
.home .chefWrap .txtWrap h3 {
	display: none;
}

@media screen and (max-width:349px) {
	.home .chefWrap .chef p.photo {
		height: 220px;
	}
	.home .chefWrap .chef figcaption {
		font-size: 1.8rem;
		width: 120px;
		margin: 0 0 0 10px;
	}
}

/* タブレット用
------------------------------------------------------------*/
@media screen and (min-width:600px) {
	.home .chefWrap {
		display: -webkit-box;
		display: flex;
	}
	.home .chefWrap .chef {
		display: block;
		width: 39%;
		padding: 0;
	} 
	.home .chefWrap .chef p.photo {
		max-width: 390px;
		height: 100%;
		border-radius: 30px 0 0 30px;
	}
	.home .chefWrap .chef figcaption {
		display: none;
	}
	.home .chefWrap .txtWrap {
		width: 61%;
		padding: 30px;
	}
	.home .chefWrap .txtWrap h3 {
		display: block;
		font-size: 2.2rem;
		line-height: 1.2;
		margin: 0 0 15px;
	}
}

@media screen and (min-width:700px) {
	.home .chefWrap {
		margin: 60px  40px 10px;
	}
}

/* タブレット〜PC用
------------------------------------------------------------*/
@media screen and (min-width:770px) {
	.home .chefWrap {
		margin: 110px  50px 10px;
	}
	.home .chefWrap .txtWrap {
		padding: 50px 10%;
	}
	.home .chefWrap .txtWrap h3 {
		font-size: 2.8rem;
		margin: 0 0 25px;
	}
}

/* PC用
------------------------------------------------------------*/
@media screen and (min-width:1000px) {
	.home .chefWrap {
		width: 1000px;
		margin: 110px  auto 10px;
	}
	.home .chefWrap .txtWrap {
		padding: 80px 10%;
	}
}

/*************************************************************
 9) access
**************************************************************/
.home #access {
	padding: 55px 0 0;
}
.home #access .title {
	margin: 0 0 25px;
}
.home #access .gMap iframe {
	height: 350px;
}

/* タブレット〜PC用
------------------------------------------------------------*/
@media screen and (min-width:770px) {
	.home #access {
		padding: 75px 0 0;
	}
	.home #access .title {
		margin: 0 0 75px;
	}
	.home #access .gMap iframe {
		height: 500px;
	}
}

/*************************************************************
 10) contact
**************************************************************/
.home #contact {
	padding-top: 55px;
	padding-bottom: 60px;
}
.home #contact .title {
	margin: 0 0 15px;
}
.home #contact p.note {
	margin: 0 0 25px;
}
.home #contact .mailForm dt {
	font-size: 2.1rem;
	line-height: 1.15;
	font-family: 'EB Garamond', 'Times New Roman', Times, serif;
	font-weight: 400;
	color: #111d39;
	margin: 0 0 8px;
}
.home #contact .mailForm dd {
	margin: 0 0 18px;
}
.home #contact .mailForm dd:last-of-type {
	margin: 0 0 30px;
}
.home #contact .mailForm dd input,
.home #contact .mailForm dd textarea {
	width: 100%;
	font-size: 1.8rem;
	padding: 10px;
	background-color: #f7f6f3;
	border: #d8d8d8 solid 1px;
	border-radius: 5px;
}
.home #contact .mailForm dd textarea {
	height: 150px;
}
.home #contact p.btn {
	position: relative;
	width: 240px;
	line-height: 56px;
	text-align: center;
	font-size: 1.7rem;
	font-weight: 500;
	letter-spacing: 0.05em;
	background-color: #0070b2; 
	color: #fff;
	border-radius: 28px;
	text-decoration: none;
	margin: 0 auto;
}
.home #contact p.btn::before {
	position: absolute;
	content: "";
	width: 18px;
	height: 15px;
	background: url(../images/icon_contact.png) no-repeat;
	background-size: 100% auto;
	top: 50%;
	left: 20px;
	transform: translateY(-50%);
}
.home #contact p.btn:hover {
	background-color: #111d39; 
	transition: 0.3s linear;
}
.home #contact p.btn input {
	display: block;
	width: 100%;
	height: 100%;
	padding-left: 10px;
}
/* 完了画面 */
.home #contact p.thanks {
	font-size: 1.7rem;
	margin: 2.8em 0 1.5em;
}
.home #contact p.thanks:nth-of-type(2) {
	margin-top: 1.5em;
}
.home #contact p.thanks br.over600 {
	display: none;
}

/* タブレット用
------------------------------------------------------------*/
@media screen and (min-width: 600px) {
	/* 完了画面 */
	.home #contact p.thanks {
		text-align: center;
	}
	.home #contact p.thanks br.over600 {
		display: inline;
	}
}


/* タブレット〜PC用
------------------------------------------------------------*/
@media screen and (min-width: 770px) {
	.home #contact {
		padding-top: 75px;
		padding-bottom: 100px;
	}
	.home #contact .title {
		margin: 0 0 32px;
	}
	.home #contact p.txt {
		text-align: center;
	}
	.home #contact p.note {
		text-align: center;
		margin: 0 0 33px;
	}
	.home #contact .mailForm {
		max-width: 880px;
		margin: 0 auto;
		-webkit-flex-wrap: wrap;
    	flex-wrap: wrap;
	}
	.home #contact .mailForm dt {
		width: 16%;
		padding-right: 10px;
	}
	.home #contact .mailForm dd {
		width: 84%;
		padding-right: 16%;
		margin: 0 0 20px;
	}
	.home #contact .mailForm dd:last-of-type {
		margin: 0 0 40px;
	}
}

/* PC用
------------------------------------------------------------*/
@media screen and (min-width: 960px) {
	.home #contact .mailForm dt {
		font-size: 2.8rem;
	}
	.home #contact .mailForm dd input,
	.home #contact .mailForm dd textarea {
		font-size: 2rem;
		padding: 13px;
	}
	.home #contact .mailForm dd textarea {
		height: 180px;
	}
	.home #contact p.btn {
		width: 280px;
		line-height: 60px;
		font-size: 2rem;
		border-radius: 30px;
	}
	/* 完了画面 */
	.home #contact p.thanks {
		font-size: 2.2rem;
	}
}

/*************************************************************
 11) ファーストビューのアニメーション
**************************************************************/
/* その場で0〜1秒 */
.slider, /* スライダー */
.openbtn, /* ハンバーガー */
#fixed_tab ul /* PC以外のタブ */ {
	animation-name: fadeInAnime0-10;
	animation-duration: 1s;
	animation-fill-mode: forwards;
	opacity:0;
}
@keyframes fadeInAnime0-10 {
  from {
		opacity: 0;
  }
  to {
		opacity: 1;
  }
}

/* 上から1.5秒〜　スライダーのロゴ */
.innerLogo{
	animation-name: fadeDownAnime-innerLogo;
	animation-duration: 1s;
	animation-delay: 2s;
	animation-fill-mode: forwards;
	opacity:0;
}
@keyframes fadeDownAnime-innerLogo {
	from {
		opacity: 0;
		transform: translateY(-8px);
  	}
  	to {
		opacity: 1;
		transform: translateY(0);
  	}
}

/* タブレット〜PC用
------------------------------------------------------------*/
@media screen and (min-width:770px) {
	/* 右から0.3秒〜 右のタブ*/
	#fixed_tab ul {
		animation-name:fadeRightAnime-tab;
		animation-duration:0.6s;
		animation-delay: 0.3s;
		animation-fill-mode:forwards;
		opacity:0;
	}
	@keyframes fadeRightAnime-tab{
  		from {
    		opacity: 0;
			transform: translateX(68px);
		}
		to {
			opacity: 1;
			transform: translateX(0);
		}
	}

	/* 上から2秒〜　スライダーのロゴ */
	.innerLogo{
		animation-name: fadeDownAnime-innerLogo;
		animation-duration: 1s;
		animation-delay: 2s;
		animation-fill-mode: forwards;
		opacity:0;
	}
	@keyframes fadeDownAnime-innerLogo {
		from {
			opacity: 0;
			transform: translateY(-15px);
  		}
  		to {
			opacity: 1;
			transform: translateY(0);
  		}
	}
}

/* PC用
------------------------------------------------------------*/
@media screen and (min-width:1200px) {
	/* 上から0.4秒〜　グローバルナビゲーション */
	.globalNav {
		animation-name: fadeDownAnime-globalNav;
		animation-duration: 0.4s;
		animation-delay: 0.4s;
		animation-fill-mode: forwards;
		opacity:0;
	}
	@keyframes fadeDownAnime-globalNav {
		from {
			opacity: 0;
			transform: translateY(-5px);
		}
		to {
			opacity: 1;
			transform: translateY(0);
		}
	}

	/* 右から0.8秒〜 右のタブ*/
	#fixed_tab ul {
		animation-name:fadeRightAnime-tab;
		animation-duration:0.6s;
		animation-delay: 0.8s;
		animation-fill-mode:forwards;
		opacity:0;
	}
	@keyframes fadeRightAnime-tab{
  		from {
    		opacity: 0;
			transform: translateX(68px);
		}
		to {
			opacity: 1;
			transform: translateX(0);
		}
	}
}

/*************************************************************
12) スクロールアニメーション
**************************************************************/
/*---------- 下から ---------- */
.fadeUp,
.fadeLeft,
.fadeRight {
    animation-name: fadeUpAnime;
    animation-duration: 1s;
    animation-fill-mode: forwards;
    opacity: 0;
}
@keyframes fadeUpAnime{
	from {
    	opacity: 0;
   	 	transform: translateY(50px);
	}
	to {
    	opacity: 1;
    	transform: translateY(0);
	}
}

/* タブレット〜PC用
------------------------------------------------------------*/
@media screen and (min-width:770px) {
	/*---------- 左から ---------- */
	.fadeLeft {
		animation-name: fadeLeftAnime;
		animation-duration: 1s;
		animation-fill-mode:forwards;
		opacity:0;
	}
	@keyframes fadeLeftAnime{
		from {
			opacity: 0;
			transform: translateX(-100px);
		}
		to {
			opacity: 1;
			transform: translateX(0);
		}
	}
	/*---------- 右から ---------- */
	.fadeRight {
		animation-name: fadeRightAnime;
		animation-duration: 1s;
		animation-fill-mode:forwards;
		opacity:0;
	}
	@keyframes fadeRightAnime{
		from {
			opacity: 0;
			transform: translateX(100px);
		}
		to {
			opacity: 1;
			transform: translateX(0);
		}
	}
	/*---------- マップとテキストが横並びのとき ---------- */
	.cruisingCourse .txtWrap {
		animation-delay: 0.4s;
	}
}

@media screen and (min-width:770px) and (max-width:1199px) {
	/*---------- プランが2列のとき ---------- */
	.plan .carouselWrap .planBox:nth-of-type(even) {
		animation-delay: 0.2s;
	}
}

/* PC用
------------------------------------------------------------*/
@media screen and (min-width:1200px) {
	/*---------- プラン4列のとき ---------- */
	.plan .carouselWrap .planBox:nth-of-type(2) {
		animation-delay: 0.2s;
	}
	.plan .carouselWrap .planBox:nth-of-type(3),
	.plan.restaurant .carouselWrap .planBox:first-of-type,
	.plan.restaurant .blockTitle {
		animation-delay: 0.4s;
	}
	.plan .carouselWrap .planBox:nth-of-type(4),
	.plan.restaurant .carouselWrap .planBox:nth-of-type(2) {
		animation-delay: 0.6s;
	}
}