@charset "UTF-8";
/*! sanitize.css | CC0 Public Domain | github.com/jonathantneal/sanitize.css */
@import url("https://fonts.googleapis.com/css?family=Oswald:400,600|Roboto:400,300,300italic");
/*
 * Normalization
 */
@import url("../js/vendor/bxslider/jquery.bxslider.css");
@import url("../js/vendor/slick/slick.css");
@import url("../js/vendor/lity/lity.min.css");
@import url("../js/vendor/slidebars/slidebars.css");
@import url("../js/vendor/transformicons/transformicons.css");
:root {
  -ms-overflow-style: -ms-autohiding-scrollbar;
  overflow-y: scroll;
  -webkit-text-size-adjust: 100%;
}

audio:not([controls]) {
  display: none;
}

button {
  overflow: visible;
}

details {
  display: block;
}

input[type=number] {
  width: auto;
}
input[type=search] {
  -webkit-appearance: textfield;
}
input[type=search]::-webkit-search-cancel-button, input[type=search]::-webkit-search-decoration {
  -webkit-appearance: none;
}

main {
  display: block;
}

summary {
  display: block;
}

pre {
  overflow: auto;
}

progress {
  display: inline-block;
}

small {
  font-size: 75%;
}

template {
  display: none;
}

textarea {
  overflow: auto;
}

[hidden] {
  display: none;
}

/*
 * Universal inheritance
 */
*,
::before,
::after {
  box-sizing: inherit;
}

* {
  font-size: inherit;
  line-height: inherit;
}

::before,
::after {
  text-decoration: inherit;
  vertical-align: inherit;
}

/*
 * Opinionated defaults
 */
*,
::before,
::after {
  border-style: solid;
  border-width: 0;
}

* {
  margin: 0;
  padding: 0;
}

:root {
  box-sizing: border-box;
  cursor: default;
  font: 300 75%/1.5 "Roboto", sans-serif;
  text-rendering: optimizeLegibility;
}

html {
  background-color: #FFFFFF;
  color: #000000;
}

a {
  text-decoration: none;
}

audio,
canvas,
iframe,
img,
svg,
video {
  vertical-align: middle;
}

button,
input,
select,
textarea {
  background-color: transparent;
}

button,
input,
select,
textarea {
  color: inherit;
  font-family: inherit;
  font-style: inherit;
  font-weight: inherit;
}

button,
[type=button],
[type=date],
[type=datetime],
[type=datetime-local],
[type=email],
[type=month],
[type=number],
[type=password],
[type=reset],
[type=search],
[type=submit],
[type=tel],
[type=text],
[type=time],
[type=url],
[type=week],
select,
textarea {
  min-height: 1.5em;
}

code,
kbd,
pre,
samp {
  font-family: monospace, monospace;
}

nav ol,
nav ul {
  list-style: none;
}

/* select {
	-moz-appearance: none;    // Firefox 40+
	-webkit-appearance: none; // Chrome 45+

	&::-ms-expand {
		display: none;        // Edge 12+, Internet Explorer 11-
	}

	&::-ms-value {
		color: currentColor;  // Edge 12+, Internet Explorer 11-
	}
} */
table {
  border-collapse: collapse;
  border-spacing: 0;
}

textarea {
  resize: vertical;
}

::selection {
  background-color: #B3D4FC;
  text-shadow: none;
}

[aria-busy=true] {
  cursor: progress;
}

[aria-controls] {
  cursor: pointer;
}

[aria-disabled] {
  cursor: default;
}

[hidden][aria-hidden=false] {
  clip: rect(0 0 0 0);
  display: inherit;
  position: absolute;
}
[hidden][aria-hidden=false]:focus {
  clip: auto;
}

.vegas-wrapper,
.vegas-overlay,
.vegas-timer,
.vegas-slide,
.vegas-slide-inner {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  overflow: hidden;
  border: none;
  padding: 0;
  margin: 0;
}

.vegas-overlay {
  opacity: 0.5;
  background: transparent url(overlays/02.png) center center repeat;
}

.vegas-timer {
  top: auto;
  bottom: 0;
  height: 2px;
}

.vegas-timer-progress {
  width: 0%;
  height: 100%;
  background: white;
  transition: width ease-out;
}

.vegas-timer-running .vegas-timer-progress {
  width: 100%;
}

.vegas-slide,
.vegas-slide-inner {
  margin: 0;
  padding: 0;
  background: transparent center center no-repeat;
  transform: translateZ(0);
}

body .vegas-container {
  overflow: hidden !important;
  position: relative;
}

.vegas-video {
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
}

body.vegas-container {
  overflow: auto;
  position: static;
  z-index: -2;
}

body.vegas-container > .vegas-timer,
body.vegas-container > .vegas-overlay,
body.vegas-container > .vegas-slide {
  position: fixed;
  z-index: -1;
}

/* Target Safari IOS7+ in order to add 76px */
_::full-page-media, _:future,
:root body.vegas-container > .vegas-slide,
:root body.vegas-container > .vegas-overlay {
  bottom: -76px;
}

/*************************
    Transitions
 *************************/
/* fade */
.vegas-transition-fade,
.vegas-transition-fade2 {
  opacity: 0;
}

.vegas-transition-fade-in,
.vegas-transition-fade2-in {
  opacity: 1;
}

.vegas-transition-fade2-out {
  opacity: 0;
}

/* blur */
.vegas-transition-blur,
.vegas-transition-blur2 {
  opacity: 0;
  filter: blur(32px);
}

.vegas-transition-blur-in,
.vegas-transition-blur2-in {
  opacity: 1;
  filter: blur(0px);
}

.vegas-transition-blur2-out {
  opacity: 0;
}

/* flash */
.vegas-transition-flash,
.vegas-transition-flash2 {
  opacity: 0;
  filter: brightness(25);
}

.vegas-transition-flash-in,
.vegas-transition-flash2-in {
  opacity: 1;
  filter: brightness(1);
}

.vegas-transition-flash2-out {
  opacity: 0;
  filter: brightness(25);
}

/* negative */
.vegas-transition-negative,
.vegas-transition-negative2 {
  opacity: 0;
  filter: invert(100%);
}

.vegas-transition-negative-in,
.vegas-transition-negative2-in {
  opacity: 1;
  filter: invert(0);
}

.vegas-transition-negative2-out {
  opacity: 0;
  filter: invert(100%);
}

/* burn */
.vegas-transition-burn,
.vegas-transition-burn2 {
  opacity: 0;
  filter: contrast(1000%) saturate(1000%);
}

.vegas-transition-burn-in,
.vegas-transition-burn2-in {
  opacity: 1;
  filter: contrast(100%) saturate(100%);
}

.vegas-transition-burn2-out {
  opacity: 0;
  filter: contrast(1000%) saturate(1000%);
}

/* slideLeft */
.vegas-transition-slideLeft,
.vegas-transition-slideLeft2 {
  transform: translateX(100%);
}

.vegas-transition-slideLeft-in,
.vegas-transition-slideLeft2-in {
  transform: translateX(0%);
}

.vegas-transition-slideLeft2-out {
  transform: translateX(-100%);
}

/* slideRight */
.vegas-transition-slideRight,
.vegas-transition-slideRight2 {
  transform: translateX(-100%);
}

.vegas-transition-slideRight-in,
.vegas-transition-slideRight2-in {
  transform: translateX(0%);
}

.vegas-transition-slideRight2-out {
  transform: translateX(100%);
}

/* slideUp */
.vegas-transition-slideUp,
.vegas-transition-slideUp2 {
  transform: translateY(100%);
}

.vegas-transition-slideUp-in,
.vegas-transition-slideUp2-in {
  transform: translateY(0%);
}

.vegas-transition-slideUp2-out {
  transform: translateY(-100%);
}

/* slideDown */
.vegas-transition-slideDown,
.vegas-transition-slideDown2 {
  transform: translateY(-100%);
}

.vegas-transition-slideDown-in,
.vegas-transition-slideDown2-in {
  transform: translateY(0%);
}

.vegas-transition-slideDown2-out {
  transform: translateY(100%);
}

/* zoomIn */
.vegas-transition-zoomIn,
.vegas-transition-zoomIn2 {
  transform: scale(0);
  opacity: 0;
}

.vegas-transition-zoomIn-in,
.vegas-transition-zoomIn2-in {
  transform: scale(1);
  opacity: 1;
}

.vegas-transition-zoomIn2-out {
  transform: scale(2);
  opacity: 0;
}

/* zoomOut */
.vegas-transition-zoomOut,
.vegas-transition-zoomOut2 {
  transform: scale(2);
  opacity: 0;
}

.vegas-transition-zoomOut-in,
.vegas-transition-zoomOut2-in {
  transform: scale(1);
  opacity: 1;
}

.vegas-transition-zoomOut2-out {
  transform: scale(0);
  opacity: 0;
}

/* swirlLeft */
.vegas-transition-swirlLeft,
.vegas-transition-swirlLeft2 {
  transform: scale(2) rotate(35deg);
  opacity: 0;
}

.vegas-transition-swirlLeft-in,
.vegas-transition-swirlLeft2-in {
  transform: scale(1) rotate(0deg);
  opacity: 1;
}

.vegas-transition-swirlLeft2-out {
  transform: scale(2) rotate(-35deg);
  opacity: 0;
}

/* swirlRight */
.vegas-transition-swirlRight,
.vegas-transition-swirlRight2 {
  transform: scale(2) rotate(-35deg);
  opacity: 0;
}

.vegas-transition-swirlRight-in,
.vegas-transition-swirlRight2-in {
  transform: scale(1) rotate(0deg);
  opacity: 1;
}

.vegas-transition-swirlRight2-out {
  transform: scale(2) rotate(35deg);
  opacity: 0;
}

/*************************
    Animations
 *************************/
.vegas-animation-kenburns {
  animation: kenburns ease-out;
}
@keyframes kenburns {
  0% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}
.vegas-animation-kenburnsUp {
  animation: kenburnsUp ease-out;
}
@keyframes kenburnsUp {
  0% {
    transform: scale(1.5) translate(0, 10%);
  }
  100% {
    transform: scale(1) translate(0, 0);
  }
}
.vegas-animation-kenburnsDown {
  animation: kenburnsDown ease-out;
}
@keyframes kenburnsDown {
  0% {
    transform: scale(1.5) translate(0, -10%);
  }
  100% {
    transform: scale(1) translate(0, 0);
  }
}
.vegas-animation-kenburnsLeft {
  animation: kenburnsLeft ease-out;
}
@keyframes kenburnsLeft {
  0% {
    transform: scale(1.5) translate(10%, 0);
  }
  100% {
    transform: scale(1) translate(0, 0);
  }
}
.vegas-animation-kenburnsRight {
  animation: kenburnsRight ease-out;
}
@keyframes kenburnsRight {
  0% {
    transform: scale(1.5) translate(-10%, 0);
  }
  100% {
    transform: scale(1) translate(0, 0);
  }
}
.vegas-animation-kenburnsUpLeft {
  animation: kenburnsUpLeft ease-out;
}
@keyframes kenburnsUpLeft {
  0% {
    transform: scale(1.5) translate(10%, 10%);
  }
  100% {
    transform: scale(1) translate(0, 0);
  }
}
.vegas-animation-kenburnsUpRight {
  animation: kenburnsUpRight ease-out;
}
@keyframes kenburnsUpRight {
  0% {
    transform: scale(1.5) translate(-10%, 10%);
  }
  100% {
    transform: scale(1) translate(0, 0);
  }
}
.vegas-animation-kenburnsDownLeft {
  animation: kenburnsDownLeft ease-out;
}
@keyframes kenburnsDownLeft {
  0% {
    transform: scale(1.5) translate(10%, -10%);
  }
  100% {
    transform: scale(1) translate(0, 0);
  }
}
.vegas-animation-kenburnsDownRight {
  animation: kenburnsDownRight ease-out;
}
@keyframes kenburnsDownRight {
  0% {
    transform: scale(1.5) translate(-10%, -10%);
  }
  100% {
    transform: scale(1) translate(0, 0);
  }
}
/*  ==========================================================================
    Common
    ========================================================================== */
