/* variables */
.none {
  display: none;
}
html,
window,
document {
  overflow: hidden;
  font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", sans-serif;
  background-color: #fff;
}
body {
  /*    -webkit-tap-highlight-color: rgba(0,0,0,0);*/

  background-color: #fff;
}
body #orientation-alert {
  display: none;
}
body #animationmode-dialog {
  display: none;
}
body.blue #orientation-alert img {
  background-color: #22d9ff;
}
body.pink #orientation-alert img {
  background-color: #f96aff;
}
body.orange #orientation-alert img {
  background-color: #ffd000;
}
body.alert #main,
body.alert #top-nav {
  visibility: hidden;
}
body.alert #orientation-alert {
  background-color: #fff;
  z-index: 3;
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
}
body.alert #orientation-alert img {
  position: absolute;
  display: block;
  margin-left: -125px;
  left: 50%;
}
body.blue #animationmode-dialog .dialog {
  background-color: #22d9ff;
}
body.pink #animationmode-dialog .dialog {
  background-color: #f96aff;
}
body.orange #animationmode-dialog .dialog {
  background-color: #ffd000;
}
body.animationmode-dialog #animationmode-dialog {
  display: block;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.85);
  position: absolute;
  opacity: 0;
  z-index: 5;
}
body.animationmode-dialog #animationmode-dialog .dialog {
  position: absolute;
  display: block;
  top: 50%;
  width: 250px;
  height: auto;
  padding-bottom: 20px;
  margin-top: -125px;
  margin-left: -125px;
  left: 50%;
}
body.animationmode-dialog #animationmode-dialog p {
  margin-top: 15px;
  margin-left: 30px;
  margin-bottom: 10px;
  text-align: justify;
  line-height: 1.7em;
  font-size: 9pt;
  display: block;
  width: 195px;
}
body.animationmode-dialog #animationmode-dialog .button {
  margin-left: 30px;
  margin-top: 10px;
}
#cover,
#index,
#main {
  display: none;
  opacity: 0;
  background-color: #fff;
}
#loading-indicator {
  position: absolute;
  width: 100%;
  height: 100%;
}
#loading-indicator img {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -6px;
  margin-top: -4px;
}
body.blue .button-index {
  background-color: #f96aff;
}
body.pink .button-index {
  background-color: #ffd000;
}
body.orange .button-index {
  background-color: #22d9ff;
}
#cover {
  position: absolute;
  height: 100%;
  width: 100%;
}
#cover .text {
  z-index: 1;
  position: absolute;
  top: 10px;
}
#cover .photo {
  position: absolute;
  display: block;
  top: 50%;
  margin-top: -161px;
  left: 50%;
  margin-left: -120px;
  width: 248px;
}
#cover .photo img {
  float: left;
}
#cover .title {
  display: block;
  width: 282px;
  /*        height:400px;*/

  position: absolute;
  left: 50%;
  margin-left: -146px;
  margin-top: 0px;
}
#cover .button-index {
  right: 0;
  margin-right: -30px;
  position: absolute;
  top: 55%;
  width: 90px;
  height: 90px;
  border-radius: 150px;
}
#index {
  background-color: #efefef;
  position: absolute;
  height: 100%;
  width: 100%;
}
#index .cont {
  position: relative;
  margin-left: auto;
  margin-right: auto;
  display: block;
}
#index .title img {
  position: relative;
  margin-left: auto;
  margin-right: auto;
  display: block;
  margin-top: 20px;
}
#index .credits {
  margin-bottom: 0px;
}
#index #about {
  position: relative;
  margin-left: auto;
  margin-right: auto;
  display: block;
  margin-top: 20px;
  color: #010101;
  display: none;
  opacity: 0;
  width: 265px;
  font-size: 10pt;
  line-height: 1.8em;
  text-align: justify;
  padding-bottom: 30px;
}
#index #about .close {
  position: absolute;
  left: 250px;
  top: -85px;
}
#index .right-arrow {
  position: fixed;
  top: 50%;
  right: 10px;
}
#index #content-index {
  display: none;
  opacity: 0;
  width: 300px;
  margin-left: auto;
  margin-right: auto;
}
#index #content-index .index {
  position: relative;
  margin-left: auto;
  margin-right: auto;
  display: block;
  margin-top: 30px;
}
header {
  z-index: 4;
  position: absolute;
  float: left;
  margin-top: 10px;
  margin-left: 10px;
  margin-bottom: 10px;
}
header .uniqlo-logo {
  float: left;
}
header .pagenavi-title {
  float: left;
  display: none;
}
header .likelist-title {
  float: left;
  display: none;
}
header.pagenavi .uniqlo-logo,
header.pagenavi .brand-logo {
  display: none;
}
header.pagenavi .pagenavi-title {
  display: block;
}
header.likelist .uniqlo-logo,
header.likelist .brand-logo {
  display: none;
}
header.likelist .likelist-title {
  display: block;
}
#find-my-perfect-match,
#brand-profile-title {
  position: absolute;
  top: 61px;
  left: 25px;
}
#fantastic-moment {
  position: absolute;
  /*    left:50%;*/

  margin-left: 50%;
  left: -95px;
  display: none;
}
#overlay.page-navi #detail-button-close {
  top: 15px;
  right: 22px;
  z-index: 1;
}
#overlay.page-navi #page-navi-wrapper {
  display: block;
  border-top: 1px solid #000;
}
#overlay.page-navi #button-index {
  display: block;
  position: absolute;
  right: 56px;
  top: 10px;
}
#overlay.likelist #likelist-wrapper {
  display: block;
  border-top: 1px solid #000;
  margin-top: 50px;
}
#overlay.share .brand-logo {
  display: none;
}
#overlay.share #share-to-sns {
  display: block;
}
#overlay {
  display: none;
  z-index: 3;
  background-color: #fff;
  width: 100%;
  position: absolute;
  color: #221815;
}
#overlay #button-index {
  display: none;
}
#overlay #detail-button-close {
  position: absolute;
  top: 10px;
  right: 10px;
}
#overlay #page-navi-wrapper {
  color: #221815;
  position: relative;
  margin-left: auto;
  margin-right: auto;
  margin-top: 69px;
  margin-top: 63px;
  overflow: hidden;
  margin-left: 10px;
  margin-right: 10px;
  display: none;
}
#overlay #page-navi-wrapper #page-navi {
  color: #221815;
  position: relative;
  margin-left: auto;
  margin-right: auto;
  margin-top: 69px;
  margin-top: 8px;
  display: none;
  width: 780px;
  height: 370px;
  margin-left: 0;
}
#overlay #page-navi-wrapper #page-navi ul.row li {
  position: relative;
  float: left;
  margin-right: 10px;
}
#overlay #page-navi-wrapper #page-navi ul.row li ul.col li img.you-are-here {
  position: absolute;
  top: 0;
  left: 0;
}
#overlay #page-navi-wrapper #page-navi img.header {
  margin-top: 5px;
}
#overlay #likelist-wrapper {
  color: #221815;
  position: relative;
  margin-left: auto;
  margin-right: auto;
  margin-top: 69px;
  overflow: hidden;
  display: none;
  margin-left: 10px;
  margin-right: 10px;
  height: 100%;
  width: 100%;
  background-color: #fff;
}
#overlay #likelist-wrapper #likelist {
  background-color: #000;
  margin-top: 20px;
}
#overlay #likelist-wrapper #likelist li {
  float: left;
  margin-right: 7px;
  margin-bottom: 7px;
}
#overlay #likelist-wrapper #likelist ul {
  width: 307px;
}
#overlay #likelist-wrapper #likelist a.disabled {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
#overlay #detail {
  color: #221815;
  position: relative;
  margin-left: auto;
  margin-right: auto;
  margin-top: 69px;
  display: none;
  width: 273px;
}
#overlay #detail h1 {
  font-size: 16pt;
  font-weight: bold;
}
#overlay #detail #detail-description {
  line-height: 1.5em;
  margin-top: 25px;
  font-size: 9pt;
}
#overlay #detail #detail-items {
  margin-top: 30px;
}
#overlay #detail #detail-items li.detail-item {
  margin-bottom: 25px;
  clear: both;
  height: 100px;
}
#overlay #detail #detail-items li.detail-item img.detail-item-image {
  margin-right: 10px;
  width: 100px;
  height: 100px;
  border: 1px solid #0d0509;
}
#overlay #detail #detail-items li.detail-item div.right {
  display: block;
  width: 160px;
  margin-left: 110px;
  margin-top: -100px;
}
#overlay #detail #detail-items li.detail-item p.commingsoon {
  color: #999999;
  font-size: 8pt;
  display: none;
  margin-top: -14px;
  margin-right: 0px;
  float: right;
}
#overlay #detail #detail-items li.detail-item ul.detail-stickers {
  margin-top: 10px;
}
#overlay #detail #detail-items li.detail-item ul.detail-stickers li {
  display: block;
  float: left;
  margin-right: 5px;
  margin-bottom: 3px;
}
#overlay #detail #detail-items li.detail-item h2 {
  font-size: 10pt;
}
#overlay #detail #detail-items li.detail-item div.detail-buying {
  margin-top: 20px;
  float: left;
  width: 150px;
  display: block;
  margin-bottom: 25px;
}
#overlay #detail #detail-items li.detail-item div.detail-buying p {
  font-size: 9pt;
}
#overlay #detail #detail-items li.detail-item div.detail-buying img {
  float: right;
  margin-top: -20px;
}
#overlay #interview {
  position: relative;
  margin-left: auto;
  margin-right: auto;
  width: 320px;
  heigth: auto;
  display: none;
  opacity: 0;
}
#overlay #interview #interview-inner {
  overflow-y: hidden;
}
#overlay #interview h1 {
  margin-bottom: 14px;
  margin-top: 14px;
  margin-left: 20px;
}
#overlay #interview p {
  margin-top: 20px;
  margin-bottom: 20px;
  margin-left: 20px;
  font-size: 9pt;
  line-height: 1.5em;
  width: 280px;
}
#overlay #interview .qanda {
  margin-bottom: 20px;
}
#overlay #interview .qanda img {
  margin-left: 20px;
  margin-top: 30px;
  margin-bottom: 15px;
}
#overlay #interview .qanda p {
  margin-top: 0;
  margin-bottom: 0;
}
#overlay div.dsc .iliann,
#overlay div.dsc .gvgv {
  display: none;
}
#overlay div.iliann .dsc,
#overlay div.iliann .gvgv {
  display: none;
}
#overlay div.gvgv .dsc,
#overlay div.gvgv .iliann {
  display: none;
}
#overlay div.gvgv .qanda img.irregular {
  margin-top: 10px!important;
}
#overlay #share-to-sns {
  color: #221815;
  position: relative;
  margin-left: auto;
  margin-right: auto;
  margin-top: 69px;
  width: 270px;
  display: none;
}
#overlay #share-to-sns .thumb {
  margin-top: 20px;
  width: 120px;
  height: 120px;
  display: block;
}
#overlay #share-to-sns .thumb img {
  margin-left: auto;
  margin-right: auto;
  padding-top: 50%;
  display: block;
}
#overlay #share-to-sns p {
  display: block;
  font-size: 5pt;
  width: 120px;
  margin-top: 5px;
}
#overlay #share-to-sns p.bold {
  font-weight: bold;
}
#overlay #share-to-sns ul {
  display: block;
  position: absolute;
  top: 57px;
  right: 0;
}
#overlay #share-to-sns ul li {
  margin-bottom: 7px;
}
#overlay #share-to-sns .appended img {
  padding-top: 0!important;
}
#top-nav {
  z-index: 2;
}
#top-nav ul {
  margin-right: 0px;
  right: 0;
  margin-top: 10px;
  position: absolute;
}
#top-nav ul li {
  float: left;
  margin-right: 10px;
}
body.blue #top-nav img {
  background-color: #22d9ff;
}
body.orange #top-nav img {
  background-color: #ffd000;
}
body.pink #top-nav img {
  background-color: #f96aff;
}
#left-nav.hidden #left-nav-buttons li {
  background-image: none;
}
#left-nav.shadow {
  background-image: url(/jp/sp/dip/shared/img/left-nav/left_nav_shadow.png);
  background-repeat: repeat-y;
  background-size: 7px 1px;
  background-position: top right;
}
body.blue #left-nav {
  background-color: rgba(34, 217, 255, 0.8);
}
body.orange #left-nav {
  background-color: rgba(255, 208, 0, 0.8);
}
body.pink #left-nav {
  background-color: rgba(249, 106, 255, 0.8);
}
#left-nav {
  z-index: 1;
  position: absolute;
  width: 234px;
  height: auto;
  top: 0;
  left: 0;
  /*	contents menu*/

}
#left-nav .uniqlo-logo {
  margin-top: 10px;
  margin-left: 10px;
}
#left-nav #left-nav-buttons li {
  background-image: url(/jp/sp/dip/shared/img/left-nav/left_nav_border.png);
  background-repeat: repeat-x;
}
#left-nav #left-nav-buttons li a img.disable {
  opacity: 0.3;
}
#left-nav #left-nav-buttons .left-nav-top {
  background-image: none;
  height: 57px;
}
#left-nav #left-nav-buttons .left-nav-brands {
  height: 60px;
}
#left-nav #left-nav-buttons .label {
  display: block;
  margin-left: 65%;
}
#left-nav #left-nav-buttons li.left-nav-contentlink {
  height: 41px;
}
body.blue a.photo-overlay-button {
  background-color: #22d9ff;
}
body.orange a.photo-overlay-button {
  background-color: #ffd000;
}
body.pink a.photo-overlay-button {
  background-color: #f96aff;
}
#grid-container {
  z-index: -1;
  position: absolute;
  /*    top: 115*0.5px;*/

  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
