@charset "UTF-8";
/* ==========================================================
 【uniqlo Life Wear magazine】(c)visual and echo japan
	Created: 2019-07

【hybridlife】
	01.hybridlifeBlock
 ========================================================== */
.mod_visualFit .firstView {
  background-image: url("../images/hybridlife/image01_sp.jpg");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}

/* 1. hybridlifeBlock
* ------------------------- */
.hybridlifeBlock .hdg02 {
  text-align: center;
  margin-bottom: 6.52174%;
}
.hybridlifeBlock .hdg02 span {
  display: block;
  line-height: 1;
}
.hybridlifeBlock .hdg02 .en {
  font-size: 1.66667em;
}
.hybridlifeBlock .hdg02 .ja {
  font-weight: bold;
  margin-top: 5px;
}
.hybridlifeBlock .top {
  padding: 10.14493% 0 12.31884%;
  -webkit-transition: .6s ease-out;
  transition: .6s ease-out;
  -webkit-transform: translateY(0);
  transform: translateY(0);
  opacity: 1;
}
.hybridlifeBlock .top.is-hidden {
  -webkit-transform: translateY(15px);
  transform: translateY(15px);
  opacity: 0;
}
.hybridlifeBlock .top .text {
  margin-bottom: 8.69565%;
}
.hybridlifeBlock .top .text p {
  font-size: 1.16667em;
  line-height: 1.84615;
  letter-spacing: 0.01em;
  text-indent: 1em;
}
.hybridlifeBlock .top .text p + p {
  margin-top: 1.5em;
}
.hybridlifeBlock .top .text p.en {
  text-indent: 0;
}
.hybridlifeBlock .top .profile .image {
  margin-bottom: 2.89855%;
}
.hybridlifeBlock .top .profile dl {
  font-size: 0.91667em;
  line-height: 1.45455;
}
.hybridlifeBlock .top .profile dl dt {
  font-weight: bold;
  line-height: 1.63636;
}
.hybridlifeBlock .downBlock {
  background: #000;
  overflow: hidden;
  -webkit-transition: .6s ease-out;
  transition: .6s ease-out;
  -webkit-transform: translateY(0);
  transform: translateY(0);
  opacity: 1;
}
.hybridlifeBlock .downBlock.is-hidden {
  -webkit-transform: translateY(15px);
  transform: translateY(15px);
  opacity: 0;
}
.hybridlifeBlock .downBlock .inner {
  padding: 7.2% 4% 10.66667%;
}
.hybridlifeBlock .downBlock .product {
  position: relative;
  margin-bottom: 5.7971%;
}
.hybridlifeBlock .downBlock .product > img {
  -webkit-transition: opacity .4s 1s ease, -webkit-transform 1s ease-in-out;
  transition: opacity .4s 1s ease, -webkit-transform 1s ease-in-out;
  transition: transform 1s ease-in-out, opacity .4s 1s ease;
  transition: transform 1s ease-in-out, opacity .4s 1s ease, -webkit-transform 1s ease-in-out;
}
.hybridlifeBlock .downBlock .product > img.zoomEff {
  -webkit-transform: scale(2.5);
  transform: scale(2.5);
  opacity: .3;
}
.hybridlifeBlock .downBlock .product > img.point01Zoom {
  -webkit-transform-origin: 53.76812% 41.88406%;
  transform-origin: 53.76812% 41.88406%;
}
.hybridlifeBlock .downBlock .product > img.point02Zoom {
  -webkit-transform-origin: 16.81159% 65.36232%;
  transform-origin: 16.81159% 65.36232%;
}
.hybridlifeBlock .downBlock .product .zoom li {
  width: 25px;
  position: absolute;
  margin: -12.5px 0 0 -12.5px;
}
.hybridlifeBlock .downBlock .product .zoom li:before {
  content: "";
  display: block;
  padding-top: 100%;
}
.hybridlifeBlock .downBlock .product .zoom li a {
  color: #fff;
  display: block;
  text-align: center;
  line-height: 23px;
  background: #000;
  border: #fff 1px solid;
  border-radius: 50%;
  text-decoration: none;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 2;
}
.hybridlifeBlock .downBlock .product .zoom li a .text {
  display: none;
}
.hybridlifeBlock .downBlock .product .zoom li.point01 {
  top: 41.88406%;
  left: 53.76812%;
}
.hybridlifeBlock .downBlock .product .zoom li.point02 {
  top: 65.36232%;
  left: 16.81159%;
}
.hybridlifeBlock .downBlock .product .zoom li:after {
  content: "";
  display: block;
  width: 12px;
  height: 12px;
  background: #fff;
  border-radius: 50%;
  position: absolute;
  top: 50%;
  left: 50%;
  margin: -6px 0 0 -6px;
  z-index: 1;
  opacity: 0;
  -webkit-transition: opacity .3s .5s ease;
  transition: opacity .3s .5s ease;
}
.hybridlifeBlock .downBlock .product .zoom li.fade:after {
  opacity: 1;
  -webkit-transition-delay: 0s;
  transition-delay: 0s;
}
.hybridlifeBlock .downBlock .detail {
  position: relative;
}
.hybridlifeBlock .downBlock .detail .wrap + .wrap {
  margin-top: 3.62319%;
}
.hybridlifeBlock .downBlock .detail .col {
  width: 100%;
  display: table;
  table-layout: fixed;
}
.hybridlifeBlock .downBlock .detail .col > * {
  display: table-cell;
  vertical-align: top;
}
.hybridlifeBlock .downBlock .detail .col .image {
  width: 23.18841%;
}
.hybridlifeBlock .downBlock .detail .col .text {
  padding-left: 2.89855%;
}
.hybridlifeBlock .downBlock .detail .col .text dl {
  color: #fff;
}
.hybridlifeBlock .downBlock .detail .col .text dl dt {
  font-size: 1.33333em;
  line-height: 1;
  margin-bottom: 4px;
}
.hybridlifeBlock .downBlock .detail .col .text dl dd {
  font-size: 0.91667em;
  line-height: 1.45455;
  letter-spacing: 0.01em;
}
.hybridlifeBlock .imagesBlock {
  -webkit-transition: .6s ease-out;
  transition: .6s ease-out;
  -webkit-transform: translateY(0);
  transform: translateY(0);
  opacity: 1;
}
.hybridlifeBlock .imagesBlock.is-hidden {
  -webkit-transform: translateY(15px);
  transform: translateY(15px);
  opacity: 0;
}
.hybridlifeBlock .imagesBlock .hdg02 {
  margin-bottom: 7.97101%;
}
.hybridlifeBlock .imagesBlock .credit {
  font-size: 0.83333em;
  line-height: 1.3;
  text-align: center;
  letter-spacing: -0.01em;
  margin-bottom: 7.97101%;
}
.hybridlifeBlock .imagesBlock .col {
  position: relative;
  margin: 0 -4.4%;
  -webkit-transition: .6s ease-out;
  transition: .6s ease-out;
  -webkit-transform: translateY(0);
  transform: translateY(0);
  opacity: 1;
}
.hybridlifeBlock .imagesBlock .col.is-hidden {
  -webkit-transform: translateY(15px);
  transform: translateY(15px);
  opacity: 0;
}
.hybridlifeBlock .imagesBlock .col + .col {
  margin-top: 4.34783%;
}
.hybridlifeBlock .imagesBlock .col img {
  vertical-align: bottom;
}
.hybridlifeBlock .imagesBlock .col .inner {
  text-decoration: none;
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
  -webkit-transition: opacity .4s ease;
  transition: opacity .4s ease;
}
.hybridlifeBlock .imagesBlock .col .inner .detail {
  color: #fff;
  text-decoration: underline;
  line-height: 1;
  display: block;
  position: absolute;
  bottom: 13px;
  left: 13px;
}
.hybridlifeBlock .imagesBlock .col.open .inner {
  opacity: 0;
}
.hybridlifeBlock .imagesBlock .col .links {
  display: none;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 2;
  background: rgba(255, 255, 255, 0.6);
  text-align: left;
}
.hybridlifeBlock .imagesBlock .col .links .in {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -ms-flex-direction: column;
  flex-direction: column;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 13px;
}
.hybridlifeBlock .imagesBlock .col .links ul {
  margin-top: auto;
}
.hybridlifeBlock .imagesBlock .col .links ul li {
  margin-top: 12px;
  line-height: 1.666;
}
.hybridlifeBlock .imagesBlock .col .links ul li:first-child {
  margin-top: 0;
}
.hybridlifeBlock .imagesBlock .col .links ul li a {
  font-family: 'TTCommons-Medium';
  letter-spacing: -0.01em;
}
.hybridlifeBlock .imagesBlock .col .links .close {
  margin-top: 25px;
  line-height: 1;
}
.hybridlifeBlock .imagesBlock .col .links .close button {
  font-family: 'TTCommons-Medium';
  letter-spacing: -0.01em;
  text-decoration: underline;
  outline: none;
}

