@charset "UTF-8";

.bold {
	font-weight: bold;
}

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

/* introduction */
#introduction.pageWhite500 .inner {
	background: url(/jp/~/media/medicom/hcs/wellsportwhite/img_main.png) center 0 / auto 100% no-repeat;
}

#introduction.pageWhite500 .inner h1 {
	position: absolute;
	top: 36px;
	left: 1px;
	width: 100%;
}

#introduction.pageWhite500 .inner h1 picture {
	position: absolute;
	top: 0px;
	left: 0px;
	width: 170px;
}

#introduction.pageWhite500 .inner h1 picture img {
	box-shadow: 0 0 20px rgba(0,0,0,0.2);
}

#introduction.pageWhite500 .inner h1 .txt {
	font-size: 36px;
	line-height: 1;
	top: 5px;
	left: 190px;
}

#introduction.pageWhite500 .inner h1 .readTxt {
	top: 65px;
	left: 190px;
	line-height: 1.6;
	font-weight: bold;
	font-size: 22px;
}



/* About */
#about {
	margin: 0 auto 125px;
}

.aboutTtl {
	position: relative;
	padding: 0 0 40px;
	text-align: center;
	font-weight: bold;
	font-size: 36px;
	color: #1d91eb;
}

.aboutTtl::after {
	content: 'about';
	position: absolute;
	bottom: 10px;
	left: 0;
	display: block;
	width: 100%;
	text-align: center;
	letter-spacing: 0.04em;
	font-weight: bold;
	font-size: 16px;
	color: #1d91eb;
}

#about .txt {
	/*max-width: 640px;*/
	line-height: 1.7;
	font-size: 24px;
	margin-bottom: 60px;
}

#about .aboutTxtFirst {
	width: 1280px;
	background: url(/jp/~/media/medicom/hcs/wellsportwhite/bg_about.png) center no-repeat;
	text-align: center;
	padding: 100px 0;
}

#about .aboutTxtSecond {
	position: relative;
	width: 1280px;
}

#about .aboutTxtSecond .leftCont {
	max-width: 640px;
	margin: 0 auto 0 0;
	width: 55%;
}

#about .aboutTxtSecond .leftCont .img {
	position: absolute;
	top: 125px;
	right: 5.46875%;
	display: block;
	width: ;
}

#about .aboutTxtSecond .leftCont .img::before {
	content: '';
	position: absolute;
	top: -120px;
	right: -70px;
	z-index: -10;
	display: block;
	background: url("/jp/~/media/medicom/hcs/wellsport/bg_common-gradation.png") 0 0 / 100% 100% no-repeat;
	width: 70.83%;
	height: 430px;
}

#about .aboutTxtSecond .leftCont .img .source {
	background: #e7f0f7;
	padding: 10px;
}

#about .aboutTxtSecond .leftCont .img dl {
	padding-top: 10px;
	line-height: 1.4;
	font-size: 16px;
}

#about .aboutTxtSecond .leftCont .img dt {
	display: inline;
	padding-right: 10px;
	font-weight: bold;
	vertical-align: top;
}

#about .aboutTxtSecond .leftCont .img dd {
	display: inline-block;
	padding-left: 15px;
	border-left: #375fc6 1px solid;	
}

#about .aboutTxtSecond .leftCont .img dd span {
	font-size: 14px;
}

#about .aboutTxtSecond .leftCont .img .cap {
	padding-top: 10px;
	font-weight: bold;
	font-size: 18px;
	line-height: 1.4;
}

#about .aboutTxtSecond .leftCont .img .cap span {
	font-weight: normal;
	font-size: 14px;
}

#about .link {
	padding-top: 60px;
	width: 520px;
	margin: 0 auto;
}

#about .link ul li a {
	position: relative;
	display: block;
	border-radius: 40px;
  background: -moz-linear-gradient( 171deg, rgb(11,223,153) 1%, rgb(11,223,153) 100%);
  background: -webkit-linear-gradient( 171deg, rgb(0,167,175) 1%, rgb(11,223,153) 100%);
  background: -ms-linear-gradient( 171deg, rgb(0,167,175) 1%, rgb(11,223,153) 100%);
	height: 80px;
	line-height: 80px;
	font-weight: bold;
	font-size: 24px;
	text-align: center;
	color: #fff;
}

#about .link 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);
}

#about .link .cap {
	font-size: 14px;
	padding-top: 10px;
}