#grid-container #animation-layer img {
  display: block;
  position: absolute;
}
#grid-container .fixed-image {
  margin-top: -30px;
}
#grid-container .anigif {
  display: none;
}
#grid-container .animating {
  display: inline;
}
#grid-container li.image .carousel-cell {
  width: 270px;
  height: 360px;
}
#grid-container li.coordinate .carousel-cell {
  width: 270px;
  height: 390px;
}
#grid-container li.coordinate .carousel-cell span {
  width: 270px;
  height: 390px;
  top: 0;
  left: 0;
  position: absolute;
  display: none;
  background-color: #fff;
}
#grid-container li.mix .carousel-cell {
  width: 270px;
  height: 256px;
}
#grid-container li.mix .cell-right {
  visibility: hidden;
  width: 0px!important;
}
#grid-container li.brand-profile .carousel-cell {
  width: 270px;
  height: 390px;
}
#grid-container li.mix canvas {
  background-color: #f6f6f6;
  margin-top: -56px;
  margin-left: 18px;
  image-rendering: optimizeSpeed;
  image-rendering: -moz-crisp-edges;
  image-rendering: -webkit-optimize-contrast;
  image-rendering: optimize-contrast;
}
#grid-container li.brand-profile {
  width: 100%;
  height: 100%;
  display: block;
}
#grid-container li.brand-profile img {
  display: block;
  position: relative;
  margin-left: auto;
  margin-right: auto;
  margin-top: 100px;
}
#grid-container li.brand-profile p {
  display: block;
  margin-top: 40px;
  text-align: justify;
  width: 225px;
  margin-left: auto;
  margin-right: auto;
  line-height: 1.5em;
  font-size: 10pt;
}
#grid-container li.interview .carousel-cell {
  width: 290px;
  height: auto;
}
#grid-container li.interview div.bottom {
  clear: both;
}
#grid-container li.interview div.bottom img {
  display: block;
}
#grid-container li.interview div.bottom img.credit {
  margin-top: 10px;
}
#grid-container li.interview div.bottom div.images {
  float: left;
}
#grid-container li.interview div.bottom .outline {
  display: block;
  float: right;
  margin-bottom: 15px;
}
#grid-container li.interview div.bottom .clear {
  clear: both;
}
#grid-container li.interview .button {
  position: absolute;
  top: 0;
  left: 0;
  claer: both;
}
#grid-container li.interview-3 .carousel-cell,
#grid-container li.interview-2 .carousel-cell {
  width: 298px;
}
#grid-container li.interview-3 h2,
#grid-container li.interview-2 h2 {
  margin-top: -3px;
  margin-bottom: 10px;
}
#grid-container li.interview-3 .button,
#grid-container li.interview-2 .button {
  margin-left: 210px;
  margin-top: 165px;
}
#grid-container li.interview-1 img.photo {
  float: left;
  margin-bottom: 25px;
}
#grid-container li.interview-1 .button {
  margin-left: 145px;
  margin-top: 192.5px;
}
#grid-container li ul.carousel-row .button-group {
  position: relative;
  top: 360px;
  border-right: 2px solid #fff;
}
#grid-container li ul.carousel-row .button-group a.photo-overlay-button {
  height: 30px;
}
#grid-container li ul.carousel-row li.image .button-group {
  top: 330px;
}
#grid-container li ul.carousel-row li.image .button-group div.selected {
  display: none;
}
#grid-container img.disable {
  display: none;
}
#grid-container div.added img.disable {
  position: absolute;
  display: block;
}
#grid-container li ul.carousel-row li.image a.selected div.selected {
  background-color: rgba(0, 0, 0, 0.1);
}
#grid-container ul.carousel li ul li .photo-overlay-button {
  display: block;
  float: left;
  margin-right: 1px;
}
#grid-container ul.carousel li ul li .last {
  margin-right: 0px;
}
#grid-container ul.carousel li ul li .image-title {
  position: absolute;
  top: 0;
  left: 0;
}
#grid-container ul.carousel li ul.carousel-row li.coordinate article img.image-title {
  margin-left: -25px;
}
#grid-container ul.carousel li ul.carousel-row li.image article img.image-title {
  margin-left: -25px;
}
#uniqlo-mix-header {
  position: absolute;
  margin-left: 38px;
  width: 100%;
  display: none;
  opacity: 0;
  clear: both;
}
#uniqlo-mix-header img.title {
  margin-top: -18px;
}
#uniqlo-mix-header img.subtitle {
  margin-right: 70px;
  float: right;
  position: absolute;
}
#uniqlo-mix-header p {
  opacity: 0;
  font-size: 8pt;
  margin-left: 10px;
  margin-top: -60px;
  margin-right: 74px;
  clear: both;
  position: absolute;
  display: block;
  text-align: justify;
}
#uniqlo-mix-items {
  position: absolute;
  width: 100%;
  height: auto;
  background-color: rgba(255, 255, 255, 0.9);
  text-align: center;
  display: none;
}
#uniqlo-mix-items img.header {
  position: relative;
  margin-left: auto;
  margin-right: auto;
}
#uniqlo-mix-items article ul {
  display: block;
  width: 270px;
  position: relative;
  margin-left: auto;
  margin-right: auto;
  margin-top: -37px;
}
#uniqlo-mix-items article ul li {
  text-align: left;
  clear: both;
  margin-top: 5px;
  margin-bottom: 20px;
  height: 37px;
}
#uniqlo-mix-items article ul li img.thumbnail {
  float: left;
  margin-right: 10px;
}
#uniqlo-mix-items article ul li p.name {
  font-size: 10pt;
  top: 10px;
  display: block;
  width: 152px;
  float: left;
  margin-right: 5px;
  color: #221815;
  line-height: 1.2em;
  margin-top: -5px;
}
#uniqlo-mix-items article ul li p.commingsoon {
  color: #999999;
  font-size: 8pt;
  display: none;
  margin-top: 0px;
  margin-right: 0px;
}
#uniqlo-mix-items article ul li .button {
  margin-top: 0px;
  display: none;
}
#uniqlo-mix-items article ul li .button-light {
  display: none;
}
#uniqlo-mix-items article ul li.light {
  color: #999999;
}
#uniqlo-mix-items article ul li.light .button-light {
  margin-top: 0px;
  display: block;
}
#uniqlo-mix-items article ul li.light .button {
  display: none;
}
body.blue #page-indicator {
  background-color: rgba(34, 217, 255, 0.7);
}
body.orange #page-indicator {
  background-color: rgba(255, 208, 0, 0.7);
}
body.pink #page-indicator {
  background-color: rgba(249, 106, 255, 0.7);
}
#page-indicator {
  display: block;
  visibility: hidden;
  top: 50%;
  left: 50%;
  margin-left: -74.5px;
  margin-top: -74.5px;
  position: absolute;
  border-radius: 150px;
  width: 149px;
  height: 149px;
}
#page-indicator img {
  position: absolute;
}
#page-indicator img.left {
  left: 15px;
  top: 66.5px;
}
#page-indicator img.top {
  left: 66.5px;
  top: 15px;
}
#page-indicator img.right {
  left: 130px;
  top: 66.5px;
}
#page-indicator img.bottom {
  left: 66.5px;
  top: 130px;
}
#page-indicator ul {
  width: 80px;
  padding-left: 38px;
  padding-top: 50px;
}
#page-indicator ul li {
  float: left;
  margin-left: 2px;
  margin-top: 2px;
  width: 5px;
  height: 8px;
  background-size: 5px 8px;
}
#page-indicator ul li.page-nav-cell-default {
  background: url(/jp/sp/dip/shared/img/page-nav/pagenavi_cell_default.png) no-repeat top left;
}
#page-indicator ul li.page-nav-cell-visit {
  background: url(/jp/sp/dip/shared/img/page-nav/pagenavi_cell_visit.png) no-repeat top left;
}
#page-indicator ul li.page-nav-cell-current {
  background: url(/jp/sp/dip/shared/img/page-nav/pagenavi_cell_current.png) no-repeat top left;
}
body.blue #tapit {
  background-color: rgba(34, 217, 255, 0.7);
}
body.orange #tapit {
  background-color: rgba(255, 208, 0, 0.7);
}
body.pink #tapit {
  background-color: rgba(249, 106, 255, 0.7);
}
#tapit {
  display: block;
  top: 50%;
  left: 50%;
  margin-left: -74.5px;
  margin-top: -74.5px;
  position: absolute;
  border-radius: 150px;
  width: 149px;
  height: 149px;
}
#tapit img {
  position: absolute;
}
#howto {
  display: none;
  margin-left: auto;
  margin-right: auto;
  margin-top: 20px;
  width: 270px;
  color: #010101;
  line-height: 1.5em;
}
#howto .close {
  margin-left: 260px;
  margin-top: -42px;
  display: block;
  position: absolute;
}
#howto .lead {
  font-size: 10pt;
  margin-top: 22px;
  text-align: justify;
  width: 100%;
  padding-bottom: 22px;
  border-bottom: 1px solid #000;
}
#howto ul li {
  margin-top: 16px;
  clear: both;
  width: 100%;
  height: auto;
  border-bottom: 1px solid #000;
  padding-bottom: 20px;
}
#howto ul li h2 {
  clear: both;
  margin-bottom: 16px;
}
#howto ul li div {
  clear: both;
  width: 270px;
  height: auto;
  margin-bottom: 10px;
}
#howto ul li div img {
  /*                    float:left;*/

  display: block;
}
#howto ul li div p {
  line-height: 1.3em;
  text-align: justify;
  display: block;
  float: right;
  width: 140px;
  margin-top: -88px;
  font-size: 9pt;
}
#howto ul li.accesibility {
  border-bottom: none;
}
#howto ul li.accesibility p {
  font-size: 8pt;
  clear: both;
  margin-top: 0;
  width: 100%;
  color: #4c4c4c;
  margin-bottom: 20px;
}