@charset "UTF-8";

/*
	1-1.Yahoo UI Library Fonts CSS
	http://developer.yahoo.com/yui/fonts/
	*Copyright (c) 2006, Yahoo! Inc. All rights reserved.
	*http://developer.yahoo.com/yui/license.txt

	Font-size Adjustment
	
	77% = 10px	| 	122% = 16px	|	167% = 22px	
	85% = 11px	|	129% = 17px	|	174% = 23px
	92% = 12px	|	136% = 18px	|	182% = 24px
	100% = 13px	|	144% = 19px	|	189% = 25px
	107% = 14px	|	152% = 20px	|	197% = 26px
	114% = 15px	|	159% = 21px	|

*/





/* @group Flickity */

/* Flickity
------------------------- */

.flickity-enabled {
  position: relative;
}

.flickity-enabled:focus { outline: none; }

.flickity-viewport {
  overflow: hidden;
  position: relative;
}

.flickity-viewport.is-draggable {
  cursor: -webkit-grab;
  cursor: grab;
}

.flickity-viewport.is-draggable.is-pointer-down {
  cursor: -webkit-grabbing;
  cursor: grabbing;
}

.flickity-slider {
  position: absolute;
  width: 100%;
}

/* ---- previous/next buttons ---- */

.flickity-prev-next-button {
  position: absolute;
  top: 50%;
  width: 44px;
  height: 44px;
  border: none;
  border-radius: 50%;
  background: white;
  background: hsla(0, 0%, 100%, 0.75);
  cursor: pointer;
  /* vertically center */
  -webkit-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
          transform: translateY(-50%);
}

.flickity-prev-next-button:hover { background: white; }

.flickity-prev-next-button:focus {
  outline: none;
  box-shadow: 0 0 0 5px #09F;
}

.flickity-prev-next-button:active {
  filter: alpha(opacity=60); /* IE8 */
  opacity: 0.6;
}

.flickity-prev-next-button.previous { left: 10px; }
.flickity-prev-next-button.next { right: 10px; }
/* right to left */
.flickity-rtl .flickity-prev-next-button.previous {
  left: auto;
  right: 10px;
}
.flickity-rtl .flickity-prev-next-button.next {
  right: auto;
  left: 10px;
}

.flickity-prev-next-button:disabled {
  filter: alpha(opacity=30); /* IE8 */
  opacity: 0.3;
  cursor: auto;
}

.flickity-prev-next-button svg {
  position: absolute;
  left: 20%;
  top: 20%;
  width: 60%;
  height: 60%;
}

.flickity-prev-next-button .arrow {
  fill: #333;
}

/* color & size if no SVG - IE8 and Android 2.3 */
.flickity-prev-next-button.no-svg {
  color: #333;
  font-size: 26px;
}

/* ---- page dots ---- */

.flickity-page-dots {
  position: absolute;
  width: 100%;
  bottom: 36px;
  padding: 0;
  margin: 0;
  list-style: none;
  text-align: center;
  line-height: 1;
  z-index: 10;
}

.flickity-rtl .flickity-page-dots { direction: rtl; }

.flickity-page-dots .dot {
  display: inline-block;
  width: 15px;
  height: 15px;
  margin: 0 5px;
  background: #999;
  border-radius: 50%;
  filter: alpha(opacity=100); /* IE8 */
  opacity: 1;
  cursor: pointer;
}

/* @group カスタマイズ */

.flickity-page-dots .dot {
  background: #dddddd;
}

.flickity-page-dots .dot.is-selected {
  background: #8ac654;
  filter: alpha(opacity=100); /* IE8 */
  opacity: 1;
}

.flickity-page-dots {
  bottom: -30px;
}
/* dots are lines */
.flickity-page-dots .dot {
  height: 10px;
  width: 90px;
  margin: 0;
  border-radius: 0;
}

/* @end */

/* @end */