#about .resourcesLink {
	margin: 20px auto 0;
	text-align: center;
}

/* step */
#step {
	margin: 0 auto 90px;
}

.stepTtl {
	position: relative;
	padding: 0 0 70px;
	text-align: center;
	font-weight: bold;
	font-size: 36px;
	color: #1d91eb;
}

.stepTtl::after {
	content: 'step';
	position: absolute;
	bottom: 40px;
	left: 0;
	display: block;
	width: 100%;
	text-align: center;
	letter-spacing: 0.04em;
	font-weight: bold;
	font-size: 16px;
	color: #1d91eb;
}

#step .readTxt {
	text-align: center;
	font-size: 24px;
	margin: 0 0 60px 0;
}

#step .stepCont {
	margin: 0 auto 70px;
}

#step h3 {
	text-align: center;
	font-weight: bold;
}

#step h3 strong {
	padding: 10px 20px 8px;
	border-radius: 20px;
	background: -moz-linear-gradient( 90deg, rgb(8,99,223) 1%, rgb(61,214,253) 100%);
	background: -webkit-linear-gradient( 90deg, rgb(8,99,223) 1%, rgb(61,214,253) 100%);
	background: -ms-linear-gradient( 90deg, rgb(8,99,172235) 1%, rgb(61,214,253) 100%);
	color: #ffffff;
}

#step h3 strong .large {
	font-size: 24px;
}

#step h3 p {
	font-size: 30px;
	color: #1d91eb;
	margin: 5px 0 20px;
}

#step .stepList {
	display: flex;
	-webkit-box-pack: justify;
	-ms-flex-pack: justify;
	justify-content: space-between;
	margin: 0 auto 20px;
	max-width: 1220px;
}

#step .stepList .listItem {
	position: relative;
	box-sizing: border-box;
	background: #fff;
	padding: 2px;
	width: 47.5%;
	max-width: 380px;
  box-shadow: 0 0 20px 0 rgba(222, 229, 230, 1);
}

#step .stepList .listItem::after {
	content: '';
	display: block;
	position: absolute;
	top: 0;
	bottom: 0;
	margin: auto 0;
	right: -30px;
	box-sizing: border-box;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 25px 0 25px 30px;
	border-color: transparent transparent transparent #e3d77f;
	z-index: 10;
}

#step .stepList .listItem:last-child::after {
	display: none;
}

#step .stepList .listItem .inner {
	position: relative;
	z-index: 1;
	background: #d1f2fe;
	padding: 6px;
	height: 100%;
	box-sizing: border-box;
}

#step .stepList .listItem:last-child .inner {
	background: linear-gradient(0deg, #0964df, #3dd5fc);
}

#step .stepList .listItem .inner .txtArea {
	background: #fff;
	padding: 20px;
	box-sizing: border-box;
	min-height: 235px;
}

#step .stepList .listItem .inner .txtArea dt {
	text-align: center;
	font-weight: bold;
	font-size: 24px;
	color: #1d91eb;
	margin: 0 0 10px;
}

#step .stepList .listItem .inner .txtArea .txt {
	font-size: 20px;
}

#step .stepList .listItem .inner .txtArea .approach li {
	list-style: disc;
	color: #1d91eb;
	margin: 0 0 10px 15px;
 }

#step .stepList .listItem .inner .txtArea .approach li:last-child {
	margin-bottom: 0;
 }

#step .stepList .listItem .inner .txtArea .approach li .txt {
	color: #000000;
}


/* CTA */
.ctaPt02 {
	box-sizing: border-box;
	background: #daf7ff url("/jp/~/media/medicom/hcs/wellsportnavi/bg_contact02.png") center right / auto 100% no-repeat;
	margin: 0 auto 110px;
	padding: 45px 0 0;
	height: 450px;
	text-align: center;
}

.ctaPt02 .inner {
	min-width: 960px;
	max-width: 1280px;
	margin: 0 auto;
}

.ctaPt02 .balloonArea {
	display: flex;
}

.ctaPt02 .balloonArea .balloon {
	background: #fff;
	border-radius: 25px;
	color: #1d91eb;
	font-weight: bold;
	font-size: 24px;
	line-height: 1;
	padding: 14px 20px;
	position: relative;
	margin: 0 10px 0 0;
	box-shadow: 0 0 20px 0 rgb(222 229 230 / 80%);
}

