@charset "utf-8";

/*-------------------------------------------------------------------------------
 RESET
 -------------------------------------------------------------------------------*/

/* margin padding reset */
body, div, p,  ul, ol, li, dl, dt, dd, table, th ,td, img, figure,
h1, h2, h3 ,h4 ,h5, h6, form, select {
	margin: 0;
	padding: 0;
}

/* remove list point mark */
ul,
ol		{ list-style: none; }

/* remove border & off descender */
img		{ border: 0; vertical-align: middle; }

/* remove descender */
svg,
input,
select,
textarea,
label	{ vertical-align: middle; }

/* set collapse */
table	{ border-collapse: collapse; }

/* off bold */
h1, h2, h3 ,h4 ,h5, h6, th, em, strong { font-weight: normal; }

body {
	word-wrap: break-word;
}
pre	 {
	white-space: pre-wrap;
}

/* [IE8-] New Tag from HTML5 */
main, article, aside, figcaption, figure,
footer, header, nav, section, details, summary {
	display: block;
}

/* for height 100% */
html,
body {
	height: 100%;
	background-color: #000000;
}

/* [if it need] remove default form style */
select,
input[type="text"],
input[type="search"],
input[type="number"],
input[type="url"],
input[type="password"],
input[type="email"],
input[type="tel"],
textarea {
	border-radius: 0;
	outline: 0;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
}

/*-------------------------------------------------------------------------------
 FONT
 -------------------------------------------------------------------------------*/