@media screen and (min-width: 641px){

.page-header {
	min-width: 1240px;
	}


.page-header .mobile-navigation {
	display: none;
	}
.page-header .button-control {
	display: none;
	}
.pc-hidden {
	display: none;
	}
	
img.f-width {
	width: 100%;
	height: auto;
	}

img.c-width {
	width: 315px;
	height: auto;
	}
	
.card {
	width: 290px;
	}

.card img {
	width: 290px;
	height: auto;
	}

.card-w-590 {
	width: 590px;
	}

.card-w-590 img {
	width: 590px;
	}

.card-h-590 {
	width: 590px;
	}

.card-h-590 img {
	height: 424px;
	}

.card-w-890 {
	width: 890px;
	}

.card-w-890 img {
	width: 890px;
	height: auto;
	}

.hero {
	background: #f0f0f0;
	margin-bottom: 172px;
	}

.hero .topics {
	overflow: hidden;
	padding: 48px 0 52px 25px;
	}

.hero .topics .topic {
	float: left;
	margin-right: 10px;
	}

.hero .topics .card-w-590 {
	overflow: hidden;
	width: 590px;
	}

.hero .topics .card-w-590 img {
	width: 610px;
	}

.hero .topics .card-h-590 {
	width: 590px;
	}

.hero .topics .card-h-590 img {
	width: auto;
	height: 424px;
	}


.hero .topics .card-w-890 {
	overflow: hidden;
	width: 890px;
	height: 424px;
	}

.hero .topics .card-w-890 img {
	width: 890px;
	}

.hero .topics .club-kuro-2017 {
	display: block;
	position: relative;
	overflow: hidden;
	}

.hero .topics .club-kuro-2017 a {
	display: block;
	height: 424px;
	}

.hero .topics .club-kuro-2017 .club-kuro {
	float: right;
	margin-right: -1px;
	}

.hero .topics .club-kuro-2017 a.try-fitting {
	display: block;
	float: none;
	clear: both;
	position: absolute;
	top: 0;
	left: 0;
	width: 260px;
	}


.hero .topics .club-kuro-2017 img {
	width: auto;
	height: 424px;
	}


.main .category {
	overflow: hidden;
	margin-bottom: 172px;
	}

.main .category .header {
	overflow: hidden;
	}

.main .category .header .category-label {
	margin-bottom: 0.5em;
	font-size: 244%;
	font-family: "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
	text-transform: uppercase;
	letter-spacing: 0.2em;
	line-height: 1.2;
	}

.category .header .caption {
	margin-bottom: 1em;
	font-size: 129%;
	line-height: 1.2;
	}

.category .header p {
	margin-bottom: 2em;
	font-size: 107%;
	line-height: 1.8;
	}

.category .content {
	overflow: hidden;
	}

.category .card {
	float: left;
	margin: 0 10px 10px 0;
	}


/* @group Club */

#club .header .hgroup {
	float: left;
	width: 258px;
	margin-left: 26px;
	}

#club .header .category-label {
	color: #920d14;
	}

#club .header .category-image {
	float: right;
	width: 918px;
	}

#club .content {
	float: right;
	width: 918px;
	}

/* @end */

/* @group Equipment */

#equipment .header .hgroup {
	float: right;
	width: 430px;
	margin-right: 26px;
	text-align: right;
	}

#equipment .header .category-label {
	color: #231815;
	}

#equipment .header .category-image {
	float: left;
	width: 774px;
	}

#equipment .content {
	overflow: hidden;
	float: none;
	width: 1190px;
	margin: 0 auto;
	}

#equipment .card:last-child {
	margin-right: 0;
	}

/* @end */

/* @group Labo */

#labo .header .hgroup {
	float: left;
	width: 308px;
	margin-left: 26px;
	}

#labo .header .category-label {
	color: #0d57a7;
	}

#labo .header .category-image {
	float: right;
	width: 776px;
	}

#labo .content {
	float: none;
	width: 1190px;
	margin: 0 auto;
	}

#labo .card:last-child {
	margin-right: 0;
	}


/* @end */

/* @group Just for you. */

#just .header .hgroup {
	float: right;
	width: 430px;
	margin-right: 26px;
	text-align: center;
	}

#just .header .category-label {
	color: #141814;
	}

#just .header .caption {
	margin-bottom: 2em;
	}

#just .header .category-image {
	float: left;
	width: 774px;
	}

#just .content {
	overflow: hidden;
	float: right;
	width: 918px;
	}

#just .card:last-child {
	margin-right: 0;
	}

/* @end */

/* @group ONOFF Shop */

#shop .header {
	float: left;
	}

#shop .content {
	overflow: hidden;
	float: right;
	width: 914px;
	margin-right: 0;
	}

#shop .card:last-child {
	margin-right: 0;
	}

/* @end */



/* @group PLAYERS with ONOFF */

#players .header .hgroup {
	float: none;
	width: 980px;
	margin: 0 auto;
	text-align: center;
	}

#players .header .category-label {
	color: #e5b950;
	text-align: center;
	}

#players .header p {
	margin-bottom: 4em;
	}

#players .header .category-image {
	}

#players .content {
	overflow: hidden;
	float: none;
	width: 890px;
	margin: 0 auto;
	}

#players .card:last-child {
	margin-right: 0;
	}