/*.ctaPt02 .balloonArea .balloon::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	display: block;
	border-radius: 25px;
	box-shadow: 0 0 20px 0 rgb(222 229 230 / 80%);
	background: none;
	width: 100%;
	height: 100%;
	mix-blend-mode: multiply;
	z-index: 0;
}

.ctaPt02 .balloonArea .balloon::after {
	position: absolute;
	width: 11px;
	height: 10px;
	display: block;
	content: '';
	background: url("/jp/~/media/medicom/hcs/wellsportnavi/ico_balloon_left.png") 0 0 / auto 100% no-repeat;
	bottom: -10px;
	left: 0;
	right: 0;
	margin: auto;
}

.ctaPt02 .balloonArea .balloon:last-child::after {
	width: 16px;
	background: url("/jp/~/media/medicom/hcs/wellsportnavi/ico_balloon_right.png") 0 0 / auto 100% no-repeat;
	left: 90px;
	margin: 0;
}*/

.ctaPt02 .ttl {
	font-size: 36px;
	font-weight: bold;
	color: #1d91eb;
	text-align: left;
	margin: 30px 0 30px 0;
	line-height: 1;
	text-shadow:0 0 20px #daf7ff;
}

.ctaPt02 .txt {
	font-size: 24px;
	margin: 0 0 50px 0;
	text-align: left;
}

.ctaPt02 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;
}

.ctaPt02 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);
}


