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




.main.swimwearnaviTop{
	padding-bottom:0;
}
.main.swimwearnaviIN{
	padding-bottom:0;
}




.topMainImageTitle{
	width:100%;
	background:url(../swimwearnavi/images/topmainimg.jpg) center center no-repeat;
	background-size:cover;
	padding-top:43%;
	position:relative;
}



.topMainImageTitle h2{
	position:absolute;
	top:50%;
	left:0;
	right:0;
	width:90%;
	margin:0 auto;
	color:#000;
	line-height:1.1;
	font-family: "NeueHelveticaforSpeedo-Bd";
	font-size:5.2vw;
	-webkit-transform:translateY(-50%);
	   -moz-transform:translateY(-50%);
	    -ms-transform:translateY(-50%);
	        transform:translateY(-50%);

}



@media (max-width: 980px) {
.topMainImageTitle h2{font-size:5.8vw;}
}

@media (max-width: 768px) {
.topMainImageTitle{width:100%;padding:27% 0;position:relative;}
.topMainImageTitle h2{
	text-align:center;
	font-size:7.0vw;
	padding:0;
	position:absolute;
	top:50%;
	left:0;
	right:0;
	-webkit-transform:translateY(-50%);
	   -moz-transform:translateY(-50%);
	    -ms-transform:translateY(-50%);
	        transform:translateY(-50%);
}
}

@media (max-width: 720px) {

}
@media (max-width: 540px) {
.topMainImageTitle{padding:35% 0;}
.topMainImageTitle h2{font-size:8.5vw;}
}