html {
  background: #f3f3ef;
}

body {
  background: #fff;
  font-size: 75%;
}

article.bk {
  color: #fff;
  background-color: #000;
}
article.bk a {
  color: #fff;
}
article.bk a:hover {
  color: #09c;
}

@media only screen and (max-width: 479px) {
  .onlySP {
    display: inline;
  }

  .onlyTB {
    display: none;
  }

  .overTB {
    display: none;
  }

  .overPC {
    display: none;
  }

  .overDP {
    display: none;
  }
}
@media only screen and (min-width: 480px) and (max-width: 799px) {
  body {
    font-size: 87.5%;
  }

  .onlySP {
    display: none;
  }

  .onlyTB {
    display: inline;
  }

  .overTB {
    display: none;
  }

  .overPC {
    display: none;
  }

  .overDP {
    display: none;
  }
}
@media only screen and (min-width: 480px) {
  body {
    font-size: 87.5%;
  }

  .onlySP {
    display: none;
  }

  .onlyTB {
    display: inline;
  }

  .overTB {
    display: inline;
  }

  .overPC {
    display: inline;
  }

  .overDP {
    display: inline;
  }
}
@media only screen and (min-width: 800px) {
  body {
    font-size: 100%;
  }

  .onlySP {
    display: none;
  }

  .onlyTB {
    display: none;
  }

  .overTB {
    display: inline;
  }

  .overPC {
    display: inline;
  }

  .overDP {
    display: inline;
  }
}
@media only screen and (min-width: 1024px) {
  .onlySP {
    display: none;
  }

  .onlyTB {
    display: none;
  }

  .overTB {
    display: inline;
  }

  .overPC {
    display: inline;
  }

  .overDP {
    display: inline;
  }
}
@media only screen and (min-width: 1280px) {
  .onlySP {
    display: none;
  }

  .onlyTB {
    display: none;
  }

  .overTB {
    display: inline;
  }

  .overPC {
    display: inline;
  }

  .overDP {
    display: inline;
  }
}
h1, h2, h3, h4, h5, h6 {
  font-weight: 300;
}

ul, ol {
  list-style: none;
}

a {
  color: #000;
}
a:hover {
  color: #09c;
}

.font1, #joinus .content_wrapper .title, body.detail article .item .name, body.collection.alpine .content.chapter .chapter_num, body.func article .title_cover .title, body.material .tile .read .title,
.content.material .tile .read .title, .index article .insta .txt .txt_subtitle, .index article .about .cont .txt_title, .index article .hero .cont .txt .txt_title, .content .title, .underlayer .hero .caption, header .obi.obi3, header .obi.obi2, .capInclude .caption {
  font-family: "Oswald";
  font-weight: 600;
}

.center {
  text-align: center;
}

.rpsimg {
  width: 100%;
  height: auto;
}

.circle {
  border-radius: 50%;
}

.arrow:after {
  content: " >";
}

.mov:after {
  content: url(../img/playicon.png);
  margin: 8px;
  position: relative;
  top: 2px;
}

a:hover .mov:after {
  content: url(../img/playicon_on.png);
  margin: 8px;
  position: relative;
  top: 2px;
}

sup {
  font-size: 0.6em;
}

::selection {
  color: #f60;
  background: #000;
  text-shadow: none;
}

.browserupgrade {
  margin: 0.2em 0;
  background: #ccc;
  color: #000;
  padding: 0.2em 0;
}

/*  ==========================================================================
    Image Animation
    ========================================================================== */
a.imgZoom {
  -webkit-font-smoothing: antialiased;
}
a.imgZoom .img_wrapper {
  position: relative;
  overflow: hidden;
}
a.imgZoom img {
  transition: transform 0.8s ease, opacity 0.4s ease;
}
a.imgZoom:hover img {
  transform: scale(1.05, 1.05);
}
body.collection a.imgZoom:hover img {
  transform: scale(1.1, 1.1);
}

a.imgFadein .img_wrapper {
  background-color: #09c;
}
a.imgFadein img {
  transition: transform 0.8s ease, opacity 0.4s ease;
  opacity: 0.5;
}
a.imgFadein:hover img {
  opacity: 1;
}

a.imgFadeout .img_wrapper {
  background-color: #09c;
}
a.imgFadeout img {
  transition: transform 0.8s ease, opacity 0.4s ease;
  opacity: 1;
}
a.imgFadeout:hover img {
  opacity: 0.5;
}

.fadeout {
  transition: transform 0.8s ease, opacity 0.4s ease;
  opacity: 1;
}
.fadeout:hover, .fadeout.select {
  opacity: 0.5;
}

/*  ==========================================================================
    Image & Caption Set
    ========================================================================== */
.capInclude {
  transform-style: preserve-3d;
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 100%;
}
.capInclude .caption {
  position: absolute;
  z-index: 999;
  top: 50%;
  transform: translateY(-50%);
  width: 100%;
  padding: 0 0.5em;
  font-size: 2.4em;
  letter-spacing: 0.05em;
  text-align: center;
}
.hero .capInclude .caption {
  font-size: 4.8em;
}

.capBottom {
  margin-bottom: 5em;
}
.capBottom .caption {
  margin-top: 0.5em;
  font-size: 1.4em;
}
.wide .capBottom .caption {
  margin-left: 5%;
  margin-right: 5%;
}
@media only screen and (min-width: 480px) {
  .capBottom .caption {
    margin-left: 0;
    margin-right: 15%;
  }
}
.capBottom .caption .small {
  color: #888;
  font-size: 0.8em;
}
.capBottom.center .caption {
  margin-left: 10%;
  margin-right: 10%;
}
.capBottom.loose .caption {
  margin-left: 0;
  margin-right: 0;
}

/*  ==========================================================================
    Loader
    ========================================================================== */
#loaderWrap {
  display: none;
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0px;
  left: 0px;
  background: #fff;
  z-index: 99999;
}

#loader {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  width: 100px;
  height: 50px;
  margin-top: -25px;
  margin-left: -50px;
  text-align: center;
  color: #fff;
  z-index: 100000;
}

/*  ==========================================================================
    Slidebars menu for SP
    ========================================================================== */
.sb-menu {
  margin-top: 8em;
  color: #ccc;
  font-size: 1.8em;
  text-align: center;
}
.sb-menu li {
  margin: 0 10%;
  border-bottom: 1px solid #333;
}
.sb-menu li a {
  display: block;
  color: #fff;
  padding: 0.8em 0;
}
.sb-menu li.lang a {
  display: inline-block;
  padding-left: 1em;
  padding-right: 1em;
  border: none;
}
.sb-menu li.lang a.selected {
  color: #888;
}

.sb-toggle-left {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 0;
  width: 30px;
  z-index: 9999;
  /*
  &.fix {
      position: fixed;
  }
  */
}

.lt-ie9 .sb-slidebar,
.lt-ie9 .sb-toggle-left {
  display: none;
}

/* ==========================================================================
   for IE8
   ========================================================================== */
.lt-ie9 #loaderWrap, .lt-ie9 #main {
  display: none;
}
.lt-ie9 .browsehappy {
  padding-top: 3em;
  line-height: 1.8;
  text-align: center;
}
.lt-ie9 .browsehappy p {
  padding-top: 2em;
}
.lt-ie9 .browsehappy a {
  text-decoration: underline;
}

/*  ==========================================================================
    Header
    ========================================================================== */
.logo {
  position: relative;
  width: 25%;
  max-width: 128px;
  margin: 0 auto;
  text-align: center;
}
.logo .rpsimg {
  max-width: 128px;
  max-height: 34px;
}

header {
  position: fixed;
  z-index: 999999;
  top: 0;
  width: 100%;
}
@media only screen and (min-width: 800px) {
  header {
    position: inherit;
  }
}
header li {
  display: inline-block;
}
header .obi {
  padding: 1.2em 0;
  font-size: 1.4em;
}
@media only screen and (min-width: 800px) {
  header .obi {
    padding: 1em 0;
  }
}
header .obi.obi1 {
  background: #333;
  font-size: 1.3em;
  color: #eee;
}
@media only screen and (min-width: 800px) {
  header .obi.obi1 {
    background: #000;
    padding: 1.5em 0;
  }
}
@media only screen and (min-width: 800px) {
  header .obi.obi1 .logo {
    display: none;
  }
}
header .obi.obi1 a {
  color: #fff;
}
header .obi.obi1 a:hover {
  color: #09c !important;
}
header .obi.obi1 a.off {
  color: #666;
}
header .obi.obi1 .sub_menuL {
  display: none;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 0;
}
header .obi.obi1 .sub_menuL li {
  padding: 0 1.5em 0 0;
  font-size: 0.9em;
  font-weight: 500;
}
header .obi.obi1 .sub_menuL li a {
  color: #888;
}
@media only screen and (min-width: 800px) {
  header .obi.obi1 .sub_menuL {
    display: inherit;
  }
}
header .obi.obi1 .sub_menuR {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 0;
}
header .obi.obi1 .sub_menuR li {
  font-weight: 500;
}
header .obi.obi1 .sub_menuR li a {
  color: #888;
}
header .obi.obi1 .sub_menuR li a.selected {
  color: #444;
}
header .obi.obi1 .sub_menuR li.icon {
  padding: 0 0 0 1.3em;
  display: none;
}
@media only screen and (min-width: 800px) {
  header .obi.obi1 .sub_menuR li.icon {
    display: inline-block;
  }
}
header .obi.obi1 .sub_menuR li.lang {
  color: #888;
  font-size: 0.9em;
  display: none;
}
@media only screen and (min-width: 800px) {
  header .obi.obi1 .sub_menuR li.lang {
    display: inline-block;
  }
}
header .obi.obi1 .sub_menuR li.lang.de {
  padding-right: 1.3em;
}
header .obi.obi1 .sub_menuR li.shoplist {
  margin-left: 2.6em;
  font-size: 0.9em;
  font-weight: bold;
}
header .obi.obi1 .sub_menuR li.shoplist .btn {
  padding: 0.5em 2em;
  color: #fff;
  background: #444;
}
header .obi.obi2 {
  display: none;
  background: #333;
  letter-spacing: 0.1em;
}
header .obi.obi2 .logo_wrapper {
  display: none;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 0;
}
@media only screen and (min-width: 800px) {
  header .obi.obi2 .logo_wrapper {
    display: inherit;
  }
}
header .obi.obi2 .main_menu {
  text-align: center;
}
header .obi.obi2 .main_menu li {
  padding: 0 1em;
  color: #fff;
}
header .obi.obi2 .main_menu li a {
  color: #fff;
}
@media only screen and (min-width: 800px) {
  header .obi.obi2 {
    display: inherit;
  }
}
header .obi.obi3 {
  display: inherit;
  padding: 0;
  background: #ff9900;
  font-size: 2.6em;
  font-weight: 400;
  line-height: 0.8em;
  text-align: center;
}
header .obi.obi3 small {
  font-size: 0.5em;
}
header .obi.obi3 a {
  display: block;
  width: 100%;
  height: 100%;
  padding: 0.5em 0.5em 0.25em;
  color: #000;
}

