/* ----------------------------------------
tab
----------------------------------------*/
/*　タブとして必要な設定　*/
.panels > .panel {display: none;}
.panels > .panel.active {display: block;}

.panels {margin-top: -0.1rem;}

.inner-panels > .inner-panel {display: none;}
.inner-panels > .inner-panel.active {display: block;}


/*アンカー*/
#ABOUT,
#SHOP{
	margin-top: -21rem;
  padding-top: 21rem;
}

/* ----------------------------------------
main
----------------------------------------*/
main {margin: 0 0 0 0;}

/*
h1.mainimage {
	display: block;
	width: 100%;
	margin: 0 auto 100px auto;
	background: url(/products/velogue/images/main_pc.jpg) no-repeat;
  background-size: cover;
  aspect-ratio:5 / 2;
	text-indent: 100%;
	white-space: nowrap;
	overflow: hidden;}
*/
h1.mainimage {
	margin: 0 auto 10rem auto;
	display: block;}

h1.mainimage figure img {
  width: 100%;
  height: auto;}


/* .description */
.description {
	width: 118rem;
	margin: 0 auto 12rem auto;}

.description h2 {
  text-align: center;
	margin: 0 0 3.4rem 0;
	font-size: 3.6rem;}

.description figure {
  display: flex;
  justify-content: space-between;
	text-align: center;}

.description figure.velogue_logo {
  width:43.3rem;
  margin: 0 auto 5rem auto;
  height: auto;
}

.description figure img {
	width: 57rem;
  height: auto;}

.description p {
	color: #333;
	font-size: 2rem;
	line-height: 1.5;
  margin-bottom:6rem;}


/*LPのタブ*/
.LPTab {
	width: 118rem;
	margin: 0 auto 8rem;
	display: flex;}

.LPTab > li {
  width: 100%;
  display: flex;
}
.LPTab a,
.LPTab li a{ -webkit-tap-highlight-color: rgba(0, 0, 0, 0);}
.LPTab li a,
.LPTab a{
	flex: 1 1 25%;
	box-sizing: border-box;
	position: relative;
	display: block;
	padding: 1.2rem 0;
	color: #333;
	font-size: 1.8rem;
	text-align: center;
	border: 0.1rem solid #e9ecee;
	border-left: 0;}
