/* Y'S GEAR : /marine/navigation/garmin/radar/css/radar.css */


.contentsWidth {
	/* overflow: hidden; */
	color: #333;
	font-size: 1.4rem;
	font-family:
		"游ゴシック体", "Yu Gothic", YuGothic, 
		"メイリオ", Meiryo, 
		"ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", 
		"ＭＳ Ｐゴシック", "MS PGothic", 
		sans-serif;
		line-height: 1.6;
	font-weight: 500;
}

.contentsWidth * { box-sizing: border-box; }

.contentsWidth h2,
.contentsWidth h3,
.contentsWidth h4,
.contentsWidth h5,
.contentsWidth h6 { line-height: 1.2; }

.contentsWidth a, 
.contentsWidth a::before, 
.contentsWidth a::after,
.contentsWidth a * { transition: 0.3s; }

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

@media screen and (min-width: 569px) {
	.contentsWidth .sp { display: none; }
} /* */

@media screen and (max-width: 568px) {
	.contentsWidth .pc { display: none; }
} /* */


/*======================================================================*
 *  [ outline ] 
 *======================================================================*/

.outline {
	position: relative;

}
.outline::before {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: calc(980px * 0.06);
	margin-top: calc(980px * 0.03);
	background: #333;
	clip-path: polygon(0 0, 100% calc(980px * 0.06), 100% 100%, 0 100%);
	content: "";
}

/* [ メイン画像 ] */
.outline .title {
	padding: calc(980px * 0.06 + 25px) 40px calc(980px * 0.06);
	clip-path: polygon(0 calc(980px * 0.06), 100% 0, 100% 100%, 0 100%);
	background: url(../img/main.jpg) center center / cover no-repeat;
}

/* [ テキスト＆動画 ] */
.outline .inner {
	margin-top: calc(980px * 0.06 * -1);
	padding: calc(980px * 0.06) 40px 100px 40px;
	clip-path: polygon(0 calc(980px * 0.06), 100% 0, 100% 100%, 0 100%);
	background: #333;
	color: #fff;
}

.outline .text {
	margin: 40px 0;
	text-align: center;
	font-size: 1.8rem;
}

