@charset "UTF-8";
/* CSS Document */


/* -------------------------- RESET -------------------------- */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, b, u, i, center,
ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video, textarea, input {
	margin:0;
	padding:0;
	border:0;
	font-size: 100%;
	font:inherit;
	vertical-align: baseline;
	text-decoration:none;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {display: block;}
body {line-height: 1;}
ol, ul, li {list-style: none;}
blockquote, q {quotes: none;}
blockquote:before, blockquote:after,
q:before, q:after {content: '';content: none;}
table {border-collapse: collapse;border-spacing: 0;}
input, textarea, button{-webkit-apparence:none;border:none;background: none;outline: none;}
input:focus, textarea:focus{-webkit-apparence:none;outline: none;border:none;}
img{border:none;outline:none;vertical-align:top;font-size:0;line-height:0;}
img a{border:none;outline: none;}
a:focus{outline:none;}
hr{height:0;margin:0;padding:0;border:0;}

h1, h2, h3, h4, h5, h6, p{
	margin:0;
	padding:0;
	border:0;
	font-size:100%;
	font:inherit;
	vertical-align:baseline;
	text-decoration:none;
}
input, textarea, button{
	-webkit-apparence:none;
	border:none;
	background:none;
	outline:none;
}
a{
	-webkit-transition: all 0.3s;
	   -moz-transition: all 0.3s;
	    -ms-transition: all 0.3s;
	        transition: all 0.3s;
}
a.nohover:hover{opacity: 1.0;}
.clear:after,
ul:after,
li:after,
dl:after{
	content: "";
	display: table;
	float:none;
	clear: both;
}


* {
    -webkit-tap-highlight-color:rgba(0,0,0,0);
    -webkit-box-shadow: none;
    box-shadow: none;
    outline: none;
}

img{
	-webkit-backface-visibility:hidden;
	backface-visibility:hidden;
	width:100%;
	height:auto;
	transform: translate3d(0,0,0)
}


.clear:after{
	content: "";
	display: table;
	float:none;
	clear: both;
}






/* --------------------------------------------------------------------- */



@font-face {
	font-family: "NeueHelveticaforSpeedo-LtCn";
	src: url("/static/full/speedo/fonts/NeueHelveticaforSpeedo-LtCn.eot");
	src: url("/static/full/speedo/fonts/NeueHelveticaforSpeedo-LtCn.eot?#iefix") format("embedded-opentype"),
	url("/static/full/speedo/fonts/NeueHelveticaforSpeedo-LtCn.woff") format("woff"),
	url("/static/full/speedo/fonts/NeueHelveticaforSpeedo-LtCn.ttf") format("truetype"),
	url("/static/full/speedo/fonts/NeueHelveticaforSpeedo-LtCn.otf") format("opentype"),
	url("/static/full/speedo/fonts/NeueHelveticaforSpeedo-LtCn.svg#NeueHelveticaforSpeedo-LtCn") format("svg");
}

@font-face {
	font-family: "NeueHelveticaforSpeedo-Lt";
	src: url("/static/full/speedo/fonts/NeueHelveticaforSpeedo-Lt.eot");
	src: url("/static/full/speedo/fonts/NeueHelveticaforSpeedo-Lt.eot?#iefix") format("embedded-opentype"),
	url("/static/full/speedo/fonts/NeueHelveticaforSpeedo-Lt.woff") format("woff"),
	url("/static/full/speedo/fonts/NeueHelveticaforSpeedo-Lt.ttf") format("truetype"),
	url("/static/full/speedo/fonts/NeueHelveticaforSpeedo-Lt.otf") format("opentype"),
	url("/static/full/speedo/fonts/NeueHelveticaforSpeedo-Lt.svg#NeueHelveticaforSpeedo-Lt") format("svg");
}

@font-face {
	font-family: "NeueHelveticaforSpeedo-Rg";
	src: url("/static/full/speedo/fonts/NeueHelveticaforSpeedo-Rg.eot");
	src: url("/static/full/speedo/fonts/NeueHelveticaforSpeedo-Rg.eot?#iefix") format("embedded-opentype"),
	url("/static/full/speedo/fonts/NeueHelveticaforSpeedo-Rg.woff") format("woff"),
	url("/static/full/speedo/fonts/NeueHelveticaforSpeedo-Rg.ttf") format("truetype"),
	url("/static/full/speedo/fonts/NeueHelveticaforSpeedo-Rg.otf") format("opentype"),
	url("/static/full/speedo/fonts/NeueHelveticaforSpeedo-Rg.svg#NeueHelveticaforSpeedo-Rg") format("svg");
}

@font-face {
	font-family: "NeueHelveticaforSpeedo-Bd";
	src: url("/static/full/speedo/fonts/NeueHelveticaforSpeedo-Bd.eot");
	src: url("/static/full/speedo/fonts/NeueHelveticaforSpeedo-Bd.eot?#iefix") format("embedded-opentype"),
	url("/static/full/speedo/fonts/NeueHelveticaforSpeedo-Bd.woff") format("woff"),
	url("/static/full/speedo/fonts/NeueHelveticaforSpeedo-Bd.ttf") format("truetype"),
	url("/static/full/speedo/fonts/NeueHelveticaforSpeedo-Bd.otf") format("opentype"),
	url("/static/full/speedo/fonts/NeueHelveticaforSpeedo-Bd.svg#NeueHelveticaforSpeedo-Bd") format("svg");
}

@font-face {
	font-family: "NeueHelveticaforSpeedo-BdCn";
	src: url("/static/full/speedo/fonts/NeueHelveticaforSpeedo-BdCn.eot");
	src: url("/static/full/speedo/fonts/NeueHelveticaforSpeedo-BdCn.eot?#iefix") format("embedded-opentype"),
	url("/static/full/speedo/fonts/NeueHelveticaforSpeedo-BdCn.woff") format("woff"),
	url("/static/full/speedo/fonts/NeueHelveticaforSpeedo-BdCn.ttf") format("truetype"),
	url("/static/full/speedo/fonts/NeueHelveticaforSpeedo-BdCn.otf") format("opentype"),
	url("/static/full/speedo/fonts/NeueHelveticaforSpeedo-BdCn.svg#NeueHelveticaforSpeedo-BdCn") format("svg");
}

@font-face {
	font-family: "NeueHelveticaforSpeedo-MdCn";
	src: url("/static/full/speedo/fonts/NeueHelveticaforSpeedo-MdCn.eot");
	src: url("/static/full/speedo/fonts/NeueHelveticaforSpeedo-MdCn.eot?#iefix") format("embedded-opentype"),
	url("/static/full/speedo/fonts/NeueHelveticaforSpeedo-MdCn.woff") format("woff"),
	url("/static/full/speedo/fonts/NeueHelveticaforSpeedo-MdCn.ttf") format("truetype"),
	url("/static/full/speedo/fonts/NeueHelveticaforSpeedo-MdCn.otf") format("opentype"),
	url("/static/full/speedo/fonts/NeueHelveticaforSpeedo-MdCn.svg#NeueHelveticaforSpeedo-MdCn") format("svg");
}




/* --------------------------------------------------------------------- */



body{
	height:100%;
	margin:0px;
	padding:0px;
	text-align:center;
	color:#0A1317;
	font-size:12px;
	line-height:1.7;
	font-family:'Noto Sans Japanese', "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-weight:300;
	font-feature-setting :"pkna"	background:#FFF;
}

.fixed {position: fixed;width:100%; height:100%;}

.main{
	width:100%;
	height:100%;
	position:relative;
}

#loader-bg{
  display:block;
  position:fixed;
  width:100%;
  height:100vh;
  min-height:100vh;
  top:0px;
  left:0px;
  background:#FFF;
  z-index:1000;
  overflow:hidden;

}
a{
	-webkit-transition: all 0.3s;
	   -moz-transition: all 0.3s;
	    -ms-transition: all 0.3s;
	        transition: all 0.3s;
}
.inview{
	position:relative;
	filter:alpha(opacity=0);
	-webkit-opacity:0.0;
	-moz-opacity:0.0;
	-ms-opacity:0.0;
	opacity:0.0;
	top:50px;
}