.btn {
  cursor: pointer;
}

.arrow_bottom {
  vertical-align: baseline;
}
.arrow_bottom:after {
  content: "";
  color: #09c;
  font-family: "Font Awesome 5 Free";
  font-size: 0.8em;
  padding-left: 0.1em;
}

.select_wrapper {
  position: relative;
}

.select_body {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1000;
  width: 100%;
  height: 100%;
  border: 0;
  opacity: 0;
  background: #444;
  font-family: "Roboto", sans-serif;
  font-size: 1rem;
  font-weight: normal;
}

/*  ==========================================================================
    Hero
    ========================================================================== */
.hero {
  clear: both;
  position: relative;
  /*
  .community & {
      background-image: url(../../community/img/hero.jpg);
      @include underTB {
          background-image: url(../../community/img/hero_sp.jpg);
      }
  }
  */
}
.underlayer .hero {
  position: relative;
  height: 30vh;
  min-height: 480px;
  background-repeat: no-repeat;
  background-position: center center;
  background-attachment: scroll;
  background-size: cover;
}
.underlayer .hero:before {
  content: "";
  position: absolute;
  z-index: 0;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.2);
}
.underlayer .hero .caption {
  color: #fff;
}
.underlayer .hero .caption .small {
  font-size: 0.6em;
}
.about .hero {
  height: 10vh;
  min-height: 280px;
  background: #f3f3ef;
}
.about .hero:before {
  background: none;
}
.about .hero .caption {
  color: #000;
}
.about .hero .caption .small {
  font-size: 0.6em;
}
.norway .hero {
  background-image: url(../../collection/img/hero/norway_hero.jpg);
  background-position: top center;
}
@media only screen and (max-width: 799px) {
  .norway .hero {
    background-image: url(../../collection/img/hero/norway_hero_sp.jpg);
  }
}
.men .hero {
  background-image: url(../../collection/img/hero/men_hero.jpg);
  background-position: top center;
}
@media only screen and (max-width: 799px) {
  .men .hero {
    background-image: url(../../collection/img/hero/men_hero_sp.jpg);
  }
}
.women .hero {
  background-image: url(../../collection/img/hero/women_hero.jpg);
}
@media only screen and (max-width: 799px) {
  .women .hero {
    background-image: url(../../collection/img/hero/women_hero_sp.jpg);
  }
}
.junior .hero {
  background-image: url(../../collection/img/hero/junior_hero.jpg);
  background-position: top center;
}
@media only screen and (max-width: 799px) {
  .junior .hero {
    background-image: url(../../collection/img/hero/junior_hero_sp.jpg);
  }
}
.alpine .hero {
  background-image: url(../../collection/img/hero/alpine_hero.jpg);
  background-position: center center;
}
@media only screen and (max-width: 799px) {
  .alpine .hero {
    background-image: url(../../collection/img/hero/alpine_hero_sp.jpg);
  }
}
.alpine .hero .caption {
  color: #000;
}
.func .hero {
  background-image: url(../../functionalities/img/hero.jpg);
  background-position: top center;
}
@media only screen and (max-width: 799px) {
  .func .hero {
    background-image: url(../../functionalities/img/hero_sp.jpg);
  }
}
.material .hero {
  background-image: url(../../material/img/hero.jpg);
}
@media only screen and (max-width: 799px) {
  .material .hero {
    background-image: url(../../material/img/hero_sp.jpg);
  }
}
.concept .hero {
  background-image: url(../../about/img/hero.jpg);
  background-position: top center;
}
@media only screen and (max-width: 799px) {
  .concept .hero {
    background-image: url(../../about/img/hero_sp.jpg);
    background-position: center center;
  }
}
.stores .hero {
  background-image: url(../../store/img/hero.jpg);
  background-position: top center;
}
@media only screen and (max-width: 799px) {
  .stores .hero {
    background-image: url(../../store/img/hero_sp.jpg);
  }
}
.stores#contactinfo .hero {
  background-image: url(../../contactinfo/img/hero.jpg);
}
@media only screen and (max-width: 799px) {
  .stores#contactinfo .hero {
    background-image: url(../../contactinfo/img/hero_sp.jpg);
  }
}
.film .hero {
  background-image: url(../../film/img/hero.jpg);
}
@media only screen and (max-width: 799px) {
  .film .hero {
    background-image: url(../../film/img/hero_sp.jpg);
  }
}
.sponsorship .hero {
  background-image: url(../../sponsor/img/hero.jpg);
}
@media only screen and (max-width: 799px) {
  .sponsorship .hero {
    background-image: url(../../sponsor/img/hero_sp.jpg);
  }
}

/*  ==========================================================================
    Contents
    ========================================================================== */
.content {
  padding: 8em 0;
}
.underlayer .content {
  padding: 4em 0;
}
@media only screen and (min-width: 480px) {
  .content {
    padding: 10em 0;
  }
  .underlayer .content {
    padding: 5em 0;
  }
}
.content .cover {
  margin-top: -8em;
  margin-bottom: 4em;
}
@media only screen and (min-width: 480px) {
  .content .cover {
    margin-top: -10em;
    margin-bottom: 5em;
  }
}
.content.bgcolor {
  background: #f3f3ef;
}
.content .title {
  text-align: center;
  margin: 0 auto 1em;
  font-size: 3em;
  letter-spacing: 0.05em;
}
.content .subTitle {
  margin: 0 0 0.5em;
  font-size: 1.4em;
  letter-spacing: 0.05em;
}

.content_wrapper {
  position: relative;
  width: 80%;
  margin: 0 auto;
}
.content_wrapper.mini {
  max-width: 640px;
}
.content_wrapper.maxwidthPC {
  max-width: 1024px;
}
.content_wrapper.wide {
  width: 90%;
}
.content_wrapper.full {
  width: 100%;
}
@media only screen and (min-width: 800px) {
  .content_wrapper {
    max-width: 1280px;
  }
}
.content_wrapper.colpc2 {
  margin-top: 0;
  margin-bottom: 0;
}
.content_wrapper.colpc2 .wrapperL .content_inner,
.content_wrapper.colpc2 .wrapperR .content_inner {
  margin-top: 3rem;
  margin-bottom: 3rem;
}
@media only screen and (min-width: 800px) {
  .content_wrapper.colpc2 .wrapperL {
    float: left;
    width: 50%;
  }
  .content_wrapper.colpc2 .wrapperR {
    float: right;
    width: 50%;
  }
}

.more {
  width: 100%;
  text-align: center;
}
.more a {
  display: inline-block;
  width: 90%;
  color: #09c;
  padding: 10px 1em;
  border: 1px solid #09c;
  border-left: none;
  border-right: none;
  font-size: 1.4em;
  font-style: italic;
}
@media only screen and (min-width: 480px) {
  .more a {
    width: auto;
  }
}
.more a:hover {
  padding: 9px 1em;
  border-width: 2px;
}
.more a.white {
  color: #fff;
  border-color: #fff;
}

/*  ==========================================================================
    Tile
    ========================================================================== */
.tiles.spcThin {
  margin: 0 -2px;
}
.tiles.spcThin .tile {
  padding: 0 0 2px 2px;
}
.tiles.spcNormal .tile {
  padding: 0 2%;
}
.tiles.spcWide .tile {
  padding: 0 12%;
}
@media only screen and (min-width: 480px) {
  .tiles.spcWide .tile {
    padding: 0 6%;
  }
}
@media only screen and (min-width: 800px) {
  .tiles.spcWide .tile {
    padding: 0 2%;
  }
}

.tile {
  display: inline-block;
  vertical-align: top;
}
.tile a {
  display: block;
  margin-left: auto;
  margin-right: auto;
}
@media only screen and (max-width: 479px) {
  .tiles.colspA .tile {
    width: auto;
  }
  .tiles.colsp1 .tile {
    width: 100%;
  }
  .tiles.colsp2 .tile {
    width: 50%;
  }
  .tiles.colsp3 .tile {
    width: 33.3333333333%;
  }
  .tiles.colsp4 .tile {
    width: 25%;
  }
  .tiles.colsp5 .tile {
    width: 20%;
  }
}
@media only screen and (min-width: 480px) and (max-width: 799px) {
  .tiles.coltbA .tile {
    width: auto;
  }
  .tiles.coltb1 .tile {
    width: 100%;
  }
  .tiles.coltb2 .tile {
    width: 50%;
  }
  .tiles.coltb3 .tile {
    width: 33.3333333333%;
  }
  .tiles.coltb4 .tile {
    width: 25%;
  }
  .tiles.coltb5 .tile {
    width: 20%;
  }
}
@media only screen and (min-width: 800px) {
  .tiles.colpcA .tile {
    width: auto;
  }
  .tiles.colpc1 .tile {
    width: 100%;
  }
  .tiles.colpc2 .tile {
    width: 50%;
  }
  .tiles.colpc3 .tile {
    width: 33.3333333333%;
  }
  .tiles.colpc4 .tile {
    width: 25%;
  }
  .tiles.colpc5 .tile {
    width: 20%;
  }
  .tiles.colpc6 .tile {
    width: 16.6666666666%;
  }
  .tiles.colpc7 .tile {
    width: 14.2857142857%;
  }
  .tiles.colpc8 .tile {
    width: 12.5%;
  }
}
@media only screen and (min-width: 1024px) {
  .tiles.coldpA .tile {
    width: auto;
  }
  .tiles.coldp1 .tile {
    width: 100%;
  }
  .tiles.coldp2 .tile {
    width: 50%;
  }
  .tiles.coldp3 .tile {
    width: 33.3333333333%;
  }
  .tiles.coldp4 .tile {
    width: 25%;
  }
  .tiles.coldp5 .tile {
    width: 20%;
  }
  .tiles.coldp6 .tile {
    width: 16.6666666666%;
  }
  .tiles.coldp7 .tile {
    width: 14.2857142857%;
  }
  .tiles.coldp8 .tile {
    width: 12.5%;
  }
  .tiles.coldp9 .tile {
    width: 11.1111111111%;
  }
  .tiles.coldp10 .tile {
    width: 10%;
  }
}

/*  ==========================================================================
    Index
    ========================================================================== */