.topLead{
	padding:70px 0;
	background:-webkit-gradient(radial, center center, 10, center center, 150, from(#FFFFFF), to(#CED7E1));
    background:-webkit-radial-gradient(center, circle cover, #FFFFFF 10%, #CED7E1 150%);
    background:-moz-radial-gradient(center, circle cover, #FFFFFF 10%, #CED7E1 150%);
    background:-o-radial-gradient(center, circle cover, #FFFFFF 10%, #CED7E1 150%);
    background:radial-gradient(#FFFFFF 10%, #CED7E1 150%);
}
.topLead h2{
	font-size:2.5em !important;
	text-align:center;
	font-weight:bold !important;
}
.topLead h2 br{
	display:none;
}
.leadText{
	width:90%;
	max-width:800px;
	font-size:1.3em;
	line-height:1.8;
	text-align:center;
	margin:1.5em auto 3em;
}
.itemIcon{
	width:70%;
	max-width:420px;
	margin:0 auto;
}



.topSceneList{
	width:94%;
	max-width:1100px;
	margin:80px auto 0;
	overflow:hidden;
	color:#323232;
}
.topSceneList ul{
	width:103%;
	text-align:left;
	font-size:0;
}
.topSceneList ul li{
	width:47%;
	margin-right:3%;
	margin-bottom:50px;
	font-size:12px;
	display:inline-block;
	vertical-align:top;
	text-align:center;
}

.topSceneList h2{
	font-family: "NeueHelveticaforSpeedo-Bd";
	font-size:2.7em;
	line-height:1.1;
	margin-top:0.6em;
}
.topSceneList h2 span{
	font-size:0.7em;
}
.topSceneList h3{
	font-size:1.3em;
	margin-top:0.7em;
}
.topSceneList .redButton a{
	padding:0.7em 2.5em 0.7em;
	font-size:1.3em;
}

.topSceneList a:hover img{
	filter:alpha(opacity=100);
	-webkit-opacity:1.0;
	   -moz-opacity:1.0;
	        opacity:1.0;
}


/* ============================================================================================ 
=
= 【PC版】RaNa Extractive 独自作成箇所（2022/04/22）
=  swimwearnaviTop
=
==============================================================================================*/
.main.swimwearnaviIN {
	position: relative;
	padding-top: calc((721/1430)*100vw);
	background-color: #eaeaea;
}
.main.swimwearnaviTop *,
.main.swimwearnaviIN * {
	font-feature-settings : "palt";
}
.swimwearnaviTop {
	position: relative;
	background-color: #eaeaea;
}
.swimwearnaviTop + .page__footer .speedoFooter,
.main.swimwearnaviIN + .page__footer .speedoFooter {
	margin-top: 0;
}
.swimwearnaviStartBody {
	/*padding-top: 140px;*/
}
.swimwearnaviStartBody.is-hidden {
	/*display: block;*/
	opacity: 0;
	visibility: hidden;
	transition: opacity .4s ease, visibility .4s ease;
}
.swimwearnaviStartBodyInner {
	position: relative;
	padding-top: calc((632/1430)*100vw);
	transition: padding-top .4s ease;
}
.swimwearnaviStartBody.is-hidden .swimwearnaviStartBodyInner {
	padding-top: calc((721/1430)*100vw);
	transition: padding-top .4s ease;
}
.swimwearnaviStartBodyItem {
	position: absolute;
	left: 0;
	top: 0;
	margin-top: calc((133/1430)*100vw);
	margin-left: calc((96/1430)*100vw);
}
.swimwearnaviStartBody h2{
	width: calc((493/1430)*100vw);
}
.swimwearnaviStartBody h2 img{
	width: 100%;
}
.swimnavi_start {
	padding-top: calc((32/1430)*100vw);
	padding-bottom: calc((31/1430)*100vw);
	margin-top: calc((30/1430)*100vw);
	width: calc((467/1430)*100vw);
	background-color: #fff;
	cursor: pointer;
	border-radius: 8px;
	box-shadow: 8px 8px 16px rgba(0,0,0,0.06);
	transition: box-shadow .4s ease;
}
.swimnavi_start:hover {
	box-shadow: 8px 8px 16px rgba(0,0,0,0.23);
	transition: box-shadow .4s ease;
}
.swimnavi_start span {
	display: block;
	font-family: "NeueHelveticaforSpeedo-Bd";
	font-size: calc((31/1430)*100vw);
	line-height: 1;
	text-align: center;
}
.swimwearnaviStartBodyBg {
	position: absolute;
	right: 0;
	top: 0;
	width: calc((769/1430)*100vw);
	height: 100%;
	overflow: hidden;
}
.swimwearnaviStartBodyBg:before {
	display: block;
	content: '';
	position: absolute;
	left: 0;
	top: 0;
	margin-top: calc((-140/1430)*100vw);
	width: calc((769/1430)*100vw);
	height: calc((1047/1430)*100vw);
	background:url(../swimwearnavi/images/swim_bg.png) center center no-repeat;
	background-size:contain;
}

.swimwearnaviBody {
	position: absolute;
	left: 0;
	top: 0;
	/*margin-top: 140px;*/
	/*display: none;*/
	width: 100%;
	height: 100%;
	opacity: 0;
	visibility: hidden;
	transition: opacity .4s ease, visibility .4s ease;
}
.swimwearnaviBody.is-active {
	/*display: block;*/
	opacity: 1;
	visibility: visible;
	transition: opacity .4s ease, visibility .4s ease;
}
.swimwearnaviBodyInner {
	position: relative;
	height: 100%;
}
.itemQuestion {
	/*display: none;*/
	/*position: absolute;
	left: 50%;
	top: 0;
	transform: translateX(-50%);*/
	/*margin-top: calc((-65/1430)*100vw);*/
	/*margin-top: -65px;*/
	opacity: 0;
	visibility: hidden;
	transition: opacity .4s ease, visibility .4s ease;
}
/*.itemQuestionBody {
	width: 1265px;
	margin-left: -40px;
}*/
.itemQuestionHead {
	position: absolute;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  margin-top: calc((65/1430)*100vw);
	text-align: center;
}
.itemQuestionNum {
	/*padding: 9px 0;*/
	padding-top: calc((9/1430)*100vw);
	padding-bottom: calc((9/1430)*100vw);
	margin: 0 auto;
	/*width: 58px;*/
	width: calc((58/1430)*100vw);
	background-color: #000;
	border-radius: 8px;
	font-family: "NeueHelveticaforSpeedo-Bd"!important;
	/*font-size: 22px;*/
	font-size: calc((22/1430)*100vw);
	line-height: 1;
	color: #F1F6FA;
}
.itemQuestionHeading {
	margin-top: calc((14/1430)*100vw);
	font-size: calc((32/1430)*100vw);
	/*margin-top: 14px;*/
	/*font-size: 32px;*/
	line-height: 1.5;
}

.itemQuestion.is-active {
	/*display: block;*/
	opacity: 1;
	visibility: visible;
	transition: opacity .4s ease, visibility .4s ease;
}
.itemQuestionBody {
	position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  margin-top: calc((48/1430)*100vw);
	width: calc((830/1430)*100vw);
	/*width: 830px;*/
}
#itemQuestion01 .itemQuestionBody {
	margin-top: calc((4/1430)*100vw);
	width: calc((1265/1430)*100vw);
	/*width: 1265px;*/
}
.itemQuestionList {
	display: flex;
	flex-wrap: wrap;
	margin-top: calc((-40/1430)*100vw);
	margin-left: calc((-40/1430)*100vw);
	/*margin-left: -40px;*/
	/*max-width: 830px;*/
	/*width: 830px;*/
	/*width: 100%;*/
	/*width: calc((830/1430)*100vw)*/
}
#itemQuestion01 .itemQuestionList {
	/*max-width: 1265px;*/
	/*width: 1265px;*/
	/*width: 100%;*/
	/*width: calc((1265/1430)*100vw);*/
}
.itemQuestionList li {
	display: inline-flex;
	align-items: center;
	margin-top: calc((40/1430)*100vw);
	margin-left: calc((40/1430)*100vw);
	width: calc((395/1430)*100vw);
	/*margin-left: 40px;
	width: 395px;*/
	background-color: #f5f5f5;
	vertical-align: top;
	cursor: pointer;
	overflow: hidden;
	border-radius: 8px;
	box-shadow: 8px 8px 16px rgba(0,0,0,0.06);
	transition: box-shadow .4s ease;
}
.itemQuestionList li:hover {
	box-shadow: 8px 8px 16px rgba(0,0,0,0.23);
	transition: box-shadow .4s ease;
}
/*#itemQuestion01 .itemQuestionList li:nth-of-type(n+4) {
	margin-top: 40px;
	margin-top: calc((40/1430)*100vw);
}*/
.itemQuestionList li a {
	display: flex;
	align-items: center;
}
.itemQuestionImg {
	position: relative;
	padding-top: calc((140/1430)*100vw);
	width: calc((165/1430)*100vw);
	overflow: hidden;
}
#itemQuestion01 .itemQuestionImg,
.goggle .itemQuestionImg {
	width: calc((145/1430)*100vw);
}
.itemQuestionImgBody {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
}
.itemQuestionTexts {
	position: relative;
	padding-left: calc((25/1430)*100vw);
	padding-right: calc((13/1430)*100vw);
	width: calc(100% - ((165/1430)*100vw));
}
#itemQuestion01 .itemQuestionTexts,
.goggle .itemQuestionTexts {
	width: calc(100% - ((145/1430)*100vw));
}
#itemQuestion01.itemQuestionTexts {
	padding-right: calc((21/1430)*100vw);
}
.itemQuestionSubTtl {
	font-family: "NeueHelveticaforSpeedo-Bd"!important;
	/*font-size: 14px;*/
	font-size: calc((14/1430)*100vw);
	line-height: 1;
	letter-spacing: .02em;
	color: #5f5f5f;
}
.itemQuestionTtl {
	/*font-size: 20px;*/
	font-size: calc((20/1430)*100vw);
	line-height: 1.3;
	letter-spacing: .02em;
}
#itemQuestion02 .itemQuestionTtl span{
	display: block;
}
.itemQuestionText {
	margin-top: calc((9/1430)*100vw);
	font-size: calc((14/1430)*100vw);
	line-height: 1.429;
	letter-spacing: .02em;
}
.itemQuestionTexts .itemLogo {
	display: block;
	margin-top: calc((8/1430)*100vw);
	margin-left: auto;
	margin-right: calc((2/1430)*100vw);
	width: calc((49/1430)*100vw);
}
#itemQuestion01 .itemQuestionTexts .itemLogo {
	margin-right: calc((10/1430)*100vw);
}
.itemQuestionSubTtl + .itemQuestionTtl {
	/*margin-top: 7px;*/
	margin-top: calc((7/1430)*100vw);
}
.questionPrev {
	padding-top: calc((10/1430)*100vw);
	padding-bottom: calc((10/1430)*100vw);
	margin-top: calc((50/1430)*100vw);
	margin-left: auto;
	margin-right: auto;
	width: calc((223/1430)*100vw);
	background-color: #fff;
	border-radius: 4px;
	box-shadow: 6px 6px 12px rgba(0,0,0,0.06);
	transition: box-shadow .4s ease;
	font-size: calc((18/1430)*100vw);
	line-height: 1;
	text-align: center;
	cursor: pointer;
}
.questionPrev:hover {
	box-shadow: 6px 6px 12px rgba(0,0,0,0.23);
	transition: box-shadow .4s ease;
}

.itemGender a {
	position: relative;
	padding-top: calc((140/1430)*100vw);
	width: 100%;
}
.itemGender a span {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%,-50%);
	display: block;
	font-size: calc((20/1430)*100vw);
	font-weight: 500;
}