/* ------------------------------------------------------------------------
	Ajustment For Smart Phone 
------------------------------------------------------------------------ */
@media (max-width: 768px) {
	/* Introduction */
	#introduction.pageWhite500 .inner {
		background: url("/jp/~/media/medicom/hcs/wellsportwhite/img_main_sp.png") center 0 / 100% auto no-repeat;
		max-width: auto;
		height: 105.333333vw;
		width: 100%;
	}

	#introduction.pageWhite500 .inner h1 {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
	}	
	
	#introduction.pageWhite500 .inner h1 picture {
		width: 19.99999995vw;
		left: auto;
		right: 4vw;
		top: 4vw;
	}
	
	#introduction.pageWhite500 .inner h1 .txt {
		top: 6.667vw;
		left: 4vw;
		line-height: 1;
		font-size: 5.6vw;
	}
	
	#introduction.pageWhite500 .inner h1 .readTxt {
		top: 16.000vw;
		left: 4vw;
		font-size: 3.733vw;
		text-shadow: 0px 0px 5px #2fb7f5;
	}

	
	
	
	
	/* About */
	#about {
		margin: 0 auto 16.000vw;
		padding: 0 0;
	}

	.aboutTtl {
		padding: 12vw 0 15.333333vw;
		font-size: 5.6vw;
		background: -moz-linear-gradient(top, #dcecfb, 30vw, #fff);
		background: -webkit-linear-gradient(top, #dcecfb, 30vw, #fff);
		background: linear-gradient(to bottom, #dcecfb, 30vw, #fff);
	}

	.aboutTtl::after {
		bottom: 9.6vw;
		font-size: 3.2vw;
	}
	
	.aboutTtl .small {
		font-size: 4.2666667vw;
	}
	
	#about .txt {
		margin: 0 auto 8vw;
		width: 86.667vw;
		font-size: 4.2666667vw;
	}
	
	#about .aboutTxtFirst {
		width: 100%;
		background: url(/jp/~/media/medicom/hcs/wellsportwhite/bg_about_sp.png) center bottom / 100% auto no-repeat;
		text-align: left;
		padding: 0 0 37.33333324vw;
	}
	
	#about .aboutTxtSecond {
		width: 100%;
		margin-top: 7.99999998vw;
	}
	
	#about .aboutTxtSecond .leftCont {
		max-width: 100%;
		margin: 0 auto 0 0;
		width: 100%;
	}
	
	#about .aboutTxtSecond .leftCont .img {
		position: relative;
		margin: 16.000vw auto 8vw;
		padding: 0;
		width: 86.667vw;
		top: inherit;
		left: inherit;
		right: inherit;
	}
	
	#about .aboutTxtSecond .leftCont .img img {
		position: relative;
		z-index: 10;
	}

	#about .aboutTxtSecond .leftCont .img::before {
		top: -6.667vw;
		left: -6.667vw;
		right: inherit;
		width: 73.333vw;
		height: 52.000vw;
	}
	
	#about .aboutTxtSecond .leftCont .img dl {
		font-size: 3.2vw;
	}

	#about .aboutTxtSecond .leftCont .img dt {
		display: inline;
		width: 10%;
		padding-right: 1.33333333vw;
		font-weight: bold;
		vertical-align: top;
	}

	#about .aboutTxtSecond .leftCont .img dd {
		display: inline-block;
		width: 82%;
		padding-left: 1.33333333vw;
		border-left: #375fc6 1px solid;
	}

	#about .aboutTxtSecond .leftCont .img dd span {
		font-size: 3.200vw;
	}
	
	#about .aboutTxtSecond .leftCont .img .cap {
		padding-top: 1.33333333vw;
		font-size: 3.200vw;
		line-height: 1.6;
	}

	#about .aboutTxtSecond .leftCont .img .cap span {
		font-size: 3.200vw;
	}
	
	#about .link {
		padding-top: 7.99999998vw;
		width: 90%;
	}
	
	#about .link ul li a {
		border-radius: 12vw;
		height: auto;
		line-height: 1.4;
		font-size: 5.6vw;
		padding: 1.599999996vw 0;
	}

	#about .link 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;
	}
	
	#about .link .cap {
		font-size: 3.200vw;
		padding-top: 1.33333333vw;
	}
	
	
	/* step */
	#step {
		padding: 0;
		margin: 0 0 16.000vw 0;
		max-width: 100%;
	}

	.stepTtl {
		padding: 12vw 0 15.333333vw;
		font-size: 5.6vw;
		background: -moz-linear-gradient(top, #dcecfb, 30vw, #fff);
		background: -webkit-linear-gradient(top, #dcecfb, 30vw, #fff);
		background: linear-gradient(to bottom, #dcecfb, 30vw, #fff);
	}
	
	#step .readTxt {
		font-size: 4.2666667vw;
		margin: 0 auto 16.000vw;
		width: 86.667vw;
		text-align: left;
	}
	
	#step .stepCont {
		margin: 0 auto 16.000vw;
	}

	#step .stepTtl::after {
		bottom: 11.333333vw;
		font-size: 3.2vw;
	}

	#step h3 strong .large {
		font-size: 5.6vw;
	}
	
	#step h3 p {
		font-size: 5.3333333vw;
		color: #1d91eb;
	}
	
	#step .stepList {
		display: block;
		margin: 0 auto;
		width: 92vw;
	}

	#step .stepList .listItem {
		margin: 0 0 4vw;
		padding: 4px;
		width: 100%;
		max-width: 100%;
	}

	#step .stepList .listItem::after {
    top: inherit;
    bottom: -4.800vw;
    margin: auto;
    right: 0;
		left: 0;
    box-sizing: border-box;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 4.800vw 4vw 0 4vw;
		border-color: #e3d77f transparent transparent transparent;
    z-index: 10;
	}
	
	#step .stepList .listItem .inner .txtArea {
	min-height: auto;
}
	
	#step .stepList .listItem .inner .txtArea dt {
		font-size: 4.267vw;
		margin: 0 0 4vw 0;
	}

	#step .stepList .listItem .inner .txtArea .txt {
		font-size: 3.733vw;
	}
	
	
	/* CTA */
	.ctaPt02 {
		background: #daf7ff url("/jp/~/media/medicom/hcs/wellsportnavi/bg_contact02_sp.png") center 0 / 100% auto no-repeat;
		margin: 0 0 32.000vw;
		padding: 8.000vw 2.667vw 0;
		height: 98.667vw;
	}
	
	.ctaPt02 .inner {
		width: 100%;
		min-width: 100%;
		max-width: 100%;
	}
	
	.ctaPt02 .balloonArea .balloon {
		font-size: 4.8vw;
		padding: 2.66666666vw 1.999999995vw;
		margin-bottom: 2.66666666vw;
		line-height: 1;
		text-align: left;
		box-shadow: 0 0 20px 0 rgb(222 229 230 / 80%);
	}
	
	.ctaPt02 .ttl {
		font-size: 5.600vw;
		margin: 0 0 5.33333332vw 1.999999995vw;
		line-height: 1.4;
	}
	
	.ctaPt02 .txt {
		font-size: 4.267vw;
		margin: 0 0 5.33333332vw 1.999999995vw;
	}
	
	.ctaPt02 ul li a {
		border-radius: 8vw;
		width: 80vw;
		height: 16vw;
		line-height: 16vw;
		font-size: 5.6vw;
	}

	.ctaPt02 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;
	}
	
}