.outline .movie {
	position: relative;
	padding-top: 56.25%;
}
.outline .movie iframe {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

@media screen and (max-width: 980px) {
	.outline::before {
		height: calc(100vw * 0.06);
		margin-top: calc(100vw * 0.03);
		clip-path: polygon(0 0, 100% calc(100vw * 0.06), 100% 100%, 0 100%);
	}

	/* [ メイン画像 ] */
	.outline .title {
		padding: calc(100vw * 0.06 + 25px) 40px calc(100vw * 0.06);
		clip-path: polygon(0 calc(100vw * 0.06), 100% 0, 100% 100%, 0 100%);
	}

	/* [ テキスト＆動画 ] */
	.outline .inner {
		margin-top: calc(100vw * 0.06 * -1);
		padding-top: calc(100vw * 0.06);
		clip-path: polygon(0 calc(100vw * 0.06), 100% 0, 100% 100%, 0 100%);
	}
} /* */


@media screen and (max-width: 568px) {
	/* [ テキスト＆動画 ] */
	.outline .inner {
		padding-right: 20px;
		padding-left: 20px;
	}

	.outline .title {
		padding: 0;
	}
	.outline .title img { width: 100%; }

	.outline .text {
		font-size: 1.6rem;
	}
} /* */


/*======================================================================*
 *  [ section ] 
 *======================================================================*/

.section {
	position: relative;
	margin-top: calc(980px * -0.03);
}
.section::before {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: calc(980px * 0.06);
	background: #4794CF;
	clip-path: polygon(0 0, 100% calc(980px * 0.06), 100% 100%, 0 100%);
	content: "";
}
.section .inner {
	padding: calc(980px * 0.06) 40px calc(980px * 0.03 + 80px) 40px;
	clip-path: polygon(0 calc(980px * 0.06), 100% 0, 100% 100%, 0 100%);
	background: #CFE8FE;
}
.section .inner *:last-child { margin-bottom: 0 !important; }

/* [ タイトル ] */
.section h2 {
	margin: 20px 0 40px;
	font-size: 3rem;
	font-weight: bold;
}
.section h2.en { font-family: Arial, Helvetica, sans-serif; }
.section h2.en::first-letter { font-size: 5rem; }
.section h2 b { display: inline-block; }

/* [ サブタイトル ] */
.section h3 {
	margin-bottom: 25px;
	font-size: 2rem;
	font-weight: bold;
}

.section p { margin: 20px 0; }
.section figure { text-align: center; }
.section figcaption {
	display: block;
	margin-top: 10px;
	font-weight: bold;
	line-height: 1.2;
}

/* [ フレキシブルボックス ] */
.section .flex.col2 {
	display: flex;
	justify-content: space-between;
	margin: 25px 0;
}
.section .flex.col2 + .flex.col2 { margin-top: 40px; }
.section .flex.col2 > * {
	width: calc(50% - 10px);
	margin: 0 0 0 20px;
}
.section .flex.col2 > *:nth-child(2n+1) { margin-left: 0; }

.section .flex.col2.arrow {
	position: relative;
}
.section .flex.col2.arrow::before {
	position: absolute;
	top: calc(50% - 10px - 10px - 1.4em);
	left: calc(50% - 5px);
	border: 20px solid transparent;
	border-right: none;
	border-left: 10px solid #4794CF;
	content: "";
}
.section .flex.col2.arrow > * {
	width: calc(50% - 20px);
}

@media screen and (max-width: 980px) {
	.section { margin-top: calc(100vw * -0.03); }
	.section::before {
		height: calc(100vw * 0.06);
		clip-path: polygon(0 0, 100% calc(100vw * 0.06), 100% 100%, 0 100%);
	}
	.section .inner {
		padding: calc(100vw * 0.06) 40px calc(100vw * 0.03 + 80px);
		clip-path: polygon(0 calc(100vw * 0.06), 100% 0, 100% 100%, 0 100%);
	}
} /* */

@media screen and (max-width: 768px) {
	.section .flex.col2.text {
		display: block;
	}
	.section .flex.col2.text > * {
		width: 100%;
		margin: 0;
	}
	.section .flex.col2.text > *:nth-child(2n+1) { margin-left: 0; }
	.section .flex.col2.text > * + * { margin-top: 20px; }

} /* */

@media screen and (max-width: 568px) {
	.section .inner {
		padding-left: 20px;
		padding-bottom: calc(100vw * 0.03 + 60px);
		padding-right: 20px;
	}

	/* [ タイトル ] */
	.section h2 {
		margin-top: 40px;
		font-size: 2.2rem;
	}
	.section h2.en::first-letter { font-size: 4rem; }

	/* [ サブタイトル ] */
	.section h3 {
		margin-bottom: 25px;
		font-size: 1.8rem;
	}
	
	.section .flex.col2.text > * + * { margin-top: 20px; }
} /* */


/*======================================================================*
 *  [ index ] 
 *======================================================================*/

.index .inner {
	background: #003865;
	color: #fff;
}

.index .nav {
	display: flex;
	flex-wrap: wrap;
	line-height: 1.4;
}
.index .nav a {
	display: flex;
	align-items: center;
	width: calc(50% - 10px);
	min-height: 85px;
	margin-left: 20px;
	padding: 10px 20px;
	border: 2px solid #fff;
	color: #fff;
	font-size: 2rem;
	font-weight: bold;
}
.index .nav a:nth-of-type(2n+1) { margin-left: 0; }
.index .nav a:nth-of-type(2) ~ a { margin-top: 20px; }
.index .nav a:hover,
.index .nav a:active {
	background: rgba(255,255,255,0.2);
	border-color: #fff !important;
	color: #fff !important;
}
.index .nav a span { display: inline-block; }

@media screen and (max-width: 568px) {
	.index .nav { display: block; }
	.index .nav a {
		width: 100%;
		min-height: 65px;
		margin: 10px 0 0 !important;
		font-size: 1.6rem;
	}
} /* */


/*======================================================================*
 *  [ type ] 
 *======================================================================*/

.type .inner {
	padding-bottom: 0;
	background: url(../img/type_bg.jpg) center top -70px / 120% auto no-repeat #000;
	color: #fff;
}

.type .option {
	margin: 50px -40px 0;
	padding: 50px 20px calc(980px * 0.03 + 80px);
	background: #003865;
}
.type .option h3 {
	margin-bottom: 30px;
	font-size: 2.4rem;
	text-align: center;
}
.type .option h4 {
	margin: 30px 0 20px;
	font-size: 2rem;
	text-align: center;
}

.type .link {
	display: flex;
	flex-wrap: wrap;
}
.type .link a {
	display: block;
	position: relative;
	/* width: calc(25% - 15px); */
	width: calc(33.33% - 13.33px);
	margin-left: 20px;
	padding: 20px 20px 80px;
	background: #fff;
	text-align: center;
}
.type .link a:nth-of-type(3n+1) { margin-left: 0; }
.type .link a:nth-of-type(3) ~ a { margin-top: 20px; }
.type .link a:hover,
.type .link a:active { opacity: 0.8; }
.type .link a:hover img,
.type .link a:active img { opacity: 1; }
.type .link a img { max-width: 200px; }
.type .link a div {
	margin-top: 15px;
}
.type .link a div > b {
	display: block;
	color: #333;
	font-size: calc(1em + 0.2rem);
}
.type .link a div > b span { display: inline-block; }
.type .link a p {
	margin: 5px 0 0;
	color: #333;
}
.type .link a div > span {
	display: flex;
	justify-content: center;
	align-items: center;
	position: absolute;
	right: 20px;
	bottom: 20px;
	left: 20px;
	border-radius: 10px;
	height: 40px;
	background: #000;
	color: #fff;
}

.type .commonNotes {
	margin-top: 30px;
	color: #fff;
}

@media screen and (max-width: 980px) {
	.type .option {
		padding-bottom: calc(100vw * 0.03 + 80px);
	}
} /* */

@media screen and (max-width: 768px) {
	.type .inner {
		background-position: center top;
		background-size: 100% auto;
	}

	.type .link { padding: 0 20px; }
	.type .link a { width: calc(50% - 10px); }
	.type .link a:nth-of-type(3n+1) { margin-left: 20px; }
	.type .link a:nth-of-type(2n+1) { margin-left: 0; }
	.type .link a:nth-of-type(2) ~ a { margin-top: 20px; }
	.type .link a img {
		width: 180px;
		max-width: 100%;
		height: 120px;
		object-fit: cover;
	}
} /* */

@media screen and (max-width: 568px) {
	.type .inner {
		background-size: 120% auto;
	}

	.type .option {
		margin: 50px -20px 0;
		padding-bottom: calc(100vw * 0.03 + 60px);
	}
	.type .option h3 {
		margin-bottom: 30px;
		font-size: 2rem;
		text-align: center;
	}
	.type .option h4 {
		margin: 30px 0 15px;
		font-size: 1.8rem;
		text-align: center;
	}

	.type .link {
		display: block;
		padding: 0;
	}
	.type .link a {
		display: flex;
		align-items: center;
		width: 100%;
		margin: 20px 0 0 !important;
		padding: 20px;
	}
	.type .link a > figure {
		margin-right: 20px;
		width: calc(50% - 20px);
		max-width: 140px;
	}
	.type .link a div {
		flex: 1;
		margin-top: 0;
	}
	.type .link a div > span {
		position: static;
		max-width: 140px;
		margin: 10px auto 0;
	}
} /* */


/*======================================================================*
 *  [ point ] 
 *======================================================================*/

.point .inner {
	background: #333;
	color: #fff;
}


/*======================================================================*
 *  [ weather ] 
 *======================================================================*/

.weather .inner {
	background: #333;
	color: #fff;
}


/*======================================================================*
 *  [ gpsmap ] 
 *======================================================================*/

.gpsmap { padding-bottom: 0; }
.gpsmap .inner {
	padding-bottom: 0;
	background: #ddd;
}

.gpsmap .details {
	margin: 50px -40px 0;
	padding: 50px 20px 40px;
	background: #003865;
	color: #fff;
}
.gpsmap .details h3 {
	margin-bottom: 30px;
	color: #fff;
	font-size: 2.4rem;
	text-align: center;
}
.gpsmap .details > p {
	margin-top: 40px;
	text-align: center;
}
.gpsmap .details > p b {
	display: inline-block;
	margin-bottom: 10px;
	font-size: calc(1em + 0.2rem);
}
.gpsmap .details > p span { display: inline-block; }

.gpsmap .link {
	display: flex;
	flex-wrap: wrap;
}
.gpsmap .link a {
	position: relative;
	display: block;
	width: calc(33.33% - 13.33px);
	margin-left: 20px;
	padding: 2.8em 20px 0;
	text-align: center;
}
.gpsmap .link a:nth-of-type(3n+1) { margin-left: 0; }
.gpsmap .link a:nth-of-type(3) ~ a { margin-top: 20px; }
.gpsmap .link a:hover,
.gpsmap .link a:active { opacity: 0.8; }
.gpsmap .link a:hover img,
.gpsmap .link a:active img { opacity: 1; }
.gpsmap .link a p {
	position: absolute;
	top: 0;
	right: 20px;
	left: 20px;
	margin: 0;
	color: #fff;
	font-size: calc(1em + 0.2rem);
	font-weight: bold;
	line-height: 1.4;
}
.gpsmap .link a p b { display: inline-block; }
.gpsmap .link figure {
	position: relative;
	z-index: 1;
}
.gpsmap .link div {
	position: relative;
	margin: -55px -20px 0;
	padding: 60px 20px 20px;
	background: #fff;
}
.gpsmap .link div > b {
	display: block;
	margin-bottom: 20px;
	color: #333;
	font-size: calc(1em + 0.2rem);
}
.gpsmap .link div > b span { display: inline-block; }
.gpsmap .link div > span {
	display: flex;
	justify-content: center;
	align-items: center;
	border-radius: 10px;
	height: 40px;
	background: #000;
	color: #fff;
	line-height: 1;
}

@media screen and (max-width: 768px) {
	.gpsmap .link {
		padding: 0 20px;
	}
	.gpsmap .link a {
		width: calc(50% - 10px);
	}
	.gpsmap .link a:nth-of-type(3n+1) { margin-left: 20px; }
	.gpsmap .link a:nth-of-type(2n+1) { margin-left: 0; }
	.gpsmap .link a:nth-of-type(2) ~ a { margin-top: 40px; }
} /* */


@media screen and (max-width: 568px) {
	.gpsmap .details {
		margin: 50px -20px 0;
		padding: 50px 20px 40px;
		background: #003865;
		color: #fff;
	}
	.gpsmap .details h3 {
		font-size: 2rem;
	}

	.gpsmap .link {
		display: block;
		padding: 0;
	}
	.gpsmap .link a {
		width: 100%;
		max-width: 280px;
		margin: 40px auto 0 !important;
	}
} /* */


/*======================================================================*
 *  [ banner ] 
 *======================================================================*/

.banner {
	margin: 30px 0 60px;
}

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

@media screen and (max-width: 568px) {
	.banner { padding: 0 10px; }
} /* */