.index article .hero #hero {
  height: 70vh;
  min-height: 500px;
  margin-top: 50px;
}
@media only screen and (min-width: 800px) {
  .index article .hero #hero {
    margin-top: 0;
    min-height: 900px;
  }
}
.index article .hero .cont {
  position: relative;
  display: block;
  width: 100%;
}
@media only screen and (min-width: 800px) {
  .index article .hero .cont {
    position: absolute;
    width: 33.33333%;
    top: 0;
    left: 0;
    margin: 15% 0 0 0;
  }
}
.index article .hero .cont .txt {
  position: relative;
  color: #000;
  background-color: rgba(255, 255, 255, 0.88);
  padding: 3em;
  text-align: left !important;
}
.index article .hero .cont .txt .txt_title {
  font-size: 4.8em;
  line-height: 1;
}
.index article .hero .cont .txt .txt_read {
  margin-top: 1em;
  font-size: 1.4em;
  line-height: 1.8;
}
.index article .hero .cont .txt:after {
  /*
  content: "\f105";
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  */
  content: "〉";
  font-size: 2em;
  line-height: 1;
  color: #09c;
  position: absolute;
  right: 0;
  bottom: 10px;
}
.index article .about {
  padding-top: 11em;
}
.index article .about .cont {
  position: relative;
  width: 90%;
  margin-top: -1em;
  position: relative;
  z-index: 999;
  color: #fff;
  background-color: rgba(30, 30, 30, 0.88);
  padding: 3em;
  text-align: left !important;
}
@media only screen and (min-width: 480px) {
  .index article .about .cont {
    width: 85%;
    margin-top: -1.5em;
  }
}
@media only screen and (min-width: 800px) {
  .index article .about .cont {
    width: 75%;
  }
}
.index article .about .cont .txt_title {
  font-size: 4.8em;
  line-height: 1;
}
.index article .about .cont .txt_read {
  margin-top: 1em;
  font-size: 1.4em;
  line-height: 1.8;
}
.index article .about .cont:after {
  /*
  content: "\f105";
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  */
  content: "〉";
  font-size: 2em;
  line-height: 1;
  color: #09c;
  position: absolute;
  right: 0;
  bottom: 10px;
}
.index article .about .about_slide {
  position: relative;
  z-index: 998;
  margin-top: -3em;
}
.index article .collection {
  padding: 0;
}
.index article .collection .title {
  widows: 100%;
  margin-bottom: 0.5em;
  font-size: 4.8em;
  text-align: left;
  line-height: 1;
}
.index article .collection a {
  color: #fff;
}
.index article .collection a:hover {
  color: #fff;
}
.index article .collection a .img_wrapper {
  background: #000;
}
.index article .collection a .caption {
  font-size: 3.6em;
  line-height: 1;
}
.index article .community {
  display: block;
  padding: 3em 0;
  margin-top: 3em;
  margin-bottom: -3em;
  background: #333;
  position: relative;
  position: relative;
  background-position: right center;
  background-size: cover;
}
.index article .community::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='2800' height='100' fill='rgb(0,0,0)' fill-opacity='1'%3E%3Cpolygon points='0,0 2800,0 0,100'%3E%3C/polygon%3E%3C/svg%3E");
  background-position: center center;
  background-repeat: no-repeat;
  content: "";
  height: 100px;
  left: 0;
  position: absolute;
  right: 0;
  width: 100%;
  z-index: 1;
  top: 0;
}
.index article .community::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='2800' height='100' fill='rgb(0,0,0)' fill-opacity='1'%3E%3Cpolygon points='0,100 2800,100 2800,0'%3E%3C/polygon%3E%3C/svg%3E");
  background-position: center center;
  background-repeat: no-repeat;
  content: "";
  height: 100px;
  left: 0;
  position: absolute;
  right: 0;
  width: 100%;
  z-index: 1;
  bottom: 0;
}
@media only screen and (min-width: 800px) {
  .index article .community {
    background-position: center center;
  }
}
.index article .community .title {
  position: relative;
  z-index: 999;
  widows: 100%;
  text-align: left;
}
.index article .community .caption {
  font-size: 1.2em;
}
.index article .others .title {
  widows: 100%;
  margin-bottom: 0.5em;
  font-size: 4.8em;
  text-align: left;
  line-height: 1;
}
.index article .others a {
  color: #fff;
}
.index article .others a:hover {
  color: #fff;
}
.index article .others a .img_wrapper {
  background: #000;
}
.index article .others a .caption {
  font-size: 3.6em;
  line-height: 1;
}
.index article .insta {
  padding: 0;
}
.index article .insta .txt {
  text-align: center;
  margin: 0 2em 1em;
}
.index article .insta .txt .txt_title {
  font-size: 1.4em;
  line-height: 1;
  margin-bottom: 0.5em;
}
.index article .insta .txt .txt_subtitle {
  font-size: 3em;
  line-height: 1;
  margin-bottom: 1em;
}

/*  ==========================================================================
    Under Layer
    ========================================================================== */
body.underlayer .cover {
  color: #fff;
  position: relative;
}
body.underlayer .cover:before {
  content: "";
  position: absolute;
  z-index: 0;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.2);
}

@media only screen and (max-width: 799px) {
  body.underlayer .content .content_wrapper .acmenu .category {
    font-size: 1.8em;
    margin: 0;
    padding: 1em 2em;
    border-top: 1px solid #ccc;
  }
  body.underlayer .content .content_wrapper .acmenu .category:after {
    right: 0.7777777777em;
  }
}
/*  ==========================================================================
    Material & Functions
    ========================================================================== */
body.material .tile,
.content.material .tile {
  padding-top: 8em;
}
@media only screen and (min-width: 800px) {
  body.material .tile,
.content.material .tile {
    padding-top: 4em;
  }
}
body.material .tile .img_wrapper,
.content.material .tile .img_wrapper {
  font-size: 1.2em;
  margin-bottom: 1.5em;
  padding: 1em 2em;
  text-align: center;
  background: #fff;
}
body.material .tile .img_wrapper .rpsimg,
.content.material .tile .img_wrapper .rpsimg {
  max-width: 360px;
  max-height: 210px;
}
@media only screen and (min-width: 800px) {
  body.material .tile .img_wrapper,
.content.material .tile .img_wrapper {
    width: 20%;
    float: left;
    text-align: left;
  }
}
body.material .tile .read,
.content.material .tile .read {
  text-align: left;
}
body.material .tile .read .title,
.content.material .tile .read .title {
  margin-bottom: 0.5em;
  font-size: 1.4em;
  text-align: left;
  line-height: 1;
}
body.material .tile .read p,
.content.material .tile .read p {
  font-size: 1.2em;
  line-height: 1.8;
  margin-bottom: 1.5em;
}
body.material .tile .read p .bold,
.content.material .tile .read p .bold {
  font-weight: bold;
}
body.material .tile .read p .rpsimg,
.content.material .tile .read p .rpsimg {
  max-width: 450px;
  max-height: 300px;
  margin-top: 1em;
  padding: 0;
}
@media only screen and (min-width: 800px) {
  body.material .tile .read,
.content.material .tile .read {
    width: 75%;
    float: right;
  }
  body.material .tile .read .title,
.content.material .tile .read .title {
    margin-top: 0;
  }
}

/*  ==========================================================================
    Functionalities
    ========================================================================== */
body.func article {
  color: #fff;
  background: #000;
}
body.func article .intro {
  margin-bottom: 10em;
  padding: 2em 2.5em;
  color: #000;
  background: #fff;
}
@media only screen and (min-width: 800px) {
  body.func article .intro .left {
    width: 45%;
    float: left;
  }
  body.func article .intro .right {
    width: 45%;
    float: right;
    margin-top: 2em;
  }
}
body.func article .intro .title {
  font-size: 4em;
  letter-spacing: 0;
  line-height: 1;
  text-align: left !important;
  margin-bottom: 0.5em;
}
@media only screen and (min-width: 800px) {
  body.func article .intro .title {
    margin-bottom: 0;
  }
}
body.func article .intro .read p {
  margin-bottom: 0;
  font-size: 1.2em;
  line-height: 1.8;
}
@media only screen and (min-width: 800px) {
  body.func article .intro .title, body.func article .intro .read {
    width: 50%;
  }
}
body.func article .title_cover {
  position: relative;
  display: block;
  height: 450px;
  position: relative;
  position: relative;
  background-position: right center;
  background-size: cover;
}
body.func article .title_cover .title {
  position: absolute;
  bottom: 0;
  left: 0;
  margin: 2em 2em 2em 0.5em;
  font-size: 6em;
  color: #000;
  text-align: left;
  line-height: 0.7;
}
@media only screen and (min-width: 800px) {
  body.func article .title_cover .title {
    margin: 2em;
  }
}
body.func article .title_cover .title small {
  font-size: 0.6em;
}
body.func article .title_cover::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='2800' height='100' fill='rgb(0,0,0)' fill-opacity='1'%3E%3Cpolygon points='0,0 2800,0 0,100'%3E%3C/polygon%3E%3C/svg%3E");
  background-position: center center;
  background-repeat: no-repeat;
  content: "";
  height: 100px;
  left: 0;
  position: absolute;
  right: 0;
  width: 100%;
  z-index: 1;
  top: 0;
}
body.func article .title_cover::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='2800' height='100' fill='rgb(0,0,0)' fill-opacity='1'%3E%3Cpolygon points='0,100 2800,100 2800,0'%3E%3C/polygon%3E%3C/svg%3E");
  background-position: center center;
  background-repeat: no-repeat;
  content: "";
  height: 100px;
  left: 0;
  position: absolute;
  right: 0;
  width: 100%;
  z-index: 1;
  bottom: 0;
}
@media only screen and (min-width: 800px) {
  body.func article .title_cover {
    height: 600px;
  }
}
body.func article .title_cover#photo1 {
  background-image: url(../../img/hero2.jpg);
  background-position: center center;
}
body.func article .title_cover#photo2 {
  background-image: url(../../img/hero3.jpg);
  background-position: top center;
}
body.func article .title_cover#photo3 {
  background-image: url(../../img/hero4.jpg);
  background-position: bottom center;
}
body.func article .tiles .tile .caption {
  position: relative;
  width: 100%;
  padding-right: 50%;
  min-height: 172px;
  font-size: 1.4em;
  background-position: right top;
  background-repeat: no-repeat;
}
body.func article .tiles .tile .caption:after {
  content: url(../../functionalities/img/pointer.png);
  position: absolute;
}
@media only screen and (min-width: 1024px) {
  body.func article .tiles .tile .caption {
    font-size: 1.8em;
  }
}
body.func article .tiles .tile .cap1:after {
  top: 0px;
  right: 70px;
}
body.func article .tiles .tile .cap2:after {
  top: 34px;
  right: 46px;
}
body.func article .tiles .tile .cap3:after {
  top: 56px;
  right: 52px;
}
body.func article .tiles .tile .cap4:after {
  top: 110px;
  right: 5px;
}
body.func article .tiles .tile .cap5:after {
  top: 70px;
  right: 50px;
}
body.func article .tiles .tile .cap6:after {
  top: 120px;
  right: 120px;
}
body.func article .tiles .tile .cap7:after {
  top: 40px;
  right: 90px;
}
body.func article .tiles .tile .cap8:after {
  top: 115px;
  right: 60px;
}
body.func article .tiles .tile .cap9:after {
  top: 130px;
  right: 60px;
}
body.func article .tiles .tile .cap10:after {
  top: 80px;
  right: 50px;
}
body.func article .tiles .tile .cap11:after {
  top: 130px;
  right: 5px;
}
body.func article .tiles .tile .cap12:after {
  top: 34px;
  right: 56px;
}
body.func article .tiles .tile .cap13:after {
  top: 0px;
  right: 70px;
}
body.func article .tiles .tile .cap14:after {
  top: 0px;
  right: 20px;
}
body.func article .tiles .tile .cap15:after {
  top: -10px;
  right: 40px;
}
body.func article .tiles .tile .cap16:after {
  top: 130px;
  right: 70px;
}
body.func article .jkt_outside .caption {
  background-image: url(../../functionalities/img/jkt.png);
  background-size: contain;
}
body.func article .jkt_inside .caption {
  background-image: url(../../functionalities/img/jkt.png);
  background-size: contain;
}
body.func article .pants .caption {
  background-image: url(../../functionalities/img/pants.png);
  background-size: contain;
}