/* @end */

/* @group Club ONOFF */


#club-onoff {
	margin-bottom: 0;
	}

#club-onoff .header .category-image {
	width: 934px;
	margin: 0 auto;
	}

/* @end */

/* @group information */

#information {
	width: 930px;
	margin: 0 auto;
	padding: 0 0 30px;
	}

#information p {
	text-align: center;
	}

/* @end */

}


@media screen and (max-width: 640px), screen and (max-device-width: 480px), screen and (max-device-width: 736px) and (orientation : portrait) {

body {
	/*overflow-x: hidden;*/
	position: relative;
	min-width: 0;
	background: #fefdfd;
	}

div.page {
	position: relative;
	width: 100%;
	min-width: 640px;
	margin: 0;
	background: #ffffff;
	}

.mobile-hidden {
	display: none;
	}


/* @group .page-header */

.page-header {
	position: fixed;
	width: 100%;
	min-width: 640px;
	height: 96px;
	background: #ffffff;
	z-index: 100;
	}

.page-header .container {
	width: 100%;
	min-width: 640px;
	margin: 0 auto;
	padding: 30px 0 0;
	text-align: center;
	}


.page-header .global-navigation {
	display: none;
	}

.page-header .site-title {
	float: none;
	text-align: center;
	}

.page-header .site-title img {
	width: 155px;
	height: auto;
	}

.page-header .club-onoff {
	display: none;
	top: 30px;
	right: 30px;
	}

.page-header .club-onoff a {
	display: block;
	width: 80px;
	height: 40px;
	background: url(../images/global/nav_club-onoff.png) no-repeat 0 0;
	background-size: 80px 40px;
	}

.page-header .club-onoff img {
	display: none;
	width: auto;
	height: 40px;
	}

.javascript .page-header .club-onoff a.button-style img {
	display: none;
	}

/* @group mobile-navigation */

.page-header .button-control {
	position: absolute;
	top: 30px;
	left: 30px;
	}

.page-header .mobile-navigation {
	display: none;
	position: absolute;
	top: 96px;
	left: 0;
	width: 100%;
	padding: 20px 0 80px;
	background: #fefeff;
	}

.page-header .mobile-navigation a {
	color: #3e3a39;
	text-transform: uppercase;
	}

.page-header .mobile-navigation a:hover {
	text-decoration: none;
	}

.page-header .mobile-navigation .category {
	margin: 0 80px;
	}

.page-header .mobile-navigation .category-label {
	padding-right: 60px;
	font-size: 26px;
	letter-spacing: 0.1em;
	border-bottom: 1px solid #727171;
	/*background: #fefeff url(../images/global/list_sign.png) no-repeat right;*/
	background: #fefeff;
	}

.page-header .mobile-navigation .category-label a {
	display: inline-block;
	height: 83px;
	line-height: 83px;
	background: #fefeff;
	}

.page-header .mobile-navigation .category ul {
	display: none;
	}

.page-header .mobile-navigation .category ul li {
	display: block;
	padding-right: 60px;
	font-size: 26px;
	letter-spacing: 0.1em;
	border-bottom: 1px solid #727171;
	background: #fefeff;
	}

.page-header .mobile-navigation .category ul li a{
	display: block;
	height: 83px;
	line-height: 83px;
	background: #fefeff;
	}


.page-header .mobile-navigation .english {
	margin-top: 40px;
	width: 100%;
	}

.page-header .mobile-navigation .english a {
	display: block;
	width: 480px;
	height: 64px;
	margin: 0 auto;
	padding: 0;
	font-size: 26px;
	text-align: center;
	line-height: 64px;
	}

.page-header .mobile-navigation .linkage {
	display: none;
	}

.page-header .mobile-navigation .banner {
	display: block;
	overflow: hidden;
	width: 480px;
	margin: 40px auto 0;
	}

.page-header .mobile-navigation .banner li {
	float: left;
	margin-right: 10px;
	}

.page-header .mobile-navigation .banner li:last-child {
	margin-right: 0;
	}

/* @end */


/* @end */

/* @group .page-body */

.page-body {
	overflow: hidden;
	position: relative;
	width: 100%;
	min-width: 640px;
	padding-top: 96px;
	margin-bottom: 0;
	}


body.home .page-body .container {
	width: 100%;
	min-width: 640px;
	margin: 0;
	}

#main-content {
	margin: 0 auto;
	}

/* @end */

/* @group .page-footer */

.page-footer {
	width: 100%;
	min-width: 640px;
	padding: 0 0 70px;
	color: #221815;
	font-size: 26px;
	background: #fefdfd;
	}