/*/////////////////////////////
 RWD
/////////////////////////////*/
@media (min-width: 813px) {
  .mod_visualFit .firstView {
    background-image: url("../images/hybridlife/image01_pc.jpg");
  }

  .hybridlifeBlock .hdg02 {
    margin-bottom: 8.46154%;
  }
  .hybridlifeBlock .hdg02 .en {
    font-size: 2em;
  }
  .hybridlifeBlock .hdg02 .ja {
    font-size: 1.14286em;
    margin-top: 8px;
  }
  .hybridlifeBlock .top {
    max-width: 650px;
    margin: 0 auto;
    padding: 5.83333% 0;
  }
  .hybridlifeBlock .top .text {
    margin-bottom: 7.69231%;
  }
  .hybridlifeBlock .top .text p {
    font-size: 1.14286em;
    line-height: 2.125;
  }
  .hybridlifeBlock .top .profile .image {
    margin-bottom: 3.07692%;
  }
  .hybridlifeBlock .top .profile dl {
    font-size: 1em;
    line-height: 1.53846;
  }
  .hybridlifeBlock .top .profile dl dt {
    line-height: 1.53846;
  }
  .hybridlifeBlock .downBlock {
    padding: 2.08333% 0;
  }
  .hybridlifeBlock .downBlock.visible {
    cursor: pointer;
  }
  .hybridlifeBlock .downBlock .inner {
    max-width: 650px;
    margin: 0 auto;
    padding: 0;
    position: relative;
  }
  .hybridlifeBlock .downBlock .product {
    position: static;
    margin-bottom: 0;
  }
  .hybridlifeBlock .downBlock .product > img.point01Zoom {
    -webkit-transform-origin: 54.46154% 45.07692%;
    transform-origin: 54.46154% 45.07692%;
  }
  .hybridlifeBlock .downBlock .product > img.point02Zoom {
    -webkit-transform-origin: 20.76923% 57.23077%;
    transform-origin: 20.76923% 57.23077%;
  }
  .hybridlifeBlock .downBlock .product .zoom li {
    width: 64px;
    margin: -32px 0 0 -32px;
  }
  .hybridlifeBlock .downBlock .product .zoom li a {
    font-size: 0.92857em;
    letter-spacing: -0.04em;
    line-height: 62px;
    background: none;
  }
  .hybridlifeBlock .downBlock .product .zoom li a .text {
    display: inline-block;
  }
  .hybridlifeBlock .downBlock .product .zoom li a .num {
    display: none;
  }
  .hybridlifeBlock .downBlock .product .zoom li.point01 {
    top: 45.07692%;
    left: 54.46154%;
  }
  .hybridlifeBlock .downBlock .product .zoom li.point02 {
    top: 57.23077%;
    left: 20.76923%;
  }
  .hybridlifeBlock .downBlock .product .zoom li > div:before {
    content: "";
    display: block;
    width: 0;
    height: 1px;
    background: #fff;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-top: -.5px;
    -webkit-transition: width .5s ease-out;
    transition: width .5s ease-out;
  }
  .hybridlifeBlock .downBlock .product .zoom li.fade > div:before {
    width: 122px;
    -webkit-transition-delay: .3s;
    transition-delay: .3s;
  }
  .hybridlifeBlock .downBlock .detail {
    position: static;
  }
  .hybridlifeBlock .downBlock .detail .wrap {
    display: none;
  }
  .hybridlifeBlock .downBlock .detail .wrap + .wrap {
    margin-top: 0;
  }
  .hybridlifeBlock .downBlock .detail .col {
    width: 320px;
    display: block;
    position: absolute;
  }
  .hybridlifeBlock .downBlock .detail .col > * {
    display: block;
  }
  .hybridlifeBlock .downBlock .detail .col .image {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    width: 130px;
    border: #fff 1px solid;
    margin: 0 auto 10px;
  }
  .hybridlifeBlock .downBlock .detail .col .text {
    padding-left: 0;
  }
  .hybridlifeBlock .downBlock .detail .col .text dl dt {
    font-size: 1.42857em;
    text-align: center;
    margin-bottom: 5px;
  }
  .hybridlifeBlock .downBlock .detail .col .text dl dt span {
    display: none;
  }
  .hybridlifeBlock .downBlock .detail .col .text dl dd {
    font-size: 1em;
    line-height: 1.53846;
    letter-spacing: normal;
  }
  .hybridlifeBlock .downBlock .detail .col.point01 {
    top: 227px;
    right: -50px;
  }
  .hybridlifeBlock .downBlock .detail .col.point02 {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: reverse;
    -ms-flex-direction: column-reverse;
    flex-direction: column-reverse;
    top: 100px;
    left: 160px;
  }
  .hybridlifeBlock .downBlock .detail .col.point02 .image {
    margin-bottom: 0;
    margin-top: 15px;
  }
  .hybridlifeBlock .downBlock .detail .col.point02.en {
    top: 40px;
  }
  .hybridlifeBlock .imagesBlock {
    max-width: 650px;
    margin: 0 auto;
  }
  .hybridlifeBlock .imagesBlock .hdg02 {
    margin-bottom: 11.53846%;
  }
  .hybridlifeBlock .imagesBlock .credit {
    font-size: 0.78571em;
    line-height: 1;
    margin-bottom: 11.53846%;
  }
  .hybridlifeBlock .imagesBlock .col {
    margin: 0;
    overflow: hidden;
  }
  .hybridlifeBlock .imagesBlock .col + .col {
    margin-top: 9.23077%;
  }
  .hybridlifeBlock .imagesBlock .col img {
    width: 100%;
    max-width: none;
    -webkit-transition: .6s ease-out;
    transition: .6s ease-out;
  }
  .hybridlifeBlock .imagesBlock .col .inner {
    z-index: 2;
  }
  .hybridlifeBlock .imagesBlock .col .inner .detail {
    color: #fff;
    bottom: 20px;
    left: 20px;
  }
  .hybridlifeBlock .imagesBlock .col .inner:hover + img {
    opacity: .7;
    -webkit-transform: scale(1.04);
    transform: scale(1.04);
  }
  .hybridlifeBlock .imagesBlock .col .links {
    z-index: 3;
  }
  .hybridlifeBlock .imagesBlock .col .links .in {
    padding: 20px;
  }
  .hybridlifeBlock .imagesBlock .col .links ul li {
    font-size: 0.92857em;
    margin-top: 23px;
  }
  .hybridlifeBlock .imagesBlock .col .links .close {
    margin-top: 45px;
  }
  .hybridlifeBlock .imagesBlock .col .links .close button:hover {
    text-decoration: none;
  }
  .hybridlifeBlock .imagesBlock .col.open img {
    -webkit-transform: scale(1.04);
    transform: scale(1.04);
  }
}

/*# sourceMappingURL=hybridlife.css.map */