/* --------------------------------------------------------------------- */





#mainTitle{
	width:100%;
	height:100vh;
	min-width:100%;
	min-height:100vh;
	left:0;
	top:0;
	bottom:0;
	right:0;
	position:relative;
	box-sizing:border-box;
	overflow:hidden;
	text-align:left;
	margin:0;
	background:url(/static/full/speedo/speedo_workout/images/mainimage_pc.jpg) center center no-repeat;
	background-size:cover;
}



#mainTitle .titleInner{
	position:absolute;
	top:48%;
	left:0;
	right:0;
	margin:auto;
	text-align:center;
	z-index:5;
	-webkit-transform:translateY(-50%);
	   -moz-transform:translateY(-50%);
	    -ms-transform:translateY(-50%);
	        transform:translateY(-50%);
}




#mainTitle .titleInner h1{
	position:relative;
	width:70%;
	max-width:550px;
	margin:0 auto;
	text-align:center;
}

#mainTitle .titleInner p{
	font-size:5.0em;
	color:#FFF;
}



#mainTitle .titleInner .videoButton{
	width:12%;
	max-width:100px;
	height:12%;
	max-height:100px;
	margin:30px auto 0;
	position:relative;
	line-height:0;

}

#mainTitle .titleInner .videoButton:after{
	content:"";
	position:absolute;
	top:0;
	left:0;
	bottom:0;
	right:0;
	border:3px solid #1966CD;
	z-index:5;
	-webkit-border-radius:50%;
	   -moz-border-radius:50%;
	    -ms-border-radius:50%;
	        border-radius:50%;
	-webkit-transition: all 0.25s;
	   -moz-transition: all 0.25s;
	    -ms-transition: all 0.25s;
	        transition: all 0.25s;
}
#mainTitle .titleInner .videoButton span{
	display:block;
	margin:0 auto;
	padding:25%;
	box-sizing:border-box;
	position:relative;
	z-index:10;
}

