/* Y'S GEAR : virtual_bs.css */

html, 
body { height: auto !important; }

.contentsWidth {
	color: #000;
}
.contentsWidth * { box-sizing: border-box; }
.contentsWidth a,
.contentsWidth a img {
	-webkit-transition: all ease .3s; /* Safari */
	transition: all ease .3s;
}

@media screen and (max-width: 980px) {
	.contentsWidth { padding: 0 !important; }
} /* */


/*==============================================*
 *  [ entranceBox ] 
 *==============================================*/

.entranceBox {
	padding: 40px 20px;
	background: #fff3e1;
	text-align: center;
}

/* [ タイトル・テキスト ] */
.entranceBox h2 { margin-bottom: 20px; }
.entranceBox p { margin-bottom: 20px; }

/* [ 画像 ] */
.entranceBox figure { display: inline-block; }
.entranceBox figure img { margin-bottom: -6%; }

/* [ ボタン ] */
.entranceBox .btn {
	display: block;
	position: relative;
	max-width: 540px;
	margin: 0 auto;
	padding: 10px;
	border: 6px solid #1f1f56;
	border-radius: 10px;
	background: url(../img/icon_in.svg) right 10px center no-repeat #fff799;
	background-size: auto 100%;
	color: #1f1f56;
	font-size: 2.4rem;
	font-weight: bold;
	z-index: 100;
}
.entranceBox a.btn:hover, 
.entranceBox a.btn:active {
	border-color: #1f1f56 !important;
	background-color: #ffff00;
	color: #1f1f56 !important;
}

@media screen and (max-width: 568px) {
	.entranceBox {
		padding: 20px;
		background: #fff3e1;
		text-align: center;
	}
	
	/* [ ボタン ] */
	.entranceBox .btn {
		background-position: right 5px center;
		font-size: 1.4rem;
		text-align: left;
	}
	.entranceBox .btn span { font-size: 2.4rem; }
} /* */


/*==============================================*
 *  [ boothBox ] 
 *==============================================*/

.boothBox { position: relative; }

.boothBox .logo {
	position: absolute;
	width: 72%;
	margin: 2% 14% 0;
	box-shadow: 0 0 15px rgba(0,0,0,.5);
	z-index: 10;
}

/* [ 画像 ] */
.boothBox .booth { width: 100%; }

