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


.contentsWidth *, 
.contentsWidth *::before,
.contentsWidth *::after { box-sizing: border-box; }


.contentsWidth a {
	-webkit-transition: all ease .3s;
	transition: all ease .3s;
}

@media screen and (min-width: 569px) {
} /* */

@media screen and (max-width: 568px) {
} /* */


/*======================================================================*
 *  [ categoryLineup ] 
 *======================================================================*/

.categoryLineup h2 {
	font-size: 2.4rem;
}
.categoryLineup ul {
	float: left;
	margin-bottom: 10px;
}

/*======================================================================*
 *  [ differenceWrap ] 
 *======================================================================*/

.pageLink {
	display: flex;
	flex-wrap: wrap;
	margin-bottom: 50px;
}
.pageLink a {
	display: flex;
	position: relative;
	align-items: center;
	width: calc(50% - 10px);
	margin-left: 20px;
	padding: 10px 20px;
	border: 1px solid #4794cf;
	color: #4794cf;
	font-size: 1.4rem;
	font-weight: bold;
	line-height: 1.1;
	text-align: center;
}
.pageLink a:hover,
.pageLink a:active { background: #e9f2f9; }
.pageLink a:nth-child(2) ~ a { margin-top: 10px; }
.pageLink a::after {
	position: absolute;
	top: calc(50% - 5px);
	right: 10px;
	width: 10px;
	height: 10px;
	border-top: 2px solid #4794cf;
	border-right: 2px solid #4794cf;
	transform: rotate(45deg);
	content: "";
}
.pageLink a:nth-child(2n+1) { margin-left: 0; }
.pageLink b { width: 100%; }

@media screen and (max-width: 568px) {
	.pageLink {
		display: block;
		margin-bottom: 40px;
	}
	.pageLink a {
		width: 100%;
		margin-left: 0 !important;
	}
	.pageLink a + a { margin-top: 10px; }
} /* */


/*======================================================================*
 *  [ differenceWrap ] 
 *======================================================================*/

.differenceWrap {
	font-size: 1.4rem;
	font-weight: 500;
}
.differenceWrap h2 {
	margin-bottom: 20px;
	border-bottom: none;
	font-size: 2.4rem;
	font-weight: bold;
	text-align: center;
}
.differenceWrap h2 b { display: inline-block; }
.differenceWrap > div {
	margin-top: 20px;
	padding: 20px;
	background: rgba(233,242,249,0.4);
}
.differenceWrap h3 {
	margin-bottom: 15px;
	font-size: 1.8rem;
	line-height: 1.1;
}
.differenceWrap h3 b {
	display: inline-block;
	background: linear-gradient(transparent 70%, #fff799 70%);
}
.differenceWrap .sakura {
	position: relative;
	margin-bottom: 20px;
	padding-right: 160px;
}
.differenceWrap .sakura figure {
	position: absolute;
	top: calc(50% - 80px);
	right: 0;
}

@media screen and (max-width: 568px) {
	.differenceWrap { padding: 0 10px; }
	.differenceWrap h2 {
		margin: 0 -10px 10px;
		font-size: 2rem;
	}
	.differenceWrap > div {
		margin-top: 10px;
		padding: 15px;
		background: rgba(233,242,249,0.4);
	}
	.differenceWrap h3 {
		margin-bottom: 10px;
		font-size: 1.6rem;
	}
	.differenceWrap .sakura {
		margin-bottom: 15px;
		padding-right: 0;
	}
	.differenceWrap .sakura figure {
		position: static;
		float: right;
		width: 100px;
		margin: 0 0 5px 5px;
	}
} /* */

/*======================================================================*
 *  [ aboutWrap ] 
 *======================================================================*/

.aboutWrap {
	margin-bottom: 50px;
	font-size: 1.4rem;
	font-weight: 500;
}
.aboutWrap h2 {
	margin-bottom: 20px;
	border-bottom: none;
	font-size: 2.4rem;
	font-weight: bold;
	text-align: center;
}

@media screen and (max-width: 568px) {
	.aboutWrap { padding: 0 10px; }
	.aboutWrap h2 {
		margin: 0 -10px 10px;
		font-size: 2rem;
	}
} /* */

/* [ aboutNav] */
.aboutNav {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	margin-bottom: 30px;
	text-align: center;
}
.aboutNav a {
	display: flex;
	justify-content: center;
	align-items: center;
	width: calc(33.33% - 8px);
	padding: 5px;
	border: 3px solid #2f5188;
	color: #2f5188;
	font-size: 1.8rem;
}
.aboutNav a:hover, 
.aboutNav a:active {
	border-color: #2f5188 !important;
	background: #2f5188;
	color: #fff !important;
}
.aboutNav a:nth-child(3) ~ * { margin-top: 10px; }
.aboutNav b { display: inline-block; }

@media screen and (max-width: 568px) {
	.aboutNav { margin-bottom: 20px; }
	.aboutNav a {
		width: calc(33.33% - 3.3px);
		height: calc(2em * 1.2 + 16px);
		font-size: 1.4rem;
		line-height: 1.2;
	}
	.aboutNav a:nth-child(3) ~ * { margin-top: 5px; }
} /* */

/* [ aboutBox ] */
.aboutBox {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 50px;
	padding: 17px 17px 0;
	border: 3px solid #e9f2f9;
}
.aboutBox h3 {
	width: 100%;
	margin-bottom: 15px;
	padding-left: 25px;
	font-size: 2.4rem;
}
.aboutBox h3::before {
	display: inline-block;
	width: 20px;
	height: 20px;
	margin: 0 5px 0 -25px;
	background: url(../img/icon_check.svg) center center no-repeat;
	background-size: contain;
	content: "";
}
.aboutBox > figure { width: 30%; }
.aboutBox > div { width: calc(70% - 10px); }
.aboutBox p:first-child {
	margin-bottom: 10px;
	font-size: 1.6rem;
	line-height: 1.6;
}
.aboutBox p + p {
	min-height: calc(5em * 1.8);
	line-height: 1.8;
}
.aboutBox p b {
	display: inline-block;
	background: linear-gradient(transparent 55%, #fff799 55%);
	line-height: 1.4;
}
.aboutBox a {
	display: table;
	width: 100%;
	border: 3px solid #2f5188;
	background: #2f5188;
	font-weight: bold;
	text-align: center;
	transform: translateY(calc(50% + 1px));
}
.aboutBox a > * {
	display: table-cell;
	text-align: center;
	vertical-align: middle;
}
.aboutBox a span {
	position: relative;
	width: 6em;
	padding: 5px 0;
	background: #fff;
	color: #2f5188;
}
.aboutBox a span::after {
	position: absolute;
	top: calc(50% - 6px);
	right: -8px;
	width: 8px;
	height: 12px;
	border: 6px solid transparent;
	border-left: 8px solid #fff;
	border-right: none;
	content: "";
}
.aboutBox a b {
	width: calc(100% - 6em);
	padding: 0 1em;
	color: #fff;
}
.aboutBox a:hover,
.aboutBox a:active { background: #4794CF; }
.aboutBox a:hover span,
.aboutBox a:active span { color: #4794CF; }
.aboutBox a:hover b,
.aboutBox a:active b { color: #fff; }

@media screen and (max-width: 568px) {
	.aboutBox {
		margin-bottom: 40px;
		padding: 15px 12px 0;
	}
	.aboutBox h3 {
		margin-bottom: 10px;
		padding-left: 25px;
		font-size: 1.8rem;
	}
	.aboutBox h3::before {
		vertical-align: text-top;
	}
	.aboutBox > figure {
		width: 100%;
		margin-bottom: 15px;
		text-align: center;
	}
	.aboutBox > figure img { width: 150px; }
	.aboutBox > div { width: 100%; }
} /* */


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


 @media screen and (max-width: 568px) {
} /* */


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


@media screen and (max-width: 568px) {
} /* */