@import url(http://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,600,700,800,300|Open+Sans+Condensed:300,300italic,700);

.ffOpenSans		{ font-family: 'Open Sans', sans-serif; }
.ffOpenSansCond	{ font-family: 'Open Sans Condensed', sans-serif; }

/*-------------------------------------------------------------------------------
 BASE
 -------------------------------------------------------------------------------*/
.cf:after {
	clear: both;
	content: "";
	display: block;
	height: 0;
}
.pc-dn {
	display: none !important;
}
.sp-dn {
	display: block !important;
}
.dn { display: none !important; }
.fl { float: left; }
.fr { float: right; }
/*-------------------------------------------------------------------------------
 TYPOGRAPHY BASE STYLE
 -------------------------------------------------------------------------------*/

/* font-family */
html, input, select, textarea, table, th, td, li ,a {
	font-family: Kozuka Gothic Pro R, "小塚ゴシック Pro R",Helvetica, Arial, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}
/* font-style */
html {
	line-height: 1.7;
	font-size: 13px;
	-webkit-text-size-adjust: 100%;
	border-color: #A7A8A9;
}
/* base font color */
html, input, select, textarea {
	color: #FFFFFF;
}
/* normalize size */
input, select, textarea {
	font-size: 100%;
}

/* normalize style & weight */
strong, em, small {
	font-style: normal;
	font-weight: normal;
}

/*-------------------------------------------------------------------------------
 TYPOGRAPHY ANCHORS STYLE
 -------------------------------------------------------------------------------*/
a,
a:hover,
a:active	{ color: #999999; text-decoration: none; }

/*-------------------------------------------------------------------------------
 STRUCTURE
 -------------------------------------------------------------------------------*/
.wrapper {
	padding-bottom: 50px;
}
.container {
	max-width: 980px;
	margin-left: auto;
	margin-right: auto;
}
/* SECTION */
.section-wrapper {
	margin-top: 50px;
	background-image: url("../img/ecg1_c3fit.png");
	background-repeat: repeat-x;
	background-position: 0 30px;
}
.section-container {
	margin-left: auto;
	margin-right: auto;
	max-width: 980px;
	/*min-width: 320px;*/
	/*padding: 0 20px;*/
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
}
.header-wrap,
.intro-wrap {
	margin-left: auto;
	margin-right: auto;
	/*min-width: 320px;*/
	/*padding: 0 7%;*/
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	max-width: 980px;
}
.lte-ie8 .intro-wrap {

}
.section-heading {
	font-family: 'Open Sans', sans-serif;
	font-size: 24px;
}
.section-description-title {
	color: #FFFFFF;
	font-size: 16px;
	vertical-align: bottom;
	padding-right: 80px;
}

/* header */
.header-wrap-wrap {
	position: relative;
	background-image: url("../img/ecg1_c3fit.png");
	background-position: 0 50px;
	background-repeat: repeat-x;
	padding-top: 50px;
}
.lte-ie8 .header-logo {
	background: url("../img/logo_c3fit.png") no-repeat;
}
@media screen and (min-width: 737px) {
	.fixed + .header-wrap-wrap {
		margin-top: 65px;
	}
}
.header-title {
	background: url("../img/logo_line_c3fit_in-pulse.png") no-repeat;
	display: block;
	height: 55px;
	overflow: hidden;
	margin-top: 35px;
	text-indent: -9999px;
	width: 376px;
}

.header-title2 {
	background: url("../img/logo_line_product.png") no-repeat;
	display: block;
	height: 55px;
	overflow: hidden;
	margin-top: 35px;
	text-indent: -9999px;
	width: 376px;
}

.header-title3 {
	background: url("../img/logo_line_caution.png") no-repeat;
	display: block;
	height: 55px;
	overflow: hidden;
	margin-top: 35px;
	text-indent: -9999px;
	width: 376px;
}

.header-title4 {
	background: url("../img/logo_line_qa.png") no-repeat;
	display: block;
	height: 55px;
	overflow: hidden;
	margin-top: 35px;
	text-indent: -9999px;
	width: 376px;
}
.lte-ie8 .header-title {
	background: url("../img/logo_line_c3fit_in-pulse.png") no-repeat;
}


/* GLOBALNAVI */
.main-nav-wrapper {
	float: right;
}
.main-header-wrapper {
	width: 100%;
	border-bottom: 1px solid #FFFFFF;
	z-index: 100;
}
.main-header-wrapper.fixed {
	position: fixed;
	top: 0;
	background-color: #000000;
}
.page-header {
	float: left;
	padding-top: 7px;
	padding-bottom: 7px;
}
.lte-ie8 .page-header {
	padding-top: 15px;
	padding-bottom: 15px;
}

/* on activation */
.menu-btn.on span {
	background-color: transparent;
}
.menu-btn.on span:before {
	-webkit-transform: rotate(45deg) translate(5px, 5px);
	transform: rotate(45deg) translate(9px, 9px);
}
.menu-btn.on span:after {
	-webkit-transform: rotate(-45deg) translate(5px,-5px);
	transform: rotate(-45deg) translate(8px,-8px);
}

/* nav */
.pageFade {
	float: left;
	margin: 24px 0 0 0;
	padding: 0;
}
.nav-logo {
	display: inline-block;
	vertical-align: bottom;
}
.nav-logo > a {
	display: inline-block;
	width: 72px;
	height: 50px;
	background: url("../img/top_logo.svg") no-repeat center;
	background-size: contain;
	text-indent: -9999px;
}
.lte-ie8
.nav-logo > a {
	width: 73px;
	height: 35px;
	background: url("../img/top_logo.png") no-repeat;
}
.nav-product-logo > span {
	display: inline-block;
	background: url("../img/gnav_logo.svg") no-repeat;
	width: 215px;
	height: 43px;
	text-indent: -9999px;
	background-size: 170px auto;
}
.nav-product-logo {
	display: inline-block;
	margin-left: 10px;
	overflow: hidden;
	vertical-align: bottom;
}
.lte-ie8 .nav-product-logo {
	width: 171px;
	height: 25px;
	background: url("../img/gnav_logo.png") no-repeat;
}
.nav-second-list {
	display: table;
	height: 64px;
}
.nav-second-list li {
	display: table-cell;
	height: inherit;
	text-align: center;
	vertical-align: bottom;
}
.nav-second-list a,
.nav-second-list a:visited {
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	color: #FFFFFF;
	display: table-cell;
	font-family: 'Open Sans', sans-serif;
	font-size: 16px;
	height: inherit;
	padding: 5px 30px;
	text-decoration: none;
	vertical-align: bottom;
	-webkit-transition: all 0.5s ease;
	-ms-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
	-o-transition: all 0.5s ease;
	transition: all  0.5s ease;
}
.nav-second-list a:hover {
	color: #CCCCCC;
}
.nav-second-list span {
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	color: #FFFFFF;
	display: table-cell;
	font-family: 'Open Sans', sans-serif;
	font-size: 16px;
	height: inherit;
	padding: 5px 30px;
	text-decoration: none;
	vertical-align: bottom;
}

/* main */
.main {
	position: relative;
	padding-top: 300px;
}

/*------------------------------------------------------------------------------- 
 MODULE BREADCRUMB
 -------------------------------------------------------------------------------*/ 

.breadcrumb {
	margin-top: 8px;
}
.breadcrumb + * {
	margin-top: 14px;
}
.breadcrumb > li {
	float: left;
}
.breadcrumb > li + li {
	margin-left: 10px;
}
.breadcrumb > li + li:before {
	content: '>';
	margin-right: 10px;
}
.breadcrumb > li,
.breadcrumb > li a {
	color: #b4b4b4;
	font-size: 11px;
}

/*------------------------------------------------------------------------------- 
 MODULE BUTTON
 -------------------------------------------------------------------------------*/ 

.btn {
}
.btn[type="submit"],
.btn[type="button"],
.btn[type="reset"] {
	width: 100%;
}
.btn-inline {
	display: inline-block;
}
.btn:hover {
	opacity: 0.6;
}
.btn:active {
	-webkit-box-shadow: inset 0 0 2px 1px rgba(0, 0, 0, .3);
	-moz-box-shadow: inset 0 0 2px 1px rgba(0, 0, 0, .3);
	box-shadow: inset 0 0 2px 1px rgba(0, 0, 0, .3);
}
.btn-primary {
	background-color: #EF6D50;
	color: #FFF !important;
}
.btn-secondary {
	color: #FFF !important;
	background-color: #E29F8A;
}
.btn-platinum {
	color: #FFF !important;
	background-color: #bfbda7;
}
.btn-disabled {
	background-color: #F0F0F0;
	color: #969696 !important;
}
.btn-disabled:active {
	-webkit-box-shadow: none;
	-moz-box-shadow: none;
	box-shadow: none;
}
.btn-detail {
	display: table-cell;
	min-width: 180px;
	border: 1px solid #FFFFFF;
	-webkit-border-radius: 3px;
	border-radius: 5px;
	color: #FFFFFF;
	font-size: 16px;
	font-family: 'Open Sans', sans-serif;
	height: 50px;
	text-align: center;
	text-decoration: none;
	vertical-align: middle;
}
.btn-detail {
	-webkit-transition: all 0.5s ease;
	-ms-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
	-o-transition: all 0.5s ease;
	transition: all  0.5s ease;
}
.btn-detail:link {
	color: #FFFFFF;
}
.btn-detail:hover {
	background-color: #FFFFFF;
	color: #000000;
}
.btn-scroll-down {
	background-color: rgba(255,255,255,0.8);
	-webkit-border-radius: 3px;
	border-radius: 3px;
	bottom: 100px;
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	color: #656565;
	display: inline-block;
	font-size: 13px;
	height: 50px;
	left: 50%;
	margin-left: -50px;
	opacity: 0;
	padding: 5px 10px;
	position: absolute;
	text-align: center;
	text-decoration: none;
	-webkit-transform: -webkit-translate(0, 50px);
	transform: translate(0, 50px);
	-webkit-transition: -webkit-transform 1s, opacity 1s;
	transition: transform 1s, opacity 1s;
	-webkit-transition-delay: 1s, 1s;
	transition-delay: 0.5s, 0.5s;
	width: 100px;
	overflow: hidden;
}
.btn-scroll-down:after {
	border: 2px solid #656565;
	border-right-width: 0;
	border-top-width: 0;
	bottom: 10px;
	content: "";
	display: block;
	height: 10px;
	left: 50%;
	margin-left: -6.5px;
	position: absolute;
	-webkit-transform: rotate(-45deg);
	-moz-transform: rotate(-45deg);
	-ms-transform: rotate(-45deg);
	-o-transform: rotate(-45deg);
	transform: rotate(-45deg);
	-webkit-transition: all 0.5s ease;
	-ms-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
	-o-transition: all 0.5s ease;
	transition: all  0.5s ease;
	width: 10px;
}
.btn-scroll-down:hover:after {
	border: 2px solid #999999;
	border-right-width: 0;
	border-top-width: 0;
}
.btn-scroll-down.onload {
	-webkit-transition: all 0.5s ease;
	-ms-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
	-o-transition: all 0.5s ease;
	transition: all  0.5s ease;
}
.btn-scroll-down.onload {
	opacity: 1;
	-webkit-transform: -webkit-translate(0, 34px);
	transform: translate(0, 34px);
}

/*------------------------------------------------------------------------------- 
 MODULE FORM
 -------------------------------------------------------------------------------*/ 

select,
input[type="text"],
input[type="search"],
input[type="number"],
input[type="url"],
input[type="password"],
input[type="email"],
input[type="tel"],
textarea {
	border-radius: 0;
	outline: 0;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
}

/* checkbox radio */
input[type="checkbox"],
input[type="radio"] {
	display: none;
}

input[type="checkbox"] + label {
	position: relative;
	display: inline-block;
	vertical-align: top;
}

input[type="checkbox"] + label:before {
	position: relative;
	display: inline-block;
	content:" ";
	margin-right: 5px;
	margin-left: 10px;
	padding: 10px;
	border: 1px solid #DCDCDC;
}

input[type="checkbox"]:checked + label:after {
	position: absolute;
	top:  2px;
	left: 13px;
	text-decoration: inherit;
	text-transform: none;
	word-wrap: normal;
	font-weight: normal;
	font-style: normal;
	font-size: 20px;
	font-family: 'iconfont';
	line-height: 1;
	speak: none;
	text-rendering: optimizeLegibility;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}
input[type="checkbox"]:checked + label:after {
	content: "\f108";
}

input[type="radio"] + label {
	border: 1px solid #DCDCDC;
	display: block;
	text-align: center;
	padding: 10px 5px;
}
input[type="radio"]:checked + label {
	position: relative;
	background-color: #DCDCDC !important;
}
input[type="text"] {
	display: inline;
	vertical-align: middle;
}
/*------------------------------------------------------------------------------- 
 MODULE FONT
 -------------------------------------------------------------------------------*/ 

.font-condition {
	color: #AC6464;
}

.fs24	{ font-size: 24px; }
.fs21	{ font-size: 21px; }
.fs16	{ font-size: 16px; }
.fs14	{ font-size: 14px; }
.fs13	{ font-size: 13px; }
.fs12	{ font-size: 12px; }
.fs11	{ font-size: 11px; }
.fs10	{ font-size: 10px; }

/*------------------------------------------------------------------------------- 
 MODULE ANCHOR
 -------------------------------------------------------------------------------*/

.anchor-primary {
	position: relative;
	padding-left: 10px;
	font-size:40px;
}
.anchor-primary:before {
	content: '';
	position: absolute;
	top: 50%;
	left: 0;
	margin-top: -6px;
	display: block;
	width: 0;
	height: 0;
	border-color: transparent transparent transparent #333;
	border-style: solid;
	border-width: 6px;
	line-height: 1;
}
.anchor-secondary {
	position: relative;
	padding-left: 0.5em;
}
.anchor-secondary:before {
	content: '\203A';
	display: block;
	position: absolute;
	top: 50%;
	left: 0;
	line-height: 1;
	margin-top: -0.5em;
	color: #333;
	font-size: inherit;
}

.anchor-tertiary {
	position: relative;
	padding-left: 0.5em;
}
.anchor-tertiary:before {
	content: '\232a';
	display: block;
	position: absolute;
	top: 50%;
	left: 0;
	line-height: 1;
	margin-top: -0.5em;
	color: #333;
	font-size: inherit;
	-webkit-transform: scaleY(0.62);
	-moz-transform: scaleY(0.62);
	-ms-transform: scaleY(0.62);
	-o-transform: scaleY(0.62);
	transform: scaleY(0.62);
}

/*------------------------------------------------------------------------------- 
 MODULE REQUIRED
 -------------------------------------------------------------------------------*/ 

.required:after {
	content: "※必須";
	display: inline;
	color: #B45959;
	font-size: 10px;
	margin-left: 12px;
}

/*-------------------------------------------------------------------------------
 OVERLAY
 -------------------------------------------------------------------------------*/
.overlay30p {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	bottom: 0;
	background-color: rgba(0,0,0,0.3);
}
.overlay80p {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	bottom: 0;
	background-color: rgba(0,0,0,0.7);
}

/*-------------------------------------------------------------------------------
 TYPOGRAPHY WEB FONTS
 -------------------------------------------------------------------------------*/

@font-face {
	font-family: 'Open Sans';
	font-style: normal;
	font-weight: 400;
	src: local('Open Sans'), local('OpenSans'), url(//themes.googleusercontent.com/static/fonts/opensans/v6/cJZKeOuBrn4kERxqtaUH3bO3LdcAZYWl9Si6vvxL-qU.woff) format('woff');
}
@font-face	{
	font-family: 'Open Sans Condensed';
	font-style: normal;
	font-weight: 300; src: local('Open Sans Cond Light'), local('OpenSans-CondensedLight'), url(//themes.googleusercontent.com/static/fonts/opensanscondensed/v6/gk5FxslNkTTHtojXrkp-xGAzD5WKQVN4wSyA0MYYi4rr7w4p9aSvGirXi6XmeXNA.woff) format('woff');
}

/*-------------------------------------------------------------------------------
 TYPOGRAPHY WEB FONTS
 -------------------------------------------------------------------------------*/
.grid {
	overflow: hidden;
}
.grid-col:after {
	content: "";
	display: block;
	height: 0;
	clear: both;
}
.grid-col > * {
	float: left;
	padding-left: 30px;
	box-sizing: border-box;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
}
.grid-col-2 {
	margin-left: -60px;
}
.grid-col-2 > * {
	width: 50%;
	padding-left: 60px;
}
.grid-col-4 {
	margin-left: -30px;
}
.grid-col-4 > * {
	width: 25%;
	padding-left: 30px;
}
.grid-col-span-1 {
	width: 100%;
}
.grid-col-span-2 {
	width: 50%;
}
.grid-col-span-3 {
	width: 33.33%;
}

/*-------------------------------------------------------------------------------
 MEDIA QUERY
 -------------------------------------------------------------------------------*/
.x1 { display: inline-block; }
.x2 { display: none; }
.x3 { display: none; }

@media only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (min-device-pixel-ratio: 2) {
	.x1 { display: none; }
	.x2 { display: inline-block; }
	.x3 { display: none; }
}
@media only screen and (-webkit-min-device-pixel-ratio: 3),
only screen and (min-device-pixel-ratio: 3) {
	.x1 { display: none; }
	.x2 { display: none; }
	.x3 { display: inline-block; }
}
@media screen and (max-width: 1200px) {
	.container {
		padding-left: 10px;
		padding-right: 10px;
	}
}
@media screen and (max-width: 980px) {
	ul#topnavi {
		padding-left: 300px;
	}
	.nav-second-list a,
	.nav-second-list a:visited,
	.nav-second-list span {
		padding-left: 15px;
		padding-right: 15px;
		font-size: 14px;
	}
	.nav-second-list {
		height: 47px;
	}
}

/*============================ clearfix =============================*/

.clearfix:after {
    content: "."; 
    display: block; 
    height: 0; 
    clear: both; 
    visibility: hidden;
}

.clearfix {display: inline-table;}

/* Hides from IE-mac \*/
* html .clearfix {height: 1px;}
.clearfix {display: block;}
/* End hide from IE-mac */

.lineclear {
	background-image:none;
}

.clearfix { min-height: 1px; }

