@charset "UTF-8";





/* Basic Settings
------------------------------------------------*/
.pc {
  display: block !important;
}

.sp {
  display: none !important;
}

body {
	background: none;
}

#wrap {
  margin: 0 auto;
  overflow: hidden;
}

.container {
	max-width: 100%;
	padding: 0;
}

.column-main {
	float: none;
	width: 100%;
	padding: 0;
}

.container-sub {
	display: none;
}

.container section {
	box-sizing: border-box;
	min-width: 960px;
	max-width: 1280px;
	margin: 0 auto;
	padding: 0;
}

.container em,
.container i {
	font-style: normal;
}

.container-contact {
	display: none;
}

main a {
	-webkit-transition: opacity 0.3s;
	-moz-transition: opacity 0.3s;
	-ms-transition: opacity 0.3s;
	-o-transition: opacity 0.3s;
	transition: opacity 0.3s;
}

main a:hover {
	opacity: 0.7;
	filter: alpha(opacity=70);
	-moz-opacity: 0.7;
	text-decoration: none;
}

.bold {
	font-weight: bold;
}

.totop-footer {
	z-index: 100;
}





/* Page Styles
------------------------------------------------*/
/* Introduction */
#introduction {
	position: relative;
	margin: 0 0 120px;
	max-width: 100%;
	height: 330px;
}

#introduction::before,
#introduction::after {
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	display: block;
	background: url("/jp/~/media/medicom/hcs/wellsport/bg_main-gradation-left.png") 0 0 / 100% 100% repeat-x;
	width: 50%;
	height: 330px;
}

#introduction::after {
	left: 50%;
	background: url("/jp/~/media/medicom/hcs/wellsport/bg_main-gradation-right.png") 0 0 / 100% 100% repeat-x;
}

#introduction .inner {
	position: relative;
	z-index: 1;
	margin: 0 auto;
	width: auto;
	max-width: 1280px;
	height: 330px;
}

#introduction .inner h1 {
	position: absolute;
	bottom: 25px;
	left: 45px;
	line-height: 1.4;
	font-weight: bold;
	font-size: 20px;
}

#introduction .inner h1 span {
	display: block;
	border-radius: 16px;
	background: #fff;
	margin: 0 0 10px -20px;
	width: 200px;
	height: 32px;
	line-height: 32px;
	text-align: center;
	font-weight: bold;
	font-size: 18px;
	color: #00a5e3;
}

#introduction .inner h1 picture {
	position: absolute;
	bottom: 3px;
	left: 335px;
	display: block;
	width: 270px;
}

#introduction .inner p {
	position: absolute;
	top: 20px;
	left: 35px;
	line-height: 1.4;
	font-weight: bold;
	font-size: 30px;
	color: #fff;
}

#introduction .inner p em {
	display: block;
	font-size: 40px;
}

#introduction .inner p em i {
	margin: 0 -8px;
}

#introduction .inner > picture {
	position: absolute;
	bottom: -10px;
	right: 10px;
	display: block;
	width: 147px;
}






/* CTA */
.cta {
	box-sizing: border-box;
	background: #daf7ff url("/jp/~/media/medicom/hcs/wellsport/bg_contact.png") center 0 / auto 100% no-repeat;
	margin: 0 auto 110px;
	padding: 30px 0 0;
	height: 270px;
	text-align: center;
}

.cta p {
	position: relative;
	padding: 0 0 50px;
	line-height: 1.5;
	font-weight: bold;
	font-size: 24px;
	color: #1870e1;
}

.cta p::after {
	content: 'contact';
	position: absolute;
	bottom: 25px;
	left: 0;
	display: block;
	width: 100%;
	text-align: center;
	letter-spacing: 0.04em;
	font-weight: bold;
	font-size: 16px;
	color: #1870e1;
}

.cta p em {
	display: block;
	font-size: 30px;
}

.cta ul li a {
	position: relative;
	display: block;
	border-radius: 40px;
  background: -moz-linear-gradient( 171deg, rgb(255,101,72) 1%, rgb(255,164,35) 100%);
  background: -webkit-linear-gradient( 171deg, rgb(255,101,72) 1%, rgb(255,164,35) 100%);
  background: -ms-linear-gradient( 171deg, rgb(255,101,72) 1%, rgb(255,164,35) 100%);
	margin: 0 auto;
  width: 400px;
  height: 80px;
	line-height: 80px;
	font-weight: bold;
	font-size: 24px;
	color: #fff;
}