/*  ==========================================================================
    Concept
    ========================================================================== */
body.concept article .photo {
  display: block;
  height: 250px;
  margin-bottom: -75px;
  background: #999;
  position: relative;
  position: relative;
  background-size: cover;
}
body.concept article .photo::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='2800' height='100' fill='rgb(0,0,0)' fill-opacity='1'%3E%3Cpolygon points='0,0 2800,0 0,100'%3E%3C/polygon%3E%3C/svg%3E");
  background-position: center center;
  background-repeat: no-repeat;
  content: "";
  height: 100px;
  left: 0;
  position: absolute;
  right: 0;
  width: 100%;
  z-index: 1;
  top: 0;
}
body.concept article .photo::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='2800' height='100' fill='rgb(0,0,0)' fill-opacity='1'%3E%3Cpolygon points='0,100 2800,100 2800,0'%3E%3C/polygon%3E%3C/svg%3E");
  background-position: center center;
  background-repeat: no-repeat;
  content: "";
  height: 100px;
  left: 0;
  position: absolute;
  right: 0;
  width: 100%;
  z-index: 1;
  bottom: 0;
}
body.concept article .photo#photo1 {
  background-image: url(../../about/img/photo1.jpg);
  background-position: right top;
}
body.concept article .photo#photo2 {
  background-image: url(../../about/img/photo2.jpg);
  background-position: right center;
}
body.concept article .photo#photo3 {
  background-image: url(../../about/img/photo3.jpg);
  background-position: right top;
}
@media only screen and (min-width: 800px) {
  body.concept article .photo {
    height: 350px;
    margin-bottom: -125px;
    background-position: center center;
  }
}
body.concept article .content_wrapper {
  z-index: 9999;
  padding-top: 2em;
}
body.concept article .content_wrapper.intro {
  padding: 2em 2.5em;
  color: #000;
  background: #fff;
}
body.concept article .content_wrapper.intro .title {
  font-size: 4em;
  letter-spacing: 0;
  line-height: 1;
  text-align: left !important;
}
body.concept article .content_wrapper.intro .read p {
  margin-bottom: 0;
}
@media only screen and (min-width: 800px) {
  body.concept article .content_wrapper.intro .title, body.concept article .content_wrapper.intro .read {
    width: 50%;
  }
}
body.concept article .content_wrapper.story {
  margin-top: 5em;
}
body.concept article .content_wrapper.story .img_wrapper {
  position: absolute;
  z-index: 998;
  top: 0;
  left: -20px;
}
body.concept article .content_wrapper.story .read {
  position: relative;
  z-index: 999;
  max-width: 480px;
  margin: 0 auto;
}
body.concept article .content_wrapper.story .read .title {
  margin: 0.5em 0;
  text-align: center;
}
body.concept article .content_wrapper.story .read p {
  text-align: justify;
}
body.concept article .content_wrapper.year .read {
  position: relative;
  padding-left: 2em;
  text-align: left;
}
@media only screen and (min-width: 800px) {
  body.concept article .content_wrapper.year .read {
    margin-top: 10em;
  }
}
body.concept article .content_wrapper.year .read:before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 2px;
  height: 180px;
  background: #fff;
}
@media only screen and (min-width: 800px) {
  body.concept article .content_wrapper .left {
    width: 45%;
    float: left;
  }
  body.concept article .content_wrapper .right {
    width: 45%;
    float: right;
  }
}
body.concept article .content_wrapper .img_wrapper {
  text-align: center;
}
body.concept article .content_wrapper .img_wrapper .rpsimg {
  max-width: 450px;
  max-height: 450px;
}
body.concept article .content_wrapper .read .title {
  margin-bottom: 0.5em;
  font-size: 3em;
  text-align: left;
}
body.concept article .content_wrapper .read p {
  font-size: 1.2em;
  line-height: 1.8;
  margin-bottom: 1.5em;
}

/*  ==========================================================================
    Community
    ========================================================================== */
body.community article .tiles .tile {
  margin-bottom: 8em;
  padding-bottom: 5em;
  border-bottom: 1px solid #eee;
}
body.community article .tiles .tile .subTitle {
  color: #888;
}
body.community article .tiles .tile .img_wrapper {
  padding-bottom: 1em;
}
body.community article .tiles .tile .title {
  font-size: 1.8em;
  text-align: left;
}
body.community article .tiles .tile .read {
  text-align: justify;
}
body.community article .tiles .tile .read p {
  font-size: 1.4em;
  line-height: 1.8;
  margin-bottom: 1.5em;
}
body.community article .tiles .tile .read p a {
  display: inline;
  margin: 0;
  text-decoration: underline;
  word-wrap: break-word !important;
}

/*  ==========================================================================
    Sponsorship
    ========================================================================== */
body.sponsorship article .tiles .tile {
  margin-bottom: 5em;
}
body.sponsorship article .tiles .tile .img_wrapper .rpsimg {
  max-width: 250px;
  max-height: 250px;
}
body.sponsorship article .tiles .tile .title {
  margin-top: 1em;
}
body.sponsorship article .tiles .tile .read {
  text-align: justify;
}
body.sponsorship article .tiles .tile .read p {
  font-size: 1.4em;
  line-height: 1.8;
  margin-bottom: 1.5em;
}
body.sponsorship article .link {
  width: auto;
  margin-left: auto;
  margin-right: auto;
}
body.sponsorship article .link .img_wrapper {
  width: 150px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
body.sponsorship article .link .rpsimg {
  max-width: 150px;
  max-height: 108px;
  border: 1px solid #eee;
}

/*  ==========================================================================
    Collection
    ========================================================================== */
body.collection .tile,
body.index .pickup .tile,
body.detail .recommend .tile {
  margin-bottom: 3em;
}
body.collection .tile a .img_wrapper,
body.index .pickup .tile a .img_wrapper,
body.detail .recommend .tile a .img_wrapper {
  background: none;
}
body.collection .tile a .img_wrapper .rpsimg,
body.index .pickup .tile a .img_wrapper .rpsimg,
body.detail .recommend .tile a .img_wrapper .rpsimg {
  max-width: 200px;
}
body.collection .tile a .caption,
body.index .pickup .tile a .caption,
body.detail .recommend .tile a .caption {
  transition: transform 0.8s ease, opacity 0.4s ease;
  opacity: 0;
  color: #000;
  font-size: 1.8em;
  padding: 0 0.5em;
}
body.collection .tile a:hover,
body.index .pickup .tile a:hover,
body.detail .recommend .tile a:hover {
  background: #eee;
}
body.collection .tile a:hover .caption,
body.index .pickup .tile a:hover .caption,
body.detail .recommend .tile a:hover .caption {
  opacity: 1;
}

body.collection .hero .slider .slide {
  position: relative;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  display: block;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}
body.collection .hero .slider .slide:before {
  content: "";
  position: absolute;
  z-index: 0;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.2);
}
body.collection .hero .slider .slide:not(:first-child) {
  display: none;
}
body.collection.norway .hero .slider #slide1 {
  background-image: url(../../collection/img/hero/norway_hero1_sp.jpg);
}
@media only screen and (min-width: 480px) {
  body.collection.norway .hero .slider #slide1 {
    background-image: url(../../collection/img/hero/norway_hero1.jpg);
  }
}
body.collection.norway .hero .slider #slide2 {
  background-image: url(../../collection/img/hero/norway_hero2_sp.jpg);
}
@media only screen and (min-width: 480px) {
  body.collection.norway .hero .slider #slide2 {
    background-image: url(../../collection/img/hero/norway_hero2.jpg);
  }
}
body.collection.norway .hero .slider #slide3 {
  background-image: url(../../collection/img/hero/norway_hero3_sp.jpg);
}
@media only screen and (min-width: 480px) {
  body.collection.norway .hero .slider #slide3 {
    background-image: url(../../collection/img/hero/norway_hero3.jpg);
  }
}
body.collection.mens .hero .slider #slide1 {
  background-image: url(../../collection/img/hero/men_hero1_sp.jpg);
}
@media only screen and (min-width: 480px) {
  body.collection.mens .hero .slider #slide1 {
    background-image: url(../../collection/img/hero/men_hero1.jpg);
  }
}
body.collection.mens .hero .slider #slide2 {
  background-image: url(../../collection/img/hero/men_hero2_sp.jpg);
}
@media only screen and (min-width: 480px) {
  body.collection.mens .hero .slider #slide2 {
    background-image: url(../../collection/img/hero/men_hero2.jpg);
  }
}
body.collection.mens .hero .slider #slide3 {
  background-image: url(../../collection/img/hero/men_hero3_sp.jpg);
}
@media only screen and (min-width: 480px) {
  body.collection.mens .hero .slider #slide3 {
    background-image: url(../../collection/img/hero/men_hero3.jpg);
  }
}
body.collection.womens .hero .slider #slide1 {
  background-image: url(../../collection/img/hero/women_hero1_sp.jpg);
}
@media only screen and (min-width: 480px) {
  body.collection.womens .hero .slider #slide1 {
    background-image: url(../../collection/img/hero/women_hero1.jpg);
  }
}
body.collection.womens .hero .slider #slide2 {
  background-image: url(../../collection/img/hero/women_hero2_sp.jpg);
}
@media only screen and (min-width: 480px) {
  body.collection.womens .hero .slider #slide2 {
    background-image: url(../../collection/img/hero/women_hero2.jpg);
  }
}
body.collection.womens .hero .slider #slide3 {
  background-image: url(../../collection/img/hero/women_hero3_sp.jpg);
}
@media only screen and (min-width: 480px) {
  body.collection.womens .hero .slider #slide3 {
    background-image: url(../../collection/img/hero/women_hero3.jpg);
  }
}
body.collection.junior .hero .slider #slide1 {
  background-image: url(../../collection/img/hero/junior_hero1_sp.jpg);
}
@media only screen and (min-width: 480px) {
  body.collection.junior .hero .slider #slide1 {
    background-image: url(../../collection/img/hero/junior_hero1.jpg);
  }
}
body.collection.junior .hero .slider #slide2 {
  background-image: url(../../collection/img/hero/junior_hero2_sp.jpg);
}
@media only screen and (min-width: 480px) {
  body.collection.junior .hero .slider #slide2 {
    background-image: url(../../collection/img/hero/junior_hero2.jpg);
  }
}
body.collection.junior .hero .slider #slide3 {
  background-image: url(../../collection/img/hero/junior_hero3_sp.jpg);
}
@media only screen and (min-width: 480px) {
  body.collection.junior .hero .slider #slide3 {
    background-image: url(../../collection/img/hero/junior_hero3.jpg);
  }
}
@media only screen and (min-width: 480px) {
  body.collection article .content_wrapper {
    margin-bottom: 5rem;
  }
}
body.collection article .content_wrapper .bnr {
  width: 100%;
  margin: 0 auto 3rem;
}
@media only screen and (min-width: 480px) {
  body.collection article .content_wrapper .bnr {
    width: 80%;
  }
}