.LPTab li a:last-child,
.LPTab a:last-child {border-right: 0;}
.LPTab a:not(:last-child),
.LPTab li a:not(:last-child){border-right: 0.1rem solid #fff;}
.LPTab li a > span,
.LPTab a > span{
	display: inline-block;
	position: relative;}

.LPTab li a.hover,
.LPTab li a.active,
.LPTab a.hover,
.LPTab a.active {
	background-color: #1a1a1a;
	color: #fff;}


/* arrow */
.tabArrow {
    display: inline-block;
    width: 0.7rem;
    height: 0.7rem;
    border-right: 0.1rem solid #1a1a1a;
    border-bottom: 0.1rem solid #1a1a1a;
    transform: rotate(-45deg);
    position: absolute;
    top: calc(50% - 0.35rem);
    transition-property: border-color;
    transition-duration: 0.12s;
}

.LPTab a .tabArrow,
.LPTab li a .tabArrow{
	left: -2.7rem;
	top: calc(50% - 1.4rem);}

.LPTab a.hover .tabArrow,
.LPTab a.active .tabArrow,
.LPTab li a.hover .tabArrow,
.LPTab li a.active .tabArrow { border-color: #fff;}

.LPTab a.active .tabArrow,
.LPTab li a.active .tabArrow {
	transform: rotate(45deg);
	top: calc(50% - 1.6rem);}
.LPTab a.active::after,
.LPTab li a.active::after {
	content: '';
	position: absolute;
	left: calc(50% - 0.75rem);
	bottom: -1.3rem;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 1.3rem 0.75rem 0 0.75rem;
	border-color: #000 transparent transparent transparent;}






/* ----------------------------------------
#ABOUT
----------------------------------------*/
/* velogue-link tab */
ul.velogue-link {
  display: flex;
  width:98rem;
  margin: auto;
  margin-bottom:8rem;
}

ul.velogue-link li {
  width:50%;
  height:10rem;
  background: #1a1a1a;
}

ul.velogue-link li a {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width:100%;
  height:100%;}

ul.velogue-link li a.hover {
  background: #403f3f;}


ul.velogue-link li.velogue-link_tough {border-right:0.1rem solid #fff;}
ul.velogue-link li.velogue-link_tough img {width:20.9rem;height: 5.556rem;}
ul.velogue-link li.velogue-link_speed {}
ul.velogue-link li.velogue-link_speed img {width:19.5rem;height: 5.8rem;}


ul.velogue-link .tabArrow {
    display: inline-block;
    width: 1.2rem;
    height: 1.2rem;
    border-right: 0.3rem solid #fff;
    border-bottom: 0.3rem solid #fff;
    transform: rotate(45deg);
    position: absolute;
    transition-property: border-color;
    transition-duration: 0.12s;
}

ul.velogue-link  a .tabArrow{
	left: 20%;
	top: 50%;}

ul.velogue-link  a.hover .tabArrow,
ul.velogue-link  a.active .tabArrow{ border-color: #fff;}

ul.velogue-link  a.active .tabArrow{
	transform: rotate(45deg);
	top: calc(50% - 1.6rem);}



/* about-description */
#ABOUT .about-description {
  border:red;
  width: 118rem;
  margin:auto;
}

#ABOUT .about-description figure {
  line-height: 0;
  margin-bottom: 8rem;
}
#ABOUT .about-description figure.about-main img {
  width: 100%;
  height: auto;
}

#ABOUT .about-description figure.about-main h2 {
  background: #1a1a1a;
  padding:3rem 0 2rem;
}

#ABOUT .about-description figure.about-main h2 img {
  display: block;
  width:35rem;
  margin: auto;
}

#ABOUT .about-description h3 {
  text-align: center;
  font-size: 4.8rem;
  margin-bottom: 5.5rem;
  font-weight: bold;
}

#ABOUT .about-description h3 span {
  font-size:2rem;
}

#ABOUT .about-description figure.about-img {
  width:98rem;
  margin: auto auto 8rem auto;
}
#ABOUT .about-description figure.about-img img {width:100%;}



/* #ABOUT common */
#ABOUT .about-inner {
  width:118rem;
  margin: auto auto 5rem;}

#ABOUT .about-inner figure {
  width:100%;
  text-align: center;
}

#ABOUT .about-inner figure img{
  display: block;
  width:62rem;
  height: auto;
  position: relative;
  margin: auto auto 1.8rem auto;
}

#ABOUT figure.h_performance img {
  display: block;
  height:5rem;
  width:auto;
  margin: auto auto 4rem auto;
}

#ABOUT h4 {
  font-size:3.6rem;
  text-align: center;
  margin-bottom: 1.5rem;
}

#ABOUT h4 span {font-size:2rem;}

#ABOUT h4 + p {
  font-size:2rem;
  text-align: center;
  margin-bottom: 3.5rem;
}

#ABOUT h5 {
  font-size:2.4rem;
  text-align: center;
  margin-top: 5.5rem;
  margin-bottom: 1.5rem;
}



/* test
------------------------------*/
#ABOUT .test-box {
  background: #f2f3f4;
}

#ABOUT .test-box-inner {
  width:118rem;
  margin: auto auto 11.5rem;
  padding: 5rem 0;
}

#ABOUT .test-box-inner h4 {font-size:2.4rem;}
#ABOUT .test-box-inner h5 {
  margin:0;
  font-size:2.4rem;}

#ABOUT .test-box-inner figure {
  width:100%;
  text-align: center;
}

#ABOUT .test-box-inner figure img{
  display: block;
  width:62rem;
  height: auto;
  position: relative;
  margin: auto auto 0.5rem auto;
}