.page-footer a {
	color: #67696a;
	}

.page-footer .container {
	width: 100%;
	min-width: 640px;
	padding: 0;
	}

.page-footer .revise {
	width: 580px;
	margin: 80px auto 80px;
	line-height: 1.4;
	}

.page-footer .revise a {
	width: 580px;
	color: #3e3a39;
	font-size: 85%;
	font-weight: bold;
	line-height: 2.6;
	}

.page-footer .maintenance {
	width: 580px;
	margin: 40px auto 80px;
	line-height: 1.4;
	}

.page-footer .maintenance a {
	width: 580px;
	color: #3e3a39;
	font-size: 85%;
	font-weight: bold;
	}

.page-footer .counterfeit-goods {
	width: 580px;
	margin: 60px auto 40px;
	line-height: 1.6;
	}

.page-footer .counterfeit-goods .heading {
	margin-bottom: 0.4em;
	font-weight: bold;
	line-height: 1.4;
	}


.page-footer .contact {
	width: 580px;
	margin: 60px auto 60px;
	margin-top: 30px;
	line-height: 1.4;
	}

.page-footer .contact .heading {
	display: block;
	font-weight: bold;
	line-height: 1.8;
	}

.page-footer .contact p {
	display: block;
	line-height: 1.8;
	}

.page-footer .contact .note {
	font-size: 92%;
	}

.page-footer .contact .caution {
	margin-top: 1em;
	font-size: 92%;
	line-height: 1.4;
	}

.page-footer .global-footer {
	width: 580px;
	margin: 20px auto 0;
	overflow: hidden;
	}

.page-footer .contentinfo {
	float: none;
	}

.page-footer .contentinfo li {
	display: inline-block;
	margin-left: 0.2em;
	margin-bottom: 0.4em;
	padding-right: 0.6em;
	border-right: 1px solid;
	line-height: 1;
	}

.page-footer .global-footer .privacy {
	margin-left: 0;
	}

.page-footer .global-footer .pr {
	margin-left: 0;
	}

.page-footer .global-footer .globeride {
	border-right: none;
	text-transform: uppercase;
	}

#copyright {
	float: none;
	margin-top: 1.5em;
	font-size: 100%;
	line-height: 1.2;
	}

/* @group .site-map */

.site-map {
	display: block;
	}

.site-map a {
	color: #3e3a39;
	text-transform: uppercase;
	}

.site-map a:hover {
	text-decoration: none;
	}

.page-footer .site-map .column {
	float: none;
	width: 100%;
	}

.page-footer .site-map .categories {
	padding: 50px 0 80px;
	background: #f0f0f0;
	}

.page-footer .site-map .categories .category {
	width: 580px;
	margin: 0 auto;
	}

.page-footer .site-map .categories .category-label {
	padding: 0 60px 0 0;
	margin: 0;
	font-size: 26px;
	letter-spacing: 0.1em;
	border-bottom: 1px solid #727171;
	background: #f0f0f0 url(../images/global/list_sign.png) no-repeat right;
	}

.site-map .category-label a {
	display: inline-block;
	padding: 0;
	height: 83px;
	line-height: 83px;
	}

.site-map .category ul {
	display: none;
	}

.site-map .category ul li {
	display: block;
	padding-right: 60px;
	font-size: 26px;
	letter-spacing: 0.1em;
	border-bottom: 1px solid #727171;
	}

.site-map .category ul li a {
	display: block;
	height: 83px;
	line-height: 83px;
	background: transparent;
	}

.site-map .linkage {
	display: none;
	}


.page-footer .site-map .english {
	box-sizing: border-box;
	position: static;
	width: 100%;
	margin-top: 0;
	padding: 50px 30px;
	background: #f5f5f5;
	}

.site-map .english a {
	display: block;
	width: 100%;
	height: 64px;
	margin: 0 auto;
	padding: 0;
	font-size: 26px;
	text-align: center;
	line-height: 64px;
	}


/* @end */

/* @end */

/* @group Home */

.card {
	box-sizing: border-box;	
	width: 640px;
	padding: 30px 30px 162px;
	background: #fbfbfb;
	}

.card-front {
	display: block;
	box-sizing: border-box;	
	width: 640px;
	}

.hero .topics {
	/*height: 1138px;*/
	}

.hero .topics .topic {
	margin-right: 10px;
	padding: 30px 30px 30px;
	background: #f0f0f0;
	}

.hero .topics .topic img {
	width: 580px;
	height: auto;
	}

.main .category .content {
	position: relative;
	}