#mainTitle .titleInner .videoButton:hover:after{
	top:-7px;
	left:-7px;
	bottom:-7px;
	right:-7px;
	background:rgba(255,255,255,0.7);
}




#mainTitle .logo{
	width:140px;
	position:absolute;
	top:20px;
	left:20px;
}






.copy{
	margin:8% 0;
}

.copy h2{
	font-size:2.5em;
	font-weight:300;
	line-height:1.8;
	margin-bottom:1.2em;
}

.copy h2 br{
	display:none;
}

.copy h3{
	font-size:1.6em;
	font-weight:200;
	line-height:2.5;
	margin-top:1.2em;
}

.copy h3 br.res{
	display:none;
}








.imageSet{
	width:100%;
	max-width:1300px;
	margin:0 auto;
}

.imageSet li{
	padding:5px 10px;
	box-sizing:border-box;
}











.itemSpec{
	width:90%;
	max-width:750px;
	margin:3% auto 10%;
	line-height:1.2;
}

.itemSpec .tops{
	width:40%;
	float:left;
	padding-bottom:25px;
	border-bottom:1px solid #000;
}
.itemSpec .bottoms{
	width:40%;
	float:right;
	padding-bottom:25px;
	border-bottom:1px solid #000;
}


.itemSpec .category{
	width:100%;
	border-bottom:1px solid #000;
	text-align:left;
	font-family: "NeueHelveticaforSpeedo-Bd";
	letter-spacing:0.03em;
	font-size:1.1em;
	padding-bottom:5px;
	margin-bottom:20px;
}

.itemSpec h2{
	font-family: "NeueHelveticaforSpeedo-Rg";
	font-size:1.4em;
	padding-bottom:3px;
}

.itemSpec h4{
	font-family: "NeueHelveticaforSpeedo-Rg";
	font-size:1.1em;
	margin-top:10px;
}

.itemSpec .buy{
	margin-top:20px;
}
.itemSpec .buy a{
	background:#000;
	color:#FFF;
	font-family: "NeueHelveticaforSpeedo-Rg";
	font-size:1.1em;
	line-height:1;
	padding:5px 10px;
	-webkit-border-radius:3px;
	   -moz-border-radius:3px;
	    -ms-border-radius:3px;
	        border-radius:3px;
}
.itemSpec .buy a:hover{
	background:#EE3224;
}










.style{
	width:100%;
	margin:0 auto;
	max-width:1300px;
	padding:0 10px;
	box-sizing:border-box;
}
.style h2{
	font-family: "NeueHelveticaforSpeedo-Bd";
	font-size:2.5em;
	letter-spacing:0.03em;
	margin-bottom:4%;
}

.style .styleImg{
	width:100%;
}


.style .styleImg .style01{
	width:50%;
	float:left;
	padding-right:5px;
	box-sizing:border-box;
}