/* ============================================================================================ 
=
=  END
= 【PC版】RaNa Extractive 独自作成箇所（2022/04/22）
=  swimwearnaviTop
=
==============================================================================================*/






@media (max-width: 980px) {

.topSceneList{margin:6% auto 0;}
.topSceneList h3{width:90%;margin-left:auto;margin-right:auto;}
.topSceneList h3 br{display:none;}
.topSceneList ul li{margin-bottom:5%;}

}


@media (max-width: 768px) {
.topSceneList h2{font-size:2.3em;}
.topSceneList h3{font-size:1.2em;}

/* ============================================================================================ 
=
= 【SP版】RaNa Extractive 独自作成箇所（2022/04/22）
=  swimwearnaviTop
=
==============================================================================================*/
.main.swimwearnaviIN {
	padding-top: 0;
}
.swimwearnaviTop {
	position: relative;
	background-color: #eaeaea;
}
.swimwearnaviTop + .page__footer .speedoFooter,
.main.swimwearnaviIN + .page__footer .speedoFooter {
	margin-top: 0;
}
.swimwearnaviStartBody {
	/*padding-top: 140px;*/
}
.swimwearnaviStartBody.is-hidden {
	display: none;
	opacity: 0;
	visibility: hidden;
	transition: opacity .4s ease, visibility .4s ease;
}
.swimwearnaviStartBodyInner {
	position: relative;
	padding-top: calc((464/375)*100vw);
	transition: padding-top .4s ease;
}
.swimwearnaviStartBody.is-hidden .swimwearnaviStartBodyInner {
	padding-top: 0;
}
.swimwearnaviStartBodyItem {
	position: absolute;
	left: 0;
	top: 0;
	margin-top: calc((37/375)*100vw);
	margin-left: calc((37/375)*100vw);
}
.swimwearnaviStartBody h2{
	width: calc((268/375)*100vw);
}
.swimnavi_start {
	position: relative;
	padding-top: calc((21/375)*100vw);
	padding-bottom: calc((19/375)*100vw);
	margin-top: calc((218/375)*100vw);
	margin-left: auto;
	margin-right: auto;
	width: calc((301/375)*100vw);
	z-index: 2;
}
.swimnavi_start span {
	font-family: "NeueHelveticaforSpeedo-Bd"!important;
	font-size: calc((20/375)*100vw);
}
.swimwearnaviStartBodyBg {
	position: absolute;
	left: 0;
	bottom: 0;
	right: auto;
	top: auto;
	width: 100%;
	height: calc((300/375)*100vw);
	overflow: hidden;
}
.swimwearnaviStartBodyBg:before {
	display: block;
	content: '';
	position: absolute;
	left: 0;
	bottom: 0;
	margin-top: 0;
	width: 100%;
	height: calc((305/375)*100vw);
	background:url(../swimwearnavi/images/swim_bg_sp.png);
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
}

.swimwearnaviBody {
	position: relative;
  left: auto;
  top: auto;
  padding-top: calc((33/375)*100vw);
	padding-bottom: calc((74/375)*100vw);
	padding-left: calc((33/375)*100vw);
	padding-right: calc((33/375)*100vw);
}
.swimwearnaviTop .swimwearnaviBody {
	display: none;
}
.swimwearnaviTop .swimwearnaviBody.is-active {
	display: block;
}
.swimwearnaviBodyInner {
	position: relative;
	height: 100%;
}
.itemQuestion {
	display: none;
	opacity: 0;
	visibility: hidden;
	transition: opacity .4s ease, visibility .4s ease;
}
.itemQuestion.is-active {
	display: block;
}
.itemQuestionHead {
	position: relative;
  left: auto;
  top: auto;
  transform: inherit;
  margin-top: 0;
}
.itemQuestionNum {
	padding-top: calc((8/375)*100vw);
	padding-bottom: calc((6/375)*100vw);
	width: calc((36/375)*100vw);
	font-size: calc((14/375)*100vw);
}
.itemQuestionHeading {
	margin-top: calc((15/375)*100vw);
	font-size: calc((24/375)*100vw);
}

.itemQuestionBody {
	position: relative;
  left: auto;
  top: auto;
  transform: inherit;
  padding-left: 0;
  margin-top: calc((15/375)*100vw);
	width: 100%;
}
#itemQuestion01 .itemQuestionBody {
	margin-top: calc((15/375)*100vw);
	width: 100%;
}
.itemQuestionList {
	display: block;
	margin-top: calc((17/375)*100vw);;
	margin-left: 0;
}
.itemQuestionList li {
	margin-top: calc((17/375)*100vw);
	margin-left: 0;
	width: 100%;
}
.itemQuestionList li a {
	display: flex;
	align-items: center;
	width: 100%;
}
.itemQuestionImg {
	position: relative;
	padding-top: calc((91/375)*100vw);
	width: calc((100/375)*100vw);
}
#itemQuestion01 .itemQuestionImg {
	width: calc((100/375)*100vw);
}
.goggle .itemQuestionImg {
	width: calc((110/375)*100vw);
}
.itemQuestionImgBody {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
}
.itemQuestionTexts {
	padding-left: calc((16/375)*100vw);
	padding-right: calc((26/375)*100vw);
	width: calc(100% - ((100/375)*100vw));
}
#itemQuestion01 .itemQuestionTexts {
	width: calc(100% - ((100/375)*100vw));
}
.goggle .itemQuestionTexts {
	width: calc(100% - ((110/375)*100vw));
}
#itemQuestion01 .itemQuestionTexts {
	padding-right: calc((11/375)*100vw);
}
.itemQuestionSubTtl {
	font-size: calc((10/375)*100vw);
}
.itemQuestionTtl {
	font-size: calc((15/375)*100vw);
}
#itemQuestion02 .itemQuestionTtl span{
	display: block;
}
.itemQuestionText {
	margin-top: calc((7/375)*100vw);
	font-size: calc((10/375)*100vw)
}
.itemQuestionTexts .itemLogo {
	margin-top: calc((-9/375)*100vw);
	margin-right: calc((7/375)*100vw);
	width: calc((39/375)*100vw);
}
#itemQuestion01 .itemQuestionTexts .itemLogo {
	margin-top: calc((-9/375)*100vw);
	margin-right: calc((7/1430)*100vw);
}
#itemQuestion04 .itemQuestionTexts .itemLogo {
	margin-top: calc((11/375)*100vw);
	margin-right: calc((10/1430)*100vw);
}
.itemQuestionSubTtl + .itemQuestionTtl {
	margin-top: calc((3/375)*100vw);
}
.questionPrev {
	padding-top: calc((11/375)*100vw);
	padding-bottom: calc((11/375)*100vw);
	margin-top: calc((40/375)*100vw);
	width: calc((162/375)*100vw);
	font-size: calc((12/375)*100vw);
}