/* [ リンク ] */
.boothBox li {
	position: absolute;
	z-index: 15;
}
.boothBox li.pt01 { top: 44%; left: 22%; }
.boothBox li.pt02 { bottom: 15%; left: 55.5%; z-index: 30; }
.boothBox li.pt03 { bottom: 33%; left: 67.5%; z-index: 20; }
.boothBox li.pt04 { top: 25%; left: 36%; }
.boothBox li.pt05 { top: 37%; left: 70%; }
.boothBox li a {
	display: block;
	transform: translate(-50%, -50%);
}
.boothBox li span {
	position: absolute;
	width: 120px;
	top: 0;
	left: 50%;
	transform: translate(-50%, -110%);
	background: rgba(255,255,255,.8);
	padding: 5px 0;
	border-radius: 5px;
	font-weight: bold;
	text-align: center;
	color: #E61C61;
	font-size: 1.4rem;
	-webkit-transition: all ease .3s; /* Safari */
	transition: all ease .3s;
}
.boothBox li a:hover span, 
.boothBox li a:active span { color: #4794CF !important; }

.boothText {
	padding: 0 20px 20px;
	background: #313131;
}
.boothText p {
	background: rgba(255,255,255,.8);
	padding: 20px;
	border-radius: 5px;
	text-align: center;
	font-size: 1.8rem;
	font-weight: bold;
	color: #103974;
}
.boothText p span {
	display: inline-block;
}

/* .boothBox .text {
	position: absolute;
	right: 0;
	bottom: 0;
	width: 60%;
	text-align: center;
	padding: 5% 20px;
	color: #103974;
}
.boothBox .text p {
	display: inline-block;
	padding: 10px 20px;
	border-radius: 10px;
	background: rgba(255,255,255,.8);
	font-size: 1.6rem;
	font-weight: bold;
} */

@media screen and (max-width: 568px) {
	/* [ ロゴ ] */
	.boothBox .logo {
		width: 90%;
		margin: 2% 5% 0;
	}

	/* [ リンク ] */
	.boothBox li img { width: 7vw; }
	.boothBox li span {
		top: 100%;
		transform: translate(-50%, -3px);
		padding: 2px 0;
		font-size: 1.2rem;
	}
	.boothBox li span br { display: none; }
	
	/* [ テキスト ] */
	.boothText p {
		padding: 12px 20px;
		font-size: 1.4rem;
	}
} /* */


/*==============================================*
 *  [ modalBox ] 
 *==============================================*/

.modalBox {
	position: relative;
	width: 100% !important;
	max-width: 880px !important;
	margin: 0 auto;
	padding: 40px 20px !important;
	background: #fff;
	color: #000;
	font-size: 1.6rem;
}
.modalBox * { box-sizing: border-box; }
.modalBox a {
	-webkit-transition: all ease .3s; /* Safari */
	transition: all ease .3s;
}

/* [ タイトル ] */
.modalBox h2 {
	margin-bottom: 20px;
	color: #002a70;
	font-size: 2.6rem;
	text-align: center;
}
.modalBox h2 span {
	display: inline-block;
	padding-bottom: 3px;
	background: linear-gradient(transparent 60%, #ffec01 60%);
}

/* [ テキスト ] */
.modalBox .image {
	min-height: 165px;
	padding: 1px 0 1px 200px;
	background-position: left bottom;
	background-repeat: no-repeat;
	text-align: left;
}
#yfr27.modalBox .image { background-image: url(../img/yfr27_image.jpg); }
#garmin1.modalBox .image { background-image: url(../img/garmin1_image.jpg); }
#garmin2.modalBox .image { background-image: url(../img/garmin2_image.jpg); }
#ipilot.modalBox .image { background-image: url(../img/ipilot_image.jpg); }
#seastyle.modalBox .image { background-image: url(../img/seastyle_image.jpg); }
.modalBox .copy {
	margin: 10px 0 20px;
	font-size: 1.8rem;
	font-weight: bold;
	line-height: 1.2;
}
.modalBox .text {
	margin-bottom: 20px;
	font-size: 1.4rem;
	line-height: 1.4;
}

/* [ 動画 ] */
.modalBox .movie {
	position: relative;
	padding-top: 56.25%;
	background: #daeaf5;
	overflow: hidden;
}
.modalBox .movie iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

/* [ リンク ] */
.modalBox .link {
	padding: 20px;
	background: #daeaf5;
	text-align: center;
}
.modalBox .link a {
	display: inline-block;
	padding: 15px 40px 15px 20px;
	border-radius: 10px;
	background: url(../img/icon_arrow.svg) right 20px center no-repeat #4794cf;
	color: #fff;
	font-size: 2rem;
	font-weight: bold;
}
.modalBox .link a:hover,
.modalBox .link a:active { background-color: #163c7b; }
.modalBox ul.link {
	display: flex;
	align-items: center;
	list-style: none;
}
.modalBox ul.link li { width: 50%; }
.modalBox ul.link li + li { margin-left: 20px; }
.modalBox ul.link a { display: block; }

/* [ 閉じる ] */
.modalBox button {
	position: absolute;
	top: 0;
	right: 0 !important;
	width: 40px !important;
	height: 40px !important;
	padding: 0 0 0.2em !important;
	border: none;
	background: #000;
	color: #fff !important;
	font-size: 3rem;
	font-weight: bold;
	cursor: pointer;
	outline: none;
	-webkit-transition: all ease .3s; /* Safari */
	transition: all ease .3s;
}
.modalBox button:hover { background: #666; }
.modalBox button::before, 
.modalBox button::after { display: none; }

@media screen and (max-width: 568px) {
	.modalBox {
		margin: 10px 0;
		padding: 20px 10px !important;
	}
	
	/* [ タイトル ] */
	.modalBox h2 {
		padding: 0 30px;
		font-size: 2rem;
	}

	/* [ テキスト ] */
	.modalBox .image {
		padding: 100px 0 0 0;
		background-position: top center;
		background-size: auto 100px;
	}
	.modalBox .copy { font-size: 1.6rem; }
	
	/* [ リンク ] */
	.modalBox .link { padding: 10px; }
	.modalBox .link a {
		padding: 15px 25px 15px 15px;
		background-position: right 10px center;
		font-size: 1.6rem;
	}
	.modalBox ul.link { display: block; }
	.modalBox ul.link li { width: 100%; }
	.modalBox ul.link li + li { margin: 10px 0 0; }
	.modalBox ul.link a { display: inline-block; }
} /* */


/*==============================================*
 *  [ thanksBox ] 
 *==============================================*/

.thanksBox img { width: 100%; }