.main .category .content .card img {
	width: 100%;
	height: auto;
	}

.main .category .header {
	display: none;
	}

.main .topics .button-style:hover img,
.main .category .content .button-style:hover img {
	opacity: 1;
	filter: alpha(opacity=100);
	cursor: pointer;
	}


.topics .card {
	box-sizing: border-box;
	width: 640px;
	padding: 30px 30px 150px;
	}

.topics .card img {
	width: 100%;
	height: auto;
	}

.topics .flickity-page-dots {
	position: absolute;
	bottom: 47px;
	left: 50%;
	width: 580px;
	height: 10px;
	margin-left: -290px;
	border-radius: 10px;
	background: #dddddd;
	}

.hero .topics .club-kuro-2017 {
	display: block;
	overflow: hidden;
	}

.hero .topics .club-kuro-2017 a {
	display: block;
	height: 848px;
	}

.hero .topics .club-kuro-2017 .club-kuro {
	float: none;
	height: 678px;
	margin-right: 0;
	}

.hero .topics .club-kuro-2017 .try-fitting {
	float: none;
	position: static;
	top: auto;
	left: auto;
	width: auto;
	height: 170px;
	}


.hero .topics .club-kuro-2017 img {
	width: auto;
	height: auto;
	}

.topics .flickity-page-dots:after {
	display: inline-block;
	margin-top: -60px;
	color: #999999;
	font-size: 34px;
	text-align: center;
	letter-spacing: 0.2em;
	content: "TOPICS";
	}

.topics .flickity-page-dots .dot {
	width: 145px; /* 4等分に強制指定 */
	width: 193px; /* 3等分に強制指定 */
	width: 290px; /* 2等分に強制指定 */
	height: 10px;
	border-radius: 10px;
	}

.topics .flickity-page-dots .is-selected {
	border-radius: 10px;
	background: #999999;
	}


.category .flickity-page-dots {
	position: absolute;
	bottom: 62px;
	width: 640px;
	}

.category .flickity-page-dots:after {
	display: inline-block;
	position: absolute;
	top: -1em;
	left: 0;
	width: 640px;
	color: #920d14;
	font-size: 30px;
	letter-spacing: 0.3em;
	}

.category .flickity-page-dots .dot {
	width: 24px;
	height: 24px;
	margin: 1em;
	border-radius: 24px;
	background: #c8c8c8;
	}

.category .flickity-page-dots .dot:first-child {
	border-radius: 0;
	}

.flickity-page-dots .is-selected {
	}




/* @group Club */

#club .flickity-page-dots .is-selected {
	background: #920d14;
	}

#club .flickity-page-dots:after {
	color: #920d14;
	content: "CLUB";
	}

/* @end */

/* @group Equipment */

#equipment .flickity-page-dots .is-selected {
	background: #231815;
	}

#equipment .flickity-page-dots:after {
	color: #231815;
	content: "EQUIPMENT";
	}

/* @end */

/* @group Labo */

#labo .flickity-page-dots .is-selected {
	background: #0d57a7;
	}

#labo .flickity-page-dots:after {
	color: #0d57a7;
	content: "ONOFF LABO";
	}


/* @end */

/* @group Just for you. */

#just .flickity-page-dots .is-selected {
	background: #6eb92b;
	}

#just .flickity-page-dots:after {
	color: #6eb92b;
	content: "Just for you.";
	}


/* @end */

/* @group ONOFF Shop */

#shop .flickity-page-dots .is-selected {
	background: #bab095;
	}

#shop .flickity-page-dots:after {
	color: #bab095;
	content: "ONOFF SHOP";
	}

#shop .has-mobile {
	width: 100%;
	}


/* @end */



/* @group PLAYERS with ONOFF */

#players .flickity-page-dots .is-selected {
	background: #e5b950;
	}

#players .flickity-page-dots:after {
	color: #e5b950;
	content: "PLAYERS with ONOFF";
	}

#players .card-front {
	display: block;
	width: 640px;
	}


#players .card-front img {
	display: block;
	}


/* @end */

/* @group Club ONOFF */


#club-onoff .header {
	display: block;
	width: 640px;
	}

#club-onoff .header .category-image {
	width: 640px;
	}

#club-onoff .header .category-image img {
	width: 100%;
	}


/* @end */

/* @end */



/* @group information */

#information {
	box-sizing: border-box;
	width: 640px;
	margin: 0;
	padding: 30px 30px 26px;
	background: #efefef;
	}

#information p {
	font-size: 18px;
	line-height: 1.6;
	}

/* @end */

}