.cta ul li a::after {
	content: '';
	position: absolute;
	top: 50%;
	right: 35px;
	margin: -7px 0 0 -8px;
	width: 10px;
	height: 10px;
	border-top: 3px solid #fff;
	border-right: 3px solid #fff;
	-ms-transform: rotate(45deg);
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
}






/* Resources Link */
.resourcesLink {
	margin: -40px auto 30px;
	max-width: 1280px;
}





@media only screen and (min-width: 769px) {
	/* Sidebar Ajustment */
	.column-sidebar {
		position: relative;
		float: none;
		background: #f5f5f5;
		margin: -40px 0 0;
		padding: 140px 0 50px;
		width: 100%;
	}
	
	.column-sidebar::before {
		content: 'お役立ち情報';
		position: absolute;
		top: 60px;
		left: 0;
		width: 100%;
		display: block;
		background: none;
		text-align: center;
		font-weight: bold;
		font-size: 24px;
	}

	
	.column-sidebar nav {
		position: relative;
		margin: 0 auto;
		padding: 0;
		width: auto;
		min-width: 960px;
		max-width: 1280px;
	}
	
	.column-sidebar nav::before,
	.column-sidebar nav::after {
		content: '';
		position: absolute;
		top: -10px;
		left: 33.3%;
		display: block;
		background: #ebebeb;
		width: 2px;
		height: 100%;
	}
	
	.column-sidebar nav::after {
		left: 66.6%;
	}
	
	.title-sidenav {
		position: relative;
		box-sizing: border-box;
		border-bottom: none;
		background: none;
		padding: 0 3% 20px 3.25%;
		width: 32.8125%;
	}

	.title-sidenav::before {
		content: '';
		position: absolute;
		top: 9px;
		left: 5%;
		display: block;
		width: 6px;
		height: 6px;
		border-top: 2px solid #1d90eb;
		border-right: 2px solid #1d90eb;
		-ms-transform: rotate(45deg);
		-webkit-transform: rotate(45deg);
		transform: rotate(45deg);
	}
	
	.title-sidenav a {
		padding: 0;
		text-decoration: underline;
		color: #0b58a6;
	}
	
	.title-sidenav a:after {
		display: none;
	}
	
	.list-sidenav-deep {
		border-top: none;
		background: none;
	}
	
	.list-sidenav-deep li {
		position: relative;
	}

	.list-sidenav-deep a:before,
	.list-sidenav-deep a.is-current:before {
		content: '';
		position: absolute;
		top: 30px;
		left: 4%;
		display: block;
		border: none;
		border-radius: 50%;
		background-image: none !important;
    background: #1d90eb;
    width: 4px;
		height: 4px;
	}
	
	.list-sidenav-deep a.is-current {
		padding: 0;
		background: none;
		text-decoration: underline;
		color: #0b58a6;
	}
	
	.list-sidenav-deep > li a.is-current {
    padding-left: 0;
	}
	
	.nav-side > dl > dd > ul > li {
		position: relative;
		border-bottom: none;
		padding: 0 3% 20px 9.52%;
	}

	.nav-side > dl > dd > ul > li::before {
		content: '';
		position: absolute;
		top: 9px;
		left: 5%;
		display: block;
		width: 6px;
		height: 6px;
		border-top: 2px solid #1d90eb;
		border-right: 2px solid #1d90eb;
		-ms-transform: rotate(45deg);
		-webkit-transform: rotate(45deg);
		transform: rotate(45deg);
	}
	
	.nav-side > dl > dd > ul > li a {
		padding: 0;
		font-size: 16px;
		text-indent: 0;
	}
	
	.nav-side > dl > dd > ul > li > a:before {
		display: none;
	}

	.nav-side > dl > dd > ul > li > a.is-current {
	}
	
	.column-sidebar dl {
		position: relative;
	}

	.column-sidebar dl dt {
		position: absolute;
		top: 0;
		left: 0;
	}

	.column-sidebar dl dd > ul {
		display: flex;
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		-ms-flex-direction: column;
		flex-direction: column;
		flex-wrap: wrap;
	}

	.column-sidebar dl dd > ul > li {
		box-sizing: border-box;
		position: relative;
		padding: 0 0 20px 3%;
		width: 33.3%;
	}
	
	.column-sidebar dl dd > ul > li:first-child {
		margin: 45px 0 0;
	}

	.column-sidebar dl dd ul li ul {
	}
	
	.column-sidebar dl dd ul li ul li {
		padding: 18px 2% 0 8%;
	}

	.column-sidebar dd ul li {
		border: none;
	}

	.column-sidebar dd ul li a {
		padding: 0;
		text-decoration: underline;
		color: #0b58a6;
	}
}