#ABOUT .test-box-inner figure figcaption.test,
#ABOUT .test-box span.test {
  width:62rem;
  text-align: right;
  font-size:1.4rem;
  display: block;
  margin: auto auto 2rem;
}
#ABOUT .test-box-inner figure figcaption.result,
#ABOUT .test-box-inner p.result{
  text-align: center;
  font-size:2rem;
  font-weight: bold;
}

/* performance4 */
#ABOUT .performance4 .test-box {}
#ABOUT .performance4 .test-box .test-box-inner {
  display: flex;
  justify-content: space-between;
  width:118rem;
  margin: auto auto 6rem;
  padding: 5rem 0;
}
#ABOUT .performance4 h4 span {font-size:2rem;}
#ABOUT .performance4 p.txtArea {
  display: inline-block;
}
#ABOUT .performance4 p.txtArea span {
  padding:0.5rem 1rem 0 0;
  display: block;
  text-align: right;
  font-size:1.4rem;
}


#ABOUT .performance4 .test-box h4 {margin-bottom:1rem;}
#ABOUT .performance4 .test-box h5 {
  font-size:1.8rem;
  margin-bottom: 0.5rem;
}

#ABOUT .performance4 .test-box p {
  text-align: left;
  font-size:1.8rem;}

#ABOUT .performance4 .test-box figure {width:57rem;}

#ABOUT .performance4 .test-box figure p,
#ABOUT .performance4 .test-box figure img,
#ABOUT .performance4 .test-box figure figcaption.test,
#ABOUT .performance4 .test-box figure figcaption.result,
#ABOUT .performance4 .test-box p.result {width:46rem;}


#ABOUT .performance4 .test-box figure p,
#ABOUT .performance4 .test-box figure figcaption.result {
  margin-right: auto;
  margin-left: auto;
  text-align: left;}
#ABOUT .performance4 .test-box img {margin-top:1rem;}

#ABOUT .performance4 .test-box .text-box {}
#ABOUT .performance4 .test-box .text-right {padding-top: 3rem;}


#ABOUT video {
  display: block;
  width:62rem;
  height:auto;
  margin: auto auto 0.5rem auto;}



/* detail 
#ABOUT .tough-detail,
#ABOUT .speed-detail{
  width:98rem;
  margin: auto;
  border:1px solid #7f7f7f;
  padding:2rem;
  margin-bottom:20rem;
  font-size:1.4rem;
  text-align: center;
}

#ABOUT .tough-detail h4,
#ABOUT .speed-detail h4 {
  font-size:2.2rem;
  margin-bottom:0.7rem;
}
 
#ABOUT .tough-detail .price_ttl,
#ABOUT .speed-detail .price_ttl {
  display: inline-block;
  background:#7f7f7f;
  color:#fff;
  font-size:1.6rem;
  font-weight: bold;
  padding: 0.5rem 1.5rem 0.2rem;
}

#ABOUT .tough-detail .price,
#ABOUT .speed-detail .price {
  font-size:2.2rem;
  margin-right:0.5rem;
}

#ABOUT .tough-detail .price_notes,
#ABOUT .speed-detail .price_notes {
  margin-top:1rem;
  text-indent: 1em;
  padding-left:1em;
}*/


/* spec
------------------------------*/
#ABOUT .tough-spec,
#ABOUT .speed-spec{width: 100%;}
#ABOUT .speed-spec .about-description h3 {
  width:fit-content;
  margin: auto auto 5.5rem;
}
#ABOUT .speed-spec .about-description h3 span.notes {
  display: block;
text-align: right;
  font-size:1.4rem;
  font-weight: normal;}


/* speed */
#ABOUT .speed-performance1 {margin-bottom: 11rem;}



/* velogue-item
------------------------------*/
#ABOUT .velogue-item .about-inner {
  width: 98rem;
  margin-bottom: 0;
}

#ABOUT .velogue-item {
	width: 118rem;
	margin-right: auto;
	margin-bottom: 12rem;
	margin-left: auto;}