body.collection.alpine .content.chapter {
  position: relative;
  height: 100vh;
  margin-top: 30px;
  min-height: 600px;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}
body.collection.alpine .content.chapter#chapter1 {
  background-image: url(../../collection/img/hero/alpine_chapter1.jpg);
}
body.collection.alpine .content.chapter#chapter2 {
  background-image: url(../../collection/img/hero/alpine_chapter2.jpg);
}
body.collection.alpine .content.chapter#chapter3 {
  background-image: url(../../collection/img/hero/alpine_chapter3.jpg);
}
body.collection.alpine .content.chapter .chapter_num {
  position: absolute;
  top: 2.5em;
  right: -1em;
  transform: rotate(-90deg);
  font-size: 3.6em;
}
@media only screen and (min-width: 480px) {
  body.collection.alpine .content.chapter .chapter_num {
    top: 3em;
    right: 0.25em;
  }
}
body.collection.alpine .content.chapter .txt {
  position: absolute;
  top: 40%;
  width: 100%;
}
body.collection.alpine .content.chapter .catch {
  font-family: "Peddana", serif;
  font-size: 2.4em;
  letter-spacing: 0.1em;
  line-height: 1em;
  margin-left: 2em;
}
body.collection.alpine .content.chapter .catch:before {
  content: "";
  display: block;
  width: 200px;
  height: 1px;
  margin: 0 0 0 -100px;
  background-color: #fff;
  transform: rotate(-45deg);
}
body.collection.alpine .content.chapter .read {
  width: 80%;
  margin: 1em auto;
  padding-right: 10%;
  font-size: 1.4em;
  line-height: 2em;
}
@media only screen and (min-width: 480px) {
  body.collection.alpine .content.chapter .read {
    width: 100%;
    margin-top: -3em;
    padding: 0 30%;
    font-size: 1.4em;
  }
}

/*  ==========================================================================
    Stores
    ========================================================================== */
body.stores article .content {
  padding-bottom: 0;
}
body.stores article .content .title img {
  border: 1px solid #ccc;
}
body.stores article .content .acmenu .category {
  display: block;
  position: relative;
  padding: 1.2em 1em;
  cursor: pointer;
}
body.stores article .content .acmenu .category:after {
  content: "+";
  position: absolute;
  right: 1em;
}
body.stores article .content .acmenu .category.open {
  color: #888;
}
body.stores article .content .acmenu .category.open:after {
  content: "×";
}
body.stores article .content .acmenu .category {
  font-size: 1.8em;
  margin: 0;
  padding: 1em 2em;
  border-top: 1px solid #ccc;
}
body.stores article .content .acmenu .category:after {
  right: 0.7777777777em;
}
body.stores article .content .acmenu .pages {
  padding-bottom: 0.6em;
}
body.stores article .content .acmenu .pages .page a {
  padding: 0.6em 2em;
}
body.stores article .content .acmenu .tiles .tile {
  color: #888;
  font-size: 1.2em;
  margin-bottom: 2em;
  padding-top: 2em;
  word-wrap: break-word;
}
body.stores article .content .acmenu .tiles .tile .name {
  color: #000;
  font-size: 1.2em;
}
body.stores article .content .acmenu .tiles .tile a {
  color: #09c;
}
body.stores article .content .acmenu .tiles .tile a:hover {
  text-decoration: underline;
}
body.stores article .content.country {
  padding: 5em 0 7em !important;
}
body.stores article .content.country .btn {
  padding: 0.75em 2em;
  color: #fff;
  background: #444;
  font-size: 1.4em;
  font-weight: bold;
}
body.stores article .content.country .btn .select_body {
  background: #444;
  font-family: "Roboto", sans-serif;
  font-size: 1rem;
  font-weight: normal;
}

/*  ==========================================================================
    Detail
    ========================================================================== */