.style .styleImg .style02{
	width:50%;
	float:right;
	padding-left:5px;
	box-sizing:border-box;
}


.style .linkbutton{
	margin-top:20px;
}
.style .linkbutton a{
	color:#0A1317;
	width:100%;
	display:block;
	font-size:1.5em;
	padding:20px 0;
	box-sizing:border-box;
	border:1px solid #0A1317;
}
.style .linkbutton a span{
	font-family: "NeueHelveticaforSpeedo-Rg";
	font-size:1.1em;
	padding-right:5px;
}

.style .linkbutton a:hover{
	color:#EE3224;
	border-color:#EE3224;
}






.credit{
	width:100%;
	max-width:1300px;
	margin:0 auto 20px;
	font-size:0.91em;
	line-height:1.5;
	box-sizing:border-box;
}

.credit p{
	margin:0.8em 0;
}
.credit p br.res{
	display:none;
}
.credit .en{
	font-family: "NeueHelveticaforSpeedo-Rg";
}




footer{
	margin:8% 0 8%;
}
footer .logo{
	width:200px;
	margin:0 auto;
}





@media (max-width: 950px) {
.copy{margin:10% 0;}
.copy h2{font-size:2.3em;}
.copy h3{font-size:1.4em;}
}




@media (max-width: 768px) {

#mainTitle{
	background:url(/static/full/speedo/speedo_workout/images/mainimage_sp.jpg) center center no-repeat;
	background-size:cover;
}


#mainTitle .titleInner{top:48%;}
#mainTitle .titleInner h1{width:80%;}
#mainTitle .titleInner .videoButton{width:13%;height:13%;margin:4% auto 0;}
#mainTitle .logo{width:20%;top:15px;left:0;right:0;margin:0 auto;}
#mainTitle .titleInner .videoButton:after{ background:rgba(255,255,255,0.6);}

.copy{margin:12% 0;}
.copy h2{font-size:3.4vw;}
.copy h3{font-size:2.2vw;}


.itemSpec{width:88%;margin:4% auto 15%;}
.itemSpec .tops{width:47%;}
.itemSpec .bottoms{width:47%;}

.style h2{font-size:2.2em;}
.style .linkbutton a{font-size:1.3em;}


footer{margin:10% 0;}
footer .logo{width:20%;}



}


@media (max-width: 620px) {

#mainTitle .titleInner .videoButton{width:15%;height:15%;margin:5% auto 0;}
.copy{margin:15% 0;}
.copy h2{font-size:3.7vw; font-weight:500;}
.copy h3{font-size:2.7vw; font-weight:300;}

.itemSpec{width:90%;margin:0 auto 17%;}
.itemSpec .tops{
	width:100%;
	float:none;
	border:none;
	margin-top:8%;
}
.itemSpec .bottoms{
	width:100%;
	float:none;
	border:none;
	margin-top:8%;
}

.itemSpec .category{
	width:auto;
	display:inline-block;
	text-align:center;
	margin:0 auto 20px;
}
.itemSpec h2{
	font-size:1.3em;
}

.style h2{font-size:2.0em;}


.style .styleImg .style01{
	width:100%;
	float:none;
	margin-bottom:10px;
	padding-right:0;
}

.style .styleImg .style02{
	width:100%;
	float:none;
	padding-left:0;
}

.style .linkbutton a{font-size:2.8vw;padding:25px 0;}

footer{margin:13% 0;}
footer .logo{width:25%;}

}



@media (max-width: 480px) {

#mainTitle .titleInner h1{width:88%;}
#mainTitle .logo{width:29%;}
#mainTitle .titleInner .videoButton{width:17%;height:17%;margin:6% auto 0;}
#mainTitle .titleInner .videoButton:after{ border-width:2px;}

.copy h2{font-size:4.9vw;}
.copy h2 br{display:block;}
.copy h3{font-size:3.6vw;text-align:left;width:90%;margin:0 auto;line-height:2.0; margin-top:1em;}
.copy h3 br{display:none;}


.imageSet li{padding:2px 8px;}


.itemSpec{font-size:0.91em;}

.style{padding:0 8px;}
.style .linkbutton a{font-size:3.8vw;}
.style .styleImg .style01{margin-bottom:8px;}


footer .logo{width:36%;}


.credit{font-size:0.82em;}
.credit p br.res{display:block;}
.credit p  span{display:none;}



}