#ABOUT .velogue-item h3 {
	margin: 0 0 5rem 0;
	color: #333;
	font-size: 2.8rem;
	font-weight: normal;}

#ABOUT .velogue-item ul {
	display: flex;
  justify-content: space-between;
	flex-wrap: wrap;}

#ABOUT .velogue-item li {width: calc((100% / 3) - 1.5rem);}

#ABOUT .velogue-item li a {
  line-height: 0;
  font-size:1.8rem;
}

#ABOUT .velogue-item li figure {
	border: 0.1rem solid #ededed;
	margin: 0 0 1rem 0;}

#ABOUT .velogue-item li figure img {
  width: 100%;
  margin: 0;
}
	#ABOUT .velogue-item li a.hover figure img {opacity: 0.8;}

#ABOUT .velogue-item .itemName {
  font-size: 1.8rem;
	color: #333;
	transition: color 0.12s;}
	#ABOUT .velogue-item a.hover .itemName {color: #e60012;}

#ABOUT .velogue-item .itemName .redArrowS {
	position: static;
	width: 0.9rem;
	height: 0.9rem;
	margin: 0 0.6rem 0 0;
	border-width: 0.2rem;
	transform: scale(0.7) rotate(-45deg);}






/* ----------------------------------------
#SHOP
----------------------------------------*/
#SHOP {
	width: 98rem;
	margin-right: auto;
	margin-left: auto;}

#SHOP > h3 {
	margin: 0 0 4rem 0;
	color: #333;
	font-size: 2.8rem;
	font-weight: normal;
	line-height: 100%;}
#SHOP .LPTab {
  width:98rem;
	line-height: 110%;}
#SHOP .LPTab a {
	display: flex;
		justify-content: center;
		align-items: center;
	padding: 1.2rem 0 1rem;
	font-size: 1.4rem;}
#SHOP h3.prefect {
	margin: 0 0 2rem 0;
	color: #333;
	font-size: 1.6rem;
	font-weight: normal;
	line-height: 100%;}
#SHOP table {
	margin: 0 0 4rem 0;
	color: #333;
	font-size: 1.4rem;
	border: 0.1rem solid #ddd;}
	#SHOP table:last-child {
		margin: 0 0 12rem 0;}
#SHOP .ShopName {
	width: 37rem;
	padding: 1.2rem 0;
	color: #333;
	font-size: 1.4rem;
	font-weight: normal;
	line-height: 100%;
	background: #ececec;
	border-right: 0.1rem solid #ddd;
	border-bottom: 0.1rem solid #ddd;}
#SHOP .ShopAddress {
	width: 59rem;
	color: #333;
	font-size: 1.4rem;
	font-weight: normal;
	background: #ececec;
	border-bottom: 0.1rem solid #ddd;}

#SHOP p.ShopHours {
  padding-left: 5em;
  margin-bottom:0.4rem;
}

#SHOP p.ShopHours span {
  margin: 0;
  display: inline-block;
  text-indent: -5em;
}
#SHOP p.ShopHoliday span {display: inline-block;}


#SHOP table tr:nth-child(2n+1):not(:first-child) {
	background: #f7f9fa;}
#SHOP table tr:nth-child(2n) {}
#SHOP table tr td {
	padding: 2rem;
	vertical-align: top;}
#SHOP table tr td p.blank {
	margin: 0 0 0.4rem 0;}
	#SHOP table tr td p.blank a.hover {
		color: #e60012;}
	#SHOP table tr td.blank a.hover {
		color: #e60012;}
#SHOP table tr + tr td:first-child {
	border-right: 0.1rem solid #ddd;}

#SHOP table tr td span {
  display: block;
  margin: 0 0 0.4rem 0;
}



/* velogue_banner */
.description figure.velogue_banner {
  line-height: 0;
  margin-top:3rem;}

.description figure.velogue_banner,
.description figure.velogue_banner img {
  width:100%;
  height: auto;}