body.detail article .item {
  padding-bottom: 0 !important;
}
body.detail article .item #title_forPC {
  display: none;
}
@media only screen and (min-width: 800px) {
  body.detail article .item #title_forPC {
    display: inline;
  }
  body.detail article .item #title_forSP {
    display: none;
  }
  body.detail article .item .wrapperL {
    width: 60%;
    /*
    a:hover img {
        background: #666; 
    }
    */
  }
  body.detail article .item .wrapperR {
    width: 40%;
  }
  body.detail article .item #sticky_parent {
    display: flex;
  }
  body.detail article .item #sticky_parent #sticky {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    padding: 30px 0;
  }
}
body.detail article .item .name {
  font-size: 4.8em;
  line-height: 1.1;
}
body.detail article .item .num {
  margin: 1em 0;
  font-size: 1.4em;
}
body.detail article .item .wrapperR {
  display: inline-block;
}
body.detail article .item .color {
  text-align: center;
}
@media only screen and (min-width: 800px) {
  body.detail article .item .color {
    text-align: left;
  }
}
@media only screen and (max-width: 799px) {
  body.detail article .item .color .tiles {
    padding-top: 1em;
    padding-bottom: 1em;
    border: 1px solid #222;
    border-left: none;
    border-right: none;
  }
}
body.detail article .item .color .tiles .tile a {
  width: 3em;
  height: 3em;
  margin: 0.8em;
  border: 1px solid #666;
}
body.detail article .item .color .tiles .tile a.selected {
  border: 2px solid #fff;
}
body.detail article .item .color .tiles .tile a.WT, body.detail article .item .color .tiles .tile a.WT1, body.detail article .item .color .tiles .tile a.WT2, body.detail article .item .color .tiles .tile a.WTBK, body.detail article .item .color .tiles .tile a.WTGR, body.detail article .item .color .tiles .tile a.WTNV, body.detail article .item .color .tiles .tile a.WTBL, body.detail article .item .color .tiles .tile a.WTTQ, body.detail article .item .color .tiles .tile a.HEWT, body.detail article .item .color .tiles .tile a.SW {
  background: #eee;
}
body.detail article .item .color .tiles .tile a.OW, body.detail article .item .color .tiles .tile a.OW1, body.detail article .item .color .tiles .tile a.OW2, body.detail article .item .color .tiles .tile a.OWBE {
  background: #eee;
}
body.detail article .item .color .tiles .tile a.BK, body.detail article .item .color .tiles .tile a.BK1, body.detail article .item .color .tiles .tile a.BK2, body.detail article .item .color .tiles .tile a.BKOW, body.detail article .item .color .tiles .tile a.BKGR, body.detail article .item .color .tiles .tile a.BKBK, body.detail article .item .color .tiles .tile a.BKWT, body.detail article .item .color .tiles .tile a.BK-RD-WT, body.detail article .item .color .tiles .tile a.BK-GR-RD-WT, body.detail article .item .color .tiles .tile a.BK-WT-SW, body.detail article .item .color .tiles .tile a.BK-MA-SW, body.detail article .item .color .tiles .tile a.HEBK {
  background: #000;
}
body.detail article .item .color .tiles .tile a.SI, body.detail article .item .color .tiles .tile a.SI1, body.detail article .item .color .tiles .tile a.SI2 {
  background: #ccc;
}
body.detail article .item .color .tiles .tile a.BR, body.detail article .item .color .tiles .tile a.BR1, body.detail article .item .color .tiles .tile a.BR2 {
  background: #963;
}
body.detail article .item .color .tiles .tile a.BE, body.detail article .item .color .tiles .tile a.BE1, body.detail article .item .color .tiles .tile a.BE2 {
  background: #ae9e78;
}
body.detail article .item .color .tiles .tile a.BO, body.detail article .item .color .tiles .tile a.BO1, body.detail article .item .color .tiles .tile a.BO2 {
  background: #730325;
}
body.detail article .item .color .tiles .tile a.RB, body.detail article .item .color .tiles .tile a.RB1, body.detail article .item .color .tiles .tile a.DB, body.detail article .item .color .tiles .tile a.DB1, body.detail article .item .color .tiles .tile a.DB2, body.detail article .item .color .tiles .tile a.LNV {
  background: #084999;
}
body.detail article .item .color .tiles .tile a.NV, body.detail article .item .color .tiles .tile a.NV1, body.detail article .item .color .tiles .tile a.NV2, body.detail article .item .color .tiles .tile a.DN, body.detail article .item .color .tiles .tile a.DN1, body.detail article .item .color .tiles .tile a.DN2, body.detail article .item .color .tiles .tile a.NVBL, body.detail article .item .color .tiles .tile a.NVNV, body.detail article .item .color .tiles .tile a.NVWT, body.detail article .item .color .tiles .tile a.NVRD, body.detail article .item .color .tiles .tile a.NVTQ, body.detail article .item .color .tiles .tile a.NVGR, body.detail article .item .color .tiles .tile a.NVPK, body.detail article .item .color .tiles .tile a.NV-BL-WT, body.detail article .item .color .tiles .tile a.NV-GR-LB-WT, body.detail article .item .color .tiles .tile a.NV-LB-LMN, body.detail article .item .color .tiles .tile a.MN, body.detail article .item .color .tiles .tile a.MN1, body.detail article .item .color .tiles .tile a.MN2 {
  background: #011140;
}
body.detail article .item .color .tiles .tile a.HENV {
  background: #414557;
}
body.detail article .item .color .tiles .tile a.DR, body.detail article .item .color .tiles .tile a.DR1, body.detail article .item .color .tiles .tile a.DR2 {
  background: #870416;
}
body.detail article .item .color .tiles .tile a.RD, body.detail article .item .color .tiles .tile a.RD1, body.detail article .item .color .tiles .tile a.RD2, body.detail article .item .color .tiles .tile a.RDBK, body.detail article .item .color .tiles .tile a.RDWT, body.detail article .item .color .tiles .tile a.RDBL, body.detail article .item .color .tiles .tile a.RDNV, body.detail article .item .color .tiles .tile a.FLRD, body.detail article .item .color .tiles .tile a.FLRD1, body.detail article .item .color .tiles .tile a.FLRD2 {
  background: #d62921;
}
body.detail article .item .color .tiles .tile a.GN, body.detail article .item .color .tiles .tile a.GN1, body.detail article .item .color .tiles .tile a.GN2, body.detail article .item .color .tiles .tile a.GNWT {
  background: #0f7a4c;
}
body.detail article .item .color .tiles .tile a.BL, body.detail article .item .color .tiles .tile a.BL1, body.detail article .item .color .tiles .tile a.BL2, body.detail article .item .color .tiles .tile a.BLOR, body.detail article .item .color .tiles .tile a.BLBL, body.detail article .item .color .tiles .tile a.BLBK, body.detail article .item .color .tiles .tile a.BLNV, body.detail article .item .color .tiles .tile a.BLWT, body.detail article .item .color .tiles .tile a.BLRD, body.detail article .item .color .tiles .tile a.ITB {
  background: #1074a6;
}
body.detail article .item .color .tiles .tile a.MA, body.detail article .item .color .tiles .tile a.MA1, body.detail article .item .color .tiles .tile a.MAWT, body.detail article .item .color .tiles .tile a.MANV, body.detail article .item .color .tiles .tile a.HEMA, body.detail article .item .color .tiles .tile a.DNMA {
  background: #d20e4c;
}
body.detail article .item .color .tiles .tile a.CO, body.detail article .item .color .tiles .tile a.CONV, body.detail article .item .color .tiles .tile a.COOR {
  background: #ff7862;
}
body.detail article .item .color .tiles .tile a.DG, body.detail article .item .color .tiles .tile a.DG1 {
  background: #034637;
}
body.detail article .item .color .tiles .tile a.GR, body.detail article .item .color .tiles .tile a.GR1, body.detail article .item .color .tiles .tile a.GR2, body.detail article .item .color .tiles .tile a.GRBL, body.detail article .item .color .tiles .tile a.GRRD, body.detail article .item .color .tiles .tile a.OBSW, body.detail article .item .color .tiles .tile a.GRBK, body.detail article .item .color .tiles .tile a.GRLP, body.detail article .item .color .tiles .tile a.GRYG, body.detail article .item .color .tiles .tile a.HEGR, body.detail article .item .color .tiles .tile a.DGR, body.detail article .item .color .tiles .tile a.DGR1, body.detail article .item .color .tiles .tile a.DGR2, body.detail article .item .color .tiles .tile a.DGR3 {
  background: #7e8081;
}
body.detail article .item .color .tiles .tile a.SBL {
  background: #9dabb9;
}
body.detail article .item .color .tiles .tile a.OB, body.detail article .item .color .tiles .tile a.OB1, body.detail article .item .color .tiles .tile a.OBGR, body.detail article .item .color .tiles .tile a.OBBK, body.detail article .item .color .tiles .tile a.OBWT, body.detail article .item .color .tiles .tile a.OB-YG-WT, body.detail article .item .color .tiles .tile a.OB-BK-YG-WT, body.detail article .item .color .tiles .tile a.OB-MA-WT {
  background: #2a2b2d;
}
body.detail article .item .color .tiles .tile a.YE, body.detail article .item .color .tiles .tile a.LY, body.detail article .item .color .tiles .tile a.GY, body.detail article .item .color .tiles .tile a.GY1 {
  background: yellow;
}
body.detail article .item .color .tiles .tile a.YG, body.detail article .item .color .tiles .tile a.YG1, body.detail article .item .color .tiles .tile a.YG2, body.detail article .item .color .tiles .tile a.YGNV, body.detail article .item .color .tiles .tile a.FGN {
  background: #76b23a;
}
body.detail article .item .color .tiles .tile a.OR, body.detail article .item .color .tiles .tile a.OR1, body.detail article .item .color .tiles .tile a.FLOR, body.detail article .item .color .tiles .tile a.VOR, body.detail article .item .color .tiles .tile a.VOR1, body.detail article .item .color .tiles .tile a.VOR2, body.detail article .item .color .tiles .tile a.FOR {
  background: #da4f21;
}
body.detail article .item .color .tiles .tile a.TQ, body.detail article .item .color .tiles .tile a.TQ1, body.detail article .item .color .tiles .tile a.TQ2, body.detail article .item .color .tiles .tile a.TQWT, body.detail article .item .color .tiles .tile a.TQMA, body.detail article .item .color .tiles .tile a.NAB, body.detail article .item .color .tiles .tile a.NAB1, body.detail article .item .color .tiles .tile a.NAB2 {
  background: #14919e;
}
body.detail article .item .color .tiles .tile a.LO, body.detail article .item .color .tiles .tile a.LO1 {
  background: #f7ba2f;
}
body.detail article .item .color .tiles .tile a.KA, body.detail article .item .color .tiles .tile a.KA1, body.detail article .item .color .tiles .tile a.KA2 {
  background: #4d5f35;
}
body.detail article .item .color .tiles .tile a.IN, body.detail article .item .color .tiles .tile a.IN1, body.detail article .item .color .tiles .tile a.IN2, body.detail article .item .color .tiles .tile a.INOW, body.detail article .item .color .tiles .tile a.INWT, body.detail article .item .color .tiles .tile a.ININ, body.detail article .item .color .tiles .tile a.HEIN {
  background: #374247;
}
body.detail article .item .color .tiles .tile a.PK, body.detail article .item .color .tiles .tile a.PK1, body.detail article .item .color .tiles .tile a.PK2 {
  background: #e7558b;
}
body.detail article .item .color .tiles .tile a.PU, body.detail article .item .color .tiles .tile a.PU1 {
  background: #993366;
}
body.detail article .item .color .tiles .tile a.DP {
  background: #663366;
}
body.detail article .item .color .tiles .tile a.LB, body.detail article .item .color .tiles .tile a.LB1 {
  background: #45b0de;
}
body.detail article .item .color .tiles .tile a.LMN, body.detail article .item .color .tiles .tile a.LM1, body.detail article .item .color .tiles .tile a.NVYE, body.detail article .item .color .tiles .tile a.LMNBL, body.detail article .item .color .tiles .tile a.LMNTQ, body.detail article .item .color .tiles .tile a.LIM, body.detail article .item .color .tiles .tile a.LIM1, body.detail article .item .color .tiles .tile a.LIM2, body.detail article .item .color .tiles .tile a.LIMGR {
  background: #efe835;
}
body.detail article .item .color .tiles .tile a.MI, body.detail article .item .color .tiles .tile a.IBL {
  background: #acd9d6;
}
body.detail article .item .color .tiles .tile a.LP, body.detail article .item .color .tiles .tile a.LPWT {
  background: #fc9189;
}
body.detail article .item .color .tiles .tile a.CG, body.detail article .item .color .tiles .tile a.CG1, body.detail article .item .color .tiles .tile a.CG2 {
  background: #383c3d;
}
body.detail article .item .color .tiles .tile a.BLG {
  background: #2b5a5a;
}
body.detail article .item .color .tiles .tile a.SX, body.detail article .item .color .tiles .tile a.SXBL {
  background: #85aacc;
}
body.detail article .item .color .tiles .tile a.OL {
  background: #343528;
}
body.detail article .item .color .tiles .tile a.CB {
  background: #7cdce3;
}
body.detail article .item .color .tiles .tile a.AB {
  background: #00a9b6;
}
body.detail article .item .color .tiles .tile a.BM {
  background: #4872d7;
}
body.detail article .item .color .tiles .tile a.HEBL {
  background: #1c6cb9;
}
body.detail article .item .color .tiles .tile a#ESA72OB10.MN1:after {
  content: "";
  display: block;
  width: 50%;
  height: 100%;
  margin-left: 50%;
  border-radius: 0 100% 100% 0/0 50% 50% 0;
  background: #fff;
}
body.detail article .item .color .tiles .tile a#ESA82KT63.DNMA:after {
  content: "";
  display: block;
  width: 100%;
  height: 50%;
  margin-top: 50%;
  border-radius: 0 0 50% 50%/0 0 100% 100%;
  background: #011140;
}
body.detail article .item .txt .subTitle {
  color: #888;
}
body.detail article .item .txt .lists .list {
  margin-left: 1.5em;
  list-style: disc outside;
  font-size: 1.4em;
}
body.detail article .item .help {
  width: 100%;
}
body.detail article .item .help li {
  display: inline-block;
  width: 50%;
  margin-top: 1em;
  font-size: 1.2em;
}
body.detail article .item .help li a {
  display: block;
  padding: 1em;
  color: #fff;
  background: #333;
  font-weight: bold;
  text-align: center;
  line-height: 1em;
  transition: background-color 0.4s ease;
}
body.detail article .item .help li a:after {
  content: "";
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  color: #09c;
  padding-left: 0.5em;
}
body.detail article .item .help li a:hover {
  background: #444;
}
body.detail article .item .help li.size a {
  margin-right: 2px;
  border-radius: 2em 0 0 2em/2em 0 0 2em;
}
body.detail article .item .help li.size a:before {
  content: "";
  font-family: "Font Awesome 5 Free";
  font-size: 1.2em;
  font-weight: 900;
  vertical-align: middle;
  padding-right: 0.5em;
}
body.detail article .item .help li.care a {
  border-radius: 0 2em 2em 0/0 2em 2em 0;
}
body.detail article .item .help li.care a:before {
  content: "";
  font-family: "Font Awesome 5 Free";
  font-size: 1.2em;
  font-weight: 900;
  vertical-align: middle;
  padding-right: 0.5em;
}
body.detail article .content_inner {
  margin-top: 1rem !important;
  margin-bottom: 1rem !important;
}
body.detail article .material_tmb .subTitle {
  display: block;
  width: 100%;
  position: relative;
  font-size: 1.2em;
  cursor: pointer;
  border: 1px solid #ccc;
  border-radius: 5px;
  margin-bottom: 5px;
  padding: 0.5em 1.25em 0.5em 0.75em;
}
body.detail article .material_tmb .subTitle:after {
  position: absolute;
  right: 0.75em;
  content: "";
  font-family: FontAwesome;
}
body.detail article .material_tmb .subTitle:hover {
  color: #09c;
  background: #eee;
  border-color: #09c;
}
body.detail article .material_tmb .tiles {
  font-size: 0;
}
body.detail article .material_tmb .tiles .tile a {
  padding: 0 1em;
  border: 2px solid black;
  background: #fff;
}
body.detail article .material_tmb .tiles .tile a img {
  width: 100%;
  height: auto;
}
body.detail article .functionalities {
  margin-top: 5em;
  color: #fff;
  background-color: #000;
  background-image: url(../../collection/img/functionalities_bg.jpg);
  background-repeat: no-repeat;
  background-position: center center;
  background-attachment: scroll;
  background-size: cover;
}
body.detail article .functionalities .read {
  font-size: 1.4em;
  margin-bottom: 2em;
}
body.detail article .material {
  background: #222;
  position: relative;
  position: relative;
}
body.detail article .material::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='2800' height='100' fill='rgb(0,0,0)' fill-opacity='1'%3E%3Cpolygon points='0,0 2800,0 0,100'%3E%3C/polygon%3E%3C/svg%3E");
  background-position: center center;
  background-repeat: no-repeat;
  content: "";
  height: 100px;
  left: 0;
  position: absolute;
  right: 0;
  width: 100%;
  z-index: 1;
  top: 0;
}
body.detail article .material::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='2800' height='100' fill='rgb(0,0,0)' fill-opacity='1'%3E%3Cpolygon points='0,100 2800,100 2800,0'%3E%3C/polygon%3E%3C/svg%3E");
  background-position: center center;
  background-repeat: no-repeat;
  content: "";
  height: 100px;
  left: 0;
  position: absolute;
  right: 0;
  width: 100%;
  z-index: 1;
  bottom: 0;
}
body.detail article .material .content_wrapper > .title {
  position: relative;
  top: -1em;
  z-index: 999;
  font-size: 3.6em;
}
body.detail article .material .btn {
  display: block;
  margin: 2em 0 6em;
  font-size: 1.2em;
  text-align: center;
}
body.detail article .material .btn a {
  display: inline-block;
  padding: 1em 2em;
  border-radius: 2em;
  color: #fff;
  background: #333;
  font-weight: bold;
  text-align: center;
  line-height: 1em;
  transition: background-color 0.4s ease;
}
body.detail article .material .btn a:after {
  content: "";
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  color: #09c;
  padding-left: 0.5em;
}
body.detail article .material .btn a:hover {
  background: #444;
}
body.detail article .recommend {
  font-size: 0.8em;
}
body.detail article .recommend a {
  background: #222;
}
body.detail article .recommend a .img_wrapper .rpsimg {
  max-width: 200px;
}
body.detail article .back {
  display: block;
  width: 100%;
  font-size: 1.2em;
  text-align: right;
}
body.detail article .back a {
  display: inline-block;
  padding: 0.75em 1.25em;
  border-radius: 2em;
  color: #fff;
  background: #333;
  text-align: center;
  line-height: 1em;
  transition: background-color 0.4s ease;
}
body.detail article .back a:before {
  content: "";
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  color: #09c;
  padding-right: 0.5em;
}
body.detail article .back a:hover {
  background: #444;
}