.itemGender a {
	position: relative;
	padding-top: calc((55/375)*100vw);
	width: 100%;
}
.itemGender a span {
	font-family: "NeueHelveticaforSpeedo-Bd"!important;
	font-size: calc((16/375)*100vw);
}
#footer .footer .footer-inner,
footer.footer .footer-inner {
	padding-top: 0!important;
}
.speedoFooter {
	margin-top: 0!important;
}



/* ============================================================================================ 
=
=  END
= 【SP版】RaNa Extractive 独自作成箇所（2022/04/22）
=  swimwearnaviTop
=
==============================================================================================*/


}

@media (max-width: 720px) {

.topLead{padding:11% 0;}
.topLead h2{font-size:2.2em !important;}
.leadText{font-size:1.25em;text-align:left;}
.leadText br.del{display:none;}

.topSceneList{width:80%; margin-top:10%;}
.topSceneList ul{width:100%;}
.topSceneList ul li{width:100%;margin-right:0%;margin-bottom:10%;}
.topSceneList h2{font-size:2.6em;}
.topSceneList h3 br{display:block;}

}

@media (max-width: 540px) {

.topLead h2{font-size:1.9em !important;}
.topLead h2 br{display:block;}

.leadText{font-size:1.15em;margin:1.0em auto 2.3em;}
.itemIcon{width:80%;}

.topSceneList{width:90%; margin-top:5%;}
.topSceneList h2{font-size:2.2em;}
.topSceneList h3 br{display:none;}

}







/* ---------------------------------------- IN ---------------------------------------- */

.inMainImageTitle{
	padding-top:40%;
	position:relative;
}
.inMainImageTitle.racing{
	width:100%;
	background:url(../swimwearnavi/images/racing.jpg) center center no-repeat;
	background-size:cover;
}
.inMainImageTitle.everyday{
	width:100%;
	background:url(../swimwearnavi/images/everyday.jpg) center center no-repeat;
	background-size:cover;
}
.inMainImageTitle.active{
	width:100%;
	background:url(../swimwearnavi/images/active.jpg) center center no-repeat;
	background-size:cover;
}
.inMainImageTitle.comfort{
	width:100%;
	background:url(../swimwearnavi/images/comfort.jpg) center center no-repeat;
	background-size:cover;
}
.inMainImageTitle.aqua{
	width:100%;
	background:url(../swimwearnavi/images/aqua.jpg) center center no-repeat;
	background-size:cover;
}
.inMainImageTitle.outdoor{
	width:100%;
	background:url(../swimwearnavi/images/outdoor.jpg) center center no-repeat;
	background-size:cover;
}