/* ------------------------------------------------------------------------
	Ajustment For Small PC Window 
------------------------------------------------------------------------ */
@media only screen and (min-width: 769px) and (max-width: 1000px) {
	/* Basic Settings
	------------------------------------------------*/
  #wrap {
    width: 1000px;
    overflow-x: scroll;
  }
	
	.container section {
		min-width: 768px;
	}
}






/* ------------------------------------------------------------------------
	Ajustment For Smart Phone 
------------------------------------------------------------------------ */
@media (max-width: 768px) {
	/* Basic Settings
	------------------------------------------------*/
  .pc {
    display: none !important;
  }
	
  .sp {
    display: block !important;
  }

  #wrap {
    width: 100%;
    overflow: hidden;
  }
	
	.container section {
		min-width: 100%;
		max-width: 100%;
	}
	
	.column-sidebar {
    float: none;
    width: 100%;
    padding: 0;
}
	
	
	
	
	
	/* Page Styles
	------------------------------------------------*/
	/* Introduction */
	#introduction {
		margin: 0;
		height: 105.333333vw;
	}

	#introduction::before,
	#introduction::after {
		display: none;
	}

	#introduction .inner {
		max-width: auto;
		height: 105.333333vw;
	}

	#introduction .inner h1 {
		bottom: auto;
		top: 60.6666667vw;
		left: 4.6666667vw;
		font-size: 3.733333vw;
	}

	#introduction .inner h1 span {
		border-radius: 2.666667vw;
		background: #00a5e3;
		margin: 0 0 2vw -2vw;
		width: 33vw;
		height: 5.3333333vw;
		line-height: 5.3333333vw;
		font-size: 3.2vw;
		color: #fff;
	}

	#introduction .inner h1 picture {
		bottom: -11.75vw;
		left: 0;
		width: 47.733333vw;
	}

	#introduction .inner p {
		top: 4.6666667vw;
		left: 4vw;
		line-height: 1.4;
		font-size: 5.3333333vw;
	}

	#introduction .inner p em {
		font-size: 6.4vw;
	}

	#introduction .inner p em i {
		margin: 0 -0.8vw;
	}

	#introduction .inner > picture {
		bottom: 12.3333333vw;
		right: 1.6vw;
		width: 24.4vw;
	}





	/* CTA */
	.cta {
		background: #daf7ff url("/jp/~/media/medicom/hcs/wellsport/bg_contact_sp.png") center 0 / 100% 100% no-repeat;
		margin: 0 0 20vw;
		padding: 9.3333333vw 0 0;
		height: 64vw;
	}

	.cta p {
		padding: 0 0 13.3333333vw;
		font-size: 4.8vw;
	}

	.cta p::after {
		bottom: 7.3333333vw;
		font-size: 3.2vw;
	}

	.cta p em {
		font-size: 5.6vw;
	}

	.cta ul li a {
		border-radius: 8vw;
		width: 80vw;
		height: 16vw;
		line-height: 16vw;
		font-size: 5.6vw;
	}

	.cta ul li a::after {
		right: 8vw;
		margin: -1.4vw 0 0 -1vw;
		width: 2vw;
		height: 2vw;
		border-top: 0.6666667vw solid #fff;
		border-right: 0.6666667vw solid #fff;
	}






	/* Resources Link */
	.resourcesLink {
		box-sizing: border-box;
		margin: 4vw auto 8vw;
		padding: 0 0 0 3.2vw;
		max-width: 100%;
		font-size: 4.2vw;
	}
}





/* ------------------------------------------------------------------------
	Ajustment For Smart Phone 
------------------------------------------------------------------------ */
@media (max-width: 650px) {
	.column-sidebar {
		margin: -16vw 0 0;
    padding: 0 10px 20px;
	}
}