/*  ==========================================================================
    Size chart
    ========================================================================== */
body.size article .btn {
  padding-bottom: 3em;
  color: #ccc;
  font-size: 2.4em;
  text-align: center;
}
body.size article .btn a {
  margin: 0 1em;
  color: #09c;
}
body.size article .btn a:hover {
  border-bottom: 1px solid #09c;
}
body.size article .btn a.selected {
  color: #000;
  border-bottom: 1px solid #000;
}
body.size article table {
  width: 100%;
  max-width: 768px;
  margin: 3em auto;
  border-top: 1px solid #ccc;
  border-bottom: 1px solid #ccc;
}
@media only screen and (min-width: 480px) {
  body.size article table {
    border-left: 1px solid #ccc;
    border-right: 1px solid #ccc;
  }
}
body.size article table tr.color {
  background: #eee;
}
body.size article table th, body.size article table td {
  width: 12%;
  padding: 1em 0.5em;
  font-size: 1.2em;
  text-align: center;
}
body.size article table th {
  width: 28%;
  color: #888;
  font-weight: normal;
}
body.size article table td {
  border-left: 1px solid #ccc;
}

/*  ==========================================================================
    Care guide
    ========================================================================== */
body.care article .content .content_wrapper {
  max-width: 740px;
}

/*  ==========================================================================
    Company
    ========================================================================== */
body.company article .title {
  margin-bottom: 1em;
}
body.company article .title .rpsimg {
  width: 70%;
  max-width: 250px;
  max-height: 67px;
}
body.company article dl {
  font-size: 1.4em;
  text-align: center;
}
body.company article dl dt {
  color: #888;
  margin-bottom: 0.5em;
}
body.company article dl dd {
  margin-bottom: 3em;
}

/*  ==========================================================================
    History
    ========================================================================== */
body.history article table {
  width: 100%;
  margin: 3em 0;
}
body.history article table tr {
  border-bottom: 1px solid #ccc;
}
body.history article table th, body.history article table td {
  width: 40%;
  padding: 0.5em 1em 4em 0;
  font-size: 1.2em;
  vertical-align: top;
}
body.history article table th {
  color: #888;
  font-weight: normal;
  text-align: left;
  padding: 0 1em 1em 0;
}
body.history article table .year {
  width: 20%;
  color: #888;
  font-size: 1.4em;
}

/*  ==========================================================================
    Philosophy, Brand
    ========================================================================== */
body.about3 article .tiles .tile {
  margin-bottom: 8em;
}
body.about3 article .tiles .tile .read {
  text-align: justify;
}
body.about3 article .tiles .tile .read p {
  font-size: 1.4em;
  line-height: 1.8;
  margin-bottom: 1.5em;
}

body.philosophy .img_wrapper .rpsimg {
  max-width: 125px;
  max-height: 125px;
}
body.philosophy .title {
  max-width: 480px;
  font-size: 1.8em;
  margin-top: 1em;
}
body.philosophy .title.title1 {
  color: #2b2b7b;
}
body.philosophy .title.title2 {
  color: #e64a28;
}
body.philosophy .title.title3 {
  color: #2aa272;
}
body.philosophy .title.title4 {
  color: #f9ab28;
}
body.philosophy .title.title5 {
  color: #878787;
}

body.brand article .img_wrapper .rpsimg {
  max-width: 200px;
  max-height: 200px;
}
body.brand article .title {
  color: #888;
  font-size: 1.4em;
  margin: 2em 0;
}
body.brand article .title:before {
  content: "- ";
}
body.brand article .title:after {
  content: " -";
}

/*  ==========================================================================
    Contact
    ========================================================================== */
body.contact article input::placeholder {
  color: #999;
}
body.contact article input:focus, body.contact article select:focus, body.contact article textarea:focus {
  background: #fff;
  border: none;
  outline: 2px #09c solid;
}
body.contact article .form-text {
  width: 100%;
  font-size: 1.4em;
  padding: 0.5em 1em;
  border-radius: 0;
  color: #000;
  background: #f5f5f5;
  margin-top: 20px;
}
body.contact article .form-submit {
  margin-top: 1em;
  width: 100%;
  padding: 0.2em;
  font-size: 1.6em;
  font-weight: bold;
  border: 1px solid #f90;
  border-radius: 5px;
  -webkit-border-radius: 5px;
  /* Safari,Google Chrome用 */
  -moz-border-radius: 5px;
  color: #fff;
  background: #F90;
  /* for non-css3 browsers */
  box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.25);
  -moz-box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.25);
  -webkit-box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.25);
}
body.contact article .form-submit:hover {
  background: #F60;
  /* for non-css3 browsers */
}

/*  ==========================================================================
    aside (join us)
    ========================================================================== */
#joinus {
  padding: 80px 0;
  background: #323232 url(../../img/join.png) left center no-repeat;
  background-size: cover;
}
@media only screen and (min-width: 800px) {
  #joinus {
    background-size: contain;
  }
}
#joinus .content_wrapper {
  color: #fff;
  text-align: center;
}
@media only screen and (min-width: 800px) {
  #joinus .content_wrapper {
    text-align: right;
  }
}
#joinus .content_wrapper .title {
  color: #eee;
  font-size: 4.8em;
  vertical-align: middle;
}
#joinus .content_wrapper .fa-angle-right {
  font-size: 2.4em;
  color: #09c;
  vertical-align: middle;
  padding: 0 1em;
}
#joinus .content_wrapper .fa-facebook,
#joinus .content_wrapper .fa-instagram {
  font-size: 3em;
  vertical-align: middle;
  padding: 0 0.5em;
}
#joinus .content_wrapper a {
  color: #fff;
}
#joinus .content_wrapper a:hover {
  color: #fff;
}

/*  ==========================================================================
    Footer
    ========================================================================== */
@media only screen and (max-width: 799px) {
  .acmenu .category {
    display: block;
    position: relative;
    padding: 1.2em 1em;
    cursor: pointer;
  }
  .acmenu .category:after {
    content: "+";
    position: absolute;
    right: 1em;
  }
  .acmenu .category.open {
    color: #888;
  }
  .acmenu .category.open:after {
    content: "×";
  }
  .acmenu .pages {
    padding-bottom: 0.6em;
  }
  .acmenu .pages .page a {
    padding: 0.6em 2em;
  }
}

footer {
  position: relative;
  padding: 5em 0 3em;
  color: #ccc;
  background: #000;
  font-weight: 500;
}
footer #pagetop {
  display: none;
  position: fixed;
  z-index: 99999;
  right: 0;
  bottom: 0;
  width: auto;
}
footer #pagetop a {
  display: block;
  padding: 2em;
}
@media only screen and (min-width: 800px) {
  footer #pagetop a {
    display: block;
    margin: 0 1em 1em 0;
  }
}
footer a {
  color: #fff;
}
footer a:hover {
  color: #ccc;
  text-decoration: underline;
}
footer .logo {
  width: 20%;
  margin: 5em auto 1em;
}
@media only screen and (max-width: 799px) {
  footer .tiles {
    font-size: 1.4em;
    border-bottom: 1px solid #ccc;
  }
  footer .tiles .tile {
    margin-bottom: 0;
  }
  footer .tiles .tile .menu {
    border-top: 1px solid #ccc;
  }
}
@media only screen and (min-width: 800px) {
  footer .tiles .tile .menu .category {
    color: #888;
    margin-bottom: 0.2em;
    padding: 0.2em 0;
  }
  footer .tiles .tile .menu .pages {
    margin-right: 20%;
  }
  footer .tiles .tile .menu .pages .page {
    display: block;
    margin-bottom: 0.2em;
  }
  footer .tiles .tile .menu .pages .page a {
    display: inline-block;
    padding: 0.2em 0;
  }
  footer .tiles .tile .menu .pages .page a:before {
    content: "- ";
  }
}

/* ==========================================================================
   Media Queries
   ========================================================================== */
/* ==========================================================================
   Helper classes
   ========================================================================== */
.hidden {
  display: none !important;
  visibility: hidden;
}

.visuallyhidden {
  border: 0;
  clip: rect(0 0 0 0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}

.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
  clip: auto;
  height: auto;
  margin: 0;
  overflow: visible;
  position: static;
  width: auto;
}

.invisible {
  visibility: hidden;
}

.clearfix:before, .content_wrapper.colpc2:before,
.clearfix:after,
.content_wrapper.colpc2:after {
  content: " ";
  display: table;
}

.clearfix:after, .content_wrapper.colpc2:after {
  clear: both;
}

.clearfix, .content_wrapper.colpc2 {
  *zoom: 1;
}

/* ==========================================================================
   Print styles
   ========================================================================== */
@media print {
  *,
*:before,
*:after {
    background: transparent !important;
    color: #000 !important;
    box-shadow: none !important;
    text-shadow: none !important;
  }

  a,
a:visited {
    text-decoration: underline;
  }

  a[href]:after {
    content: " (" attr(href) ")";
  }

  abbr[title]:after {
    content: " (" attr(title) ")";
  }

  a[href^="#"]:after,
a[href^="javascript:"]:after {
    content: "";
  }

  pre,
blockquote {
    border: 1px solid #999;
    page-break-inside: avoid;
  }

  thead {
    display: table-header-group;
  }

  tr,
img {
    page-break-inside: avoid;
  }

  img {
    max-width: 100% !important;
  }

  p,
h2,
h3 {
    orphans: 3;
    widows: 3;
  }

  h2,
h3 {
    page-break-after: avoid;
  }
}