.inMainImageTitle h2{
	margin:0 auto;
	text-align:center;
	color:#FFF;
	line-height:1.1;
	font-family: "NeueHelveticaforSpeedo-Bd";
	font-size:5.5vw;
	position:absolute;
	top:50%;
	left:0;
	right:0;
	-webkit-transform:translateY(-50%);
	   -moz-transform:translateY(-50%);
	    -ms-transform:translateY(-50%);
	        transform:translateY(-50%);
}

.inMainImageTitle h2.shadow{
	-webkit-text-shadow:1px 1px 7px rgba(0,0,0,0.4);
	   -moz-text-shadow:1px 1px 7px rgba(0,0,0,0.4);
	    -ms-text-shadow:1px 1px 7px rgba(0,0,0,0.4);
	     -o-text-shadow:1px 1px 7px rgba(0,0,0,0.4);
	        text-shadow:1px 1px 7px rgba(0,0,0,0.4);
}





.sceneInfo{
	width:100%;
	margin:0 auto;
	padding:80px 5% 140px;
	font-size:1.3em;
	box-sizing: border-box;
	background:url(../swimwearnavi/images/bk_line.png) bottom center no-repeat;
}
.sceneInfo h3{
	font-size:1.9em;
	font-weight:bold;
	text-align:center;
	line-height:1.4;
}
.sceneInfo h3 br{
	display:none;
}
.sceneInfo p{
	text-align:center;
	line-height:2.0;
	margin-top:1.2em;
}








@media (min-width: 1300px) {
/*.inMainImageTitle h2{padding:180px 0;}*/
}


@media (max-width: 980px) {
.inMainImageTitle{padding-top:45%;}
.inMainImageTitle h2{font-size:5.8vw;}

}

@media (max-width: 768px) {
.inMainImageTitle{padding-top:55%;}
.inMainImageTitle h2{font-size:6.8vw;}
.sceneInfo{font-size:1.2em;padding:60px 0 130px;}
}


@media (max-width: 720px) {
.sceneInfo{padding:50px 0;background:none;border-bottom:1px solid #CBD5DF;}
.sceneInfo h3{font-size:1.7em;}
.sceneInfo p{
	text-align:left;
	width:90%;
	margin-left:auto;
	margin-right:auto;
}
.sceneInfo p br{display:none;}
}

@media (max-width: 580px) {
.inMainImageTitle{padding-top:65%;}
.inMainImageTitle h2{font-size:7.8vw;}


.sceneInfo{font-size:15px;padding:55px 0;}
.sceneInfo h3{font-size:24px;}
.sceneInfo h3 br{display:block;}

}


@media (max-width: 480px) {
.inMainImageTitle h2{font-size:8.0vw;}
.sceneInfo h3{font-size:23px;}
}













.stepAllBox{
	width:100%;
}

.stepAllBox h2{
	font-family: "NeueHelveticaforSpeedo-Bd";
	font-size:3.0em;
	line-height:1.1;
	margin-top:0.6em;
}

.stepAllBox h3{
	font-size:1.3em;
	margin-top:0.8em;
}







.step01{
	text-align:center;
	padding:30px 0 150px;
	position:relative;
	background:url(../swimwearnavi/images/bk_line.png) bottom center no-repeat;
}

.step01 .snInner{
	width:90%;
	max-width:1100px;
	margin:0 auto;
	color:#323232;
}

.step01 ul{
	width:100%;
	margin-top:60px;
	text-align:center;
	font-size:0;
}
.step01 ul li{
	width:38%;
	max-width:180px;
	margin:0 5%;
	font-size:12px;
	line-height:1;
	display:inline-block;
	cursor:pointer;
	vertical-align:top;
	background:#FFF;
	-webkit-border-radius:50%;
	   -moz-border-radius:50%;
	    -ms-border-radius:50%;
	        border-radius:50%;
	-webkit-transition:background 0.3s;
	   -moz-transition:background 0.3s;
	    -ms-transition:background 0.3s;
	        transition:background 0.3s;
}

.step01 ul.three li{
	margin:0 2%;
}


.select li .iconPC{
	width:100%;
	position:relative;
	box-sizing:border-box;
	overflow:visible;
	padding-bottom:2px;

}
.select li .iconPC span{
	display:block;
	overflow:hidden;
	position:relative;
	top:0;
	z-index:3;
	-webkit-border-radius:50%;
	   -moz-border-radius:50%;
	    -ms-border-radius:50%;
	        border-radius:50%;
	-webkit-transition:top 0.3s;
	   -moz-transition:top 0.3s;
	    -ms-transition:top 0.3s;
	        transition:top 0.3s;
}
.select li .iconPC::before{
	content:"";
	display:block;
	width:70px;
	height:10px;
	z-index:1;
	position:absolute;
	bottom:-15px;
	left:0;
	right:0;
	margin:0 auto;
	background:-webkit-gradient(radial, center center, 0, center center, 80, from(#CCCCCC), to(#FFFFFF));
    background:-webkit-radial-gradient(center, circle cover, #CCCCCC 0%, #FFFFFF 80%);
    background:-moz-radial-gradient(center, circle cover, #CCCCCC 0%, #FFFFFF 80%);
    background:-o-radial-gradient(center, circle cover, #CCCCCC 0%, #FFFFFF 80%);
    background:radial-gradient(#CCCCCC 0%, #FFFFFF 80%);
}

.select li .iconPC span::after{
	content:"";
	display:block;
	position:absolute;
	top:0;
	bottom:0;
	left:0;
	right:0;
	border:3px solid #666;
	box-sizing:border-box;
	z-index:5;
	-webkit-border-radius:50%;
	   -moz-border-radius:50%;
	    -ms-border-radius:50%;
	        border-radius:50%;
	-webkit-transition:border 0.3s;
	   -moz-transition:border 0.3s;
	    -ms-transition:border 0.3s;
	        transition:border 0.3s;
}





.step01 .select li h5{
	width:100%;
	padding-top:100%;
	line-height:1;
	display:block;
	color:#2DB9EB;
	position:relative;
	-webkit-transition:color 0.3s;
	   -moz-transition:color 0.3s;
	    -ms-transition:color 0.3s;
	        transition:color 0.3s;

}


.step01 .select li h5:after{
	display:block;
	content:"";
	border:3px solid #2DB9EB;
	position:absolute;
	top:0;
	left:0;
	right:0;
	bottom:0;
	-webkit-border-radius:50%;
	   -moz-border-radius:50%;
	    -ms-border-radius:50%;
	        border-radius:50%;
	-webkit-transition:border 0.3s;
	   -moz-transition:border 0.3s;
	    -ms-transition:border 0.3s;
	        transition:border 0.3s;
}



.step01 .select li h5 span{
	font-family: "NeueHelveticaforSpeedo-Rg";
	font-size:2.0em;
	position:absolute;
	margin:auto;
	top:52%;
	left:0;
	right:0;
	-webkit-transform:translateY(-50%);
	   -moz-transform:translateY(-50%);
	    -ms-transform:translateY(-50%);
	        transform:translateY(-50%);
}





.step02{
	text-align:center;
	padding:30px 0 0px;
	position:relative;
	display:none;
}

.step02 a{
	display:inline-block;
}

.step02 .PCview{
	margin-top:60px;
}
.step02 .SPview{
	margin-top:60px;
}


.step02 ul.select{
	position:relative;
	text-align:center;
	font-size:0;
}

.step02 .menItemPC li,
.step02 .womenItemPC li,
.step02 .kidsItemPC li{
	display:inline-block;
	margin:0 2%;
	margin-bottom:4%;
	width:20%;
	font-size:12px;
	max-width:180px;
	vertical-align:top;
}
.step02 .snInner{
	width:95%;
	max-width:1100px;
	margin:0 auto;
	color:#323232;
}
.step02 .select li h5{
	font-size:1.2em;
	margin-top:23px;
	-webkit-transition:color 0.3s;
	   -moz-transition:color 0.3s;
	    -ms-transition:color 0.3s;
	        transition:color 0.3s;
}



@media (min-width: 769px) {
.select li:hover .iconPC span{top:-5px;}
.select li:hover .iconPC span::after{border:3px solid #2DB9EB;}
.select li:hover h5{color:#2DB9EB;}
.select li:hover h5:after{border-color:#2DB9EB;}
.select li:hover .iconPC span{top:-5px;}



.step01 li:hover h5{color:#FFF;}
.step01 li:hover{background:#2DB9EB;}
}

@media (max-width: 768px) {
.step01 .snInner{width:100%;}
.step02 .snInner{width:100%;}

.step01 ul li{margin:0 7%;}
}

@media (max-width: 720px) {
.step01{
	text-align:center;
	padding:30px 0 60px;
	position:relative;
	background:none;
	border-bottom:1px solid #CBD5DF;
}
.step01 ul li{margin:0 6%;}
}

@media (max-width: 540px) {


.stepAllBox h2{font-size:2.5em;line-height:1.2;}
.stepAllBox h2 b{display:none;}
.stepAllBox h2 span{display:block}
.stepAllBox h3{margin-top:0.7em;}


.step01{padding:15px 0 50px;}
.step01 ul{margin-top:40px;}
.step01 ul li{margin:0 4%;}
.step01 .select li h5{font-size:3.0vw;}


.step02{padding-top:15px;}
.step02 .PCview{margin-top:40px;}
.step02 .SPview{margin-top:40px;}

.step02 .select li h5{font-size:1.1em;}

}














.select li.active .iconPC span::after{border:3px solid #2DB9EB;}
.select li.active{ background:#2DB9EB;}
.select li.active h5{color:#FFF;}
.select li.active h5:after{border-color:#2DB9EB;}


.slickBox{
	width:100%;
	margin:0 auto;
	overflow:hidden !important;
}

ul.sliderMain{
	width:100%;
	padding:0;
	overflow:hidden !important;
}

.slickBox li{
	padding:0 0 20px 0;
	box-sizing:border-box;
	font-size:12px;
}


.slickBox li div{
	max-width:180px;
	margin:0 auto;
	position:relative;
}


.slickBox .slick-list{
	width:84%;
	overflow:visible;
	margin:0 auto;
}


@media (max-width: 710px) {
.slickBox .slick-list{width:86%;}
}
@media (max-width: 640px) {
.slickBox .slick-list{width:89%;}
}
@media (max-width: 530px) {
.slickBox{
	width:100%;
}
.slickBox li div{
	max-width:220px;
	width:85%;
	margin:0 auto;
	padding-top:10px;
}
.slickBox .slick-slide:not(.slick-center) {
	filter:alpha(opacity=30);
	-webkit-opacity: 0.3;
	-moz-opacity: 0.3;
	-ms-opacity: 0.3;
	opacity: 0.3;
/*
	-webkit-filter:blur(3px);
	   -moz-filter:blur(3px);
	     -o-filter:blur(3px);
	    -ms-filter:blur(3px);
	        filter:blur(3px);
	*/
	-webkit-transition: 0.3s;
	   -moz-transition: 0.3s;
	    -ms-transition: 0.3s;
	        transition: 0.3s;

}


.slickBox .single .slick-slide:not(.slick-center) {
	filter:alpha(opacity=100);
	-webkit-opacity: 1;
	-moz-opacity: 1;
	-ms-opacity: 1;
	opacity: 1;
/*
	-webkit-filter:blur(3px);
	   -moz-filter:blur(3px);
	     -o-filter:blur(3px);
	    -ms-filter:blur(3px);
	        filter:blur(3px);
	*/
	-webkit-transition: 0.3s;
	   -moz-transition: 0.3s;
	    -ms-transition: 0.3s;
	        transition: 0.3s;

}
.slickBox .single li div{
	max-width:200px;
	width:60%;
	margin:0 auto;
	padding-top:10px;
}


.slickBox .slick-slide:not(.slick-center) .iconPC img{
/*
	-webkit-filter:blur(3px);
	   -moz-filter:blur(3px);
	     -o-filter:blur(3px);
	    -ms-filter:blur(3px);
	        filter:blur(3px);
*/
}

}



.menItemPC,
.menItemSP,
.womenItemPC,
.womenItemSP,
.kidsItemPC,
.kidsItemSP{
	display:none;
}

.box{
	display:block;
	-webkit-transform: scale(0);
	-moz-transform: scale(0);
	-ms-transform: scale(0);
	-o-transform: scale(0);
	transform: scale(0);

}
















.otherScene{
	background:#ECF0F6;
	width:100%;
	text-align:center;
	padding:50px 0 55px;
	margin-top:300px;
	-webkit-transition:all 0.4s;
	   -moz-transition:all 0.4s;
	    -ms-transition:all 0.4s;
	        transition:all 0.4s;
}

.racingPage .otherScene{
	margin-top:100px;
}


.otherScene h3{
	font-family: "NeueHelveticaforSpeedo-Bd";
	font-size:3.5em;
	line-height:1.1;
	text-align:center;
	color:#323232;
}


.otherSlider{
	width:90%;
	max-width:1200px;
	margin:40px auto 0;
}
.otherSlider li{
	padding:0 10px;
	box-sizing:border-box;
}
.otherSlider li a{
	color:#323232;
}
@media (min-width: 769px) {
.otherSlider li a:hover{
	color:#EE3224;
}
}

.otherSlider li h4{
	font-family: "NeueHelveticaforSpeedo-Bd";
	font-size:1.8em;
	line-height:1.1;
	margin:0.6em 0 0.3em;
}
.otherSlider li h5{
	font-size:1.2em;
	line-height:1.4;
}




@media (max-width: 768px) {
.otherSlider{width:95%;}
.racingPage .otherScene{margin-top:50px;}
}

@media (max-width: 720px) {
.otherScene{margin-top:120px;}
}

@media (max-width: 540px) {

.otherScene{padding:45px 0 40px;}
.otherScene h3{font-size:3.0em;}

.otherSlider{margin-top:30px;}

.otherSlider li h4{font-size:1.6em;}
.otherSlider li h5{font-size:1.15em;}

}







.slick-slider img,
.slick-slider li,
.slick-slider span{outline:none;}



/* ========================= Slider =============================== */

.slick-slider{
    position: relative;
    display: block;
    box-sizing: border-box;
    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
    -webkit-touch-callout: none;
    -khtml-user-select: none;
    -ms-touch-action: pan-y;
        touch-action: pan-y;
    -webkit-tap-highlight-color: transparent;
}

.slick-list{
    position: relative;
    display: block;
    overflow: hidden;
    margin: 0;
    padding: 0;


}
.slick-list:focus{
	outline: none;
}
.slick-list.dragging{
    cursor: pointer;
    cursor: hand;
}
.slick-slider .slick-track,
.slick-slider .slick-list{
    -webkit-transform: translate3d(0, 0, 0);
       -moz-transform: translate3d(0, 0, 0);
        -ms-transform: translate3d(0, 0, 0);
         -o-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
}
.slick-track{
    position: relative;
    top: 0;
    left: 0;
    display: block;
}
.slick-track:before,
.slick-track:after{
    display: table;
    content: '';
}
.slick-track:after{
    clear: both;
}
.slick-loading .slick-track{
    visibility: hidden;
}

.slick-slide{
    display: none;
    float: left;
    height: 100%;
    min-height: 1px;

}
[dir='rtl'] .slick-slide{
    float: right;
}
.slick-slide img{
    display: block;
}
.slick-slide.slick-loading img{
    display: none;
}
.slick-slide.dragging img{
    pointer-events: none;
}
.slick-initialized .slick-slide{
    display: block;

}
.slick-loading .slick-slide{
    visibility: hidden;

}
.slick-vertical .slick-slide{
    display: block;
    height: auto;
    border: 1px solid transparent;
}
.slick-arrow.slick-hidden {
    display: none;
}










/* Prev Next Button */

.slickBox .slick-prev,
.slickBox .slick-next {
    cursor: pointer;
    display: block;
    font-size: 0;
    line-height: 0;
    margin-top:-90px;
    padding: 0;
    position:absolute;
    top:50%;
    z-index:50;
	width:40px;
	height:100px;
	overflow:hidden;
}
.slickBox .slick-prev{left:0px;}
.slickBox .slick-next{right:0px;}


.slickBox .slick-prev::after{
	display: block;
    content: "";
    position: absolute;
    top:0;
    bottom:0;
    right:0px;
    margin:auto;
	width:25px;
	height:25px;
    border-bottom: solid 2px #323232;
    border-right: solid 2px #323232;
    -webkit-transform:rotate(135deg);
	   -moz-transform:rotate(135deg);
	    -ms-transform:rotate(135deg);
            transform:rotate(135deg);
}
.slickBox .slick-next::after{
	display: block;
    content: "";
    position: absolute;
    top:0;
    bottom:0;
    left:0px;
    margin:auto;
	width:25px;
	height:25px;
    border-bottom: solid 2px #323232;
    border-right: solid 2px #323232;
    -webkit-transform:rotate(-45deg);
	   -moz-transform:rotate(-45deg);
	    -ms-transform:rotate(-45deg);
            transform:rotate(-45deg);
}




@media (max-width: 768px) {
}
@media (max-width: 640px) {
}
@media (max-width: 530px) {
}







.otherSlider .slick-prev,
.otherSlider .slick-next {
    cursor: pointer;
    display: block;
    font-size: 0;
    line-height: 0;
    margin-top:-85px;
    padding: 0;
    position:absolute;
    top:50%;
    z-index:50;
	width:30px;
	height:50px;
	overflow:hidden;
}
.otherSlider .slick-prev{left:-30px;}
.otherSlider .slick-next{right:-30px;}


.otherSlider .slick-prev::after{
	display: block;
    content: "";
    position: absolute;
    top:0;
    bottom:0;
    right:0px;
    margin:auto;
	width:20px;
	height:20px;
    border-bottom: solid 2px #323232;
    border-right: solid 2px #323232;
    -webkit-transform:rotate(135deg);
	   -moz-transform:rotate(135deg);
	    -ms-transform:rotate(135deg);
            transform:rotate(135deg);
}
.otherSlider .slick-next::after{
	display: block;
    content: "";
    position: absolute;
    top:0;
    bottom:0;
    left:0px;
    margin:auto;
	width:20px;
	height:20px;
    border-bottom: solid 2px #323232;
    border-right: solid 2px #323232;
    -webkit-transform:rotate(-45deg);
	   -moz-transform:rotate(-45deg);
	    -ms-transform:rotate(-45deg);
            transform:rotate(-45deg);
}



@media (max-width: 768px) {
.otherSlider .slick-prev,
.otherSlider .slick-next {
	display:none !important;
}
}













/* slick-dots */

.slick-dots {
    margin-top: 10px;
    display: block;
    list-style: outside none none;
    padding: 0;
    text-align: center;
    width: 100%;
}

.otherSlider .slick-dots {
    margin-top:30px;
}


.slick-dots li {
    cursor: pointer;
    display: inline-block;
    margin: 0 4px;
    padding: 0;
    position: relative;
}
.slick-dots li button {
    cursor:pointer;
    display:block;
    font-size:0;
    height:10px;
	width:10px;
	padding:0px;
    line-height: 0;
    outline:medium none;
	background:#B3B3B3;
	border-radius:8px;
    -webkit-border-radius:8px;
    -moz-border-radius:8px;
}
.slick-dots li.slick-active button {
	background:#EE3224;
}


@media (max-width: 540px) {
.otherSlider .slick-dots {margin-top:20px;}
}




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



.racingPage .step02{
	display:block;
}
/*
.racingMen{display:none;}
.racingWomen{display:none;}
*/
.racingCategory{
	width:100%;
	margin:30px auto 0;
	overflow:hidden;
}


.racingCategory ul{
	width:102%;
	font-size:0;
	text-align:left;
}

.racingCategory ul li{
	width:48%;
	margin-right:2%;
	margin-top:2%;
	display:inline-block;
	box-sizing:border-box;
	font-size:12px;
	vertical-align:top;
}

.racingCategory .racingListInner{
	background:#F3F3F3;
	display:block;
	/*
	-webkit-transform:scale(0);
	-moz-transform:scale(0);
	-ms-transform:scale(0);
	-o-transform:scale(0);
	transform:scale(0);
	*/
}

.racingCategory ul li a{
	padding:20px;
	display:block;
	height:100%;
}

@media (min-width: 769px) {
.racingCategory ul li a:hover{
	background:#CCC;
	color:#0A1317 !important;
}
}
.racingCategory ul li a:hover img{
	filter:alpha(opacity=100);
	-webkit-opacity:1;
	   -moz-opacity:1;
	    -ms-opacity:1;
	        opacity:1;
}

.racingCategory h4.logo{
	width:70%;
	max-width:300px;
}
.racingCategory h4.logo02{
	width:80%;
	max-width:350px;
}
.racingCategory h5{
	font-weight:bold;
	font-size:1.4em;
    line-height: 1.5em !important;
	margin:20px 0 8px;
}

.racingCategory p{
	font-size:1.1em;
    line-height: 1.6em !important;
}

.racingCategory .itemChart{
	margin-top:20px;
}

.racingCategory .racingItem{
	width:50%;
	float:left;
	text-align:center;
}

.racingCategory .racingChart{
	width:50%;
	float:right;
	text-align:center;
}

.racingCategory .racingItem img,
.racingCategory .racingChart img{
	width:90%;
	margin:0 auto;
}

a .spLinkBt{display:none;}


@media (max-width: 768px) {
.racingCategory{width:90%;}
.racingCategory ul{width:100%;}
.racingCategory ul li{width:100%;margin-right:0;margin-top:3%;}

.racingCategory h4.logo{max-width:none;width:60%;}
.racingCategory h4.logo02{max-width:none;width:70%;}

.racingCategory .racingItem img,
.racingCategory .racingChart img{width:80%;}

a .spLinkBt{
	background:#EE3224;
	color:#FFF;
	display:block;
	font-family: "NeueHelveticaforSpeedo-Rg";
	font-size:1.3em;
	line-height:1.1;
	padding:0.5em 0;
	width:100%;
	margin-top:30px;
	text-align:center;
	-webkit-border-radius:5px;
       -moz-border-radius:5px;
	    -ms-border-radius:5px;
	        border-radius:5px;
}

}

@media (max-width: 540px) {
.racingCategory{width:95%;}
.racingCategory h4.logo{width:80%;}
.racingCategory h4.logo02{width:90%;}
.racingCategory .racingItem img,
.racingCategory .racingChart img{width:100%;}
}