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

【hallo roger】
	01.roger_mv
	02.hallorogerBlock
 ========================================================== */
/* 1. roger_mv
* ------------------------- */
.roger_mv {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  text-align: center;
}
.roger_mv .rogerInner {
  height: 100%;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  padding: 46px 0 14%;
  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;
}
.roger_mv .rogerInner .title {
  color: #fff;
  margin-top: auto;
}
.roger_mv .rogerInner .title .hdg01 {
  font-size: 4.49775vh;
  letter-spacing: -0.01em;
  line-height: 1;
  margin-bottom: 2.66667%;
}
.roger_mv .rogerInner .title .hdgJa {
  font-size: 1.7991vh;
  font-weight: bold;
  line-height: 1;
  margin-bottom: 0.66667%;
}
.roger_mv .rogerInner .title .lead {
  font-size: 1.64918vh;
  line-height: 1.45455;
  padding: 0 2.66667%;
}
.roger_mv .rogerInner .title .staff {
  font-size: 1.49925vh;
  letter-spacing: -0.01em;
  line-height: 1;
  margin-top: 3.33333%;
}
.roger_mv .rogerInner .cap {
  height: 48.05077%;
  border-radius: 50%;
  overflow: hidden;
  margin: 0 auto;
}
.roger_mv .scrollDown {
  line-height: 1;
  position: absolute;
  right: 0;
  bottom: 1.67785%;
  left: 0;
}
.roger_mv .scrollDown a {
  color: #fff;
  font-size: 1.7991vh;
  opacity: .5;
  text-decoration: none;
  display: inline-block;
  position: relative;
  padding-bottom: 15px;
}
.roger_mv .scrollDown a:before, .roger_mv .scrollDown a:after {
  content: "";
  display: block;
  width: 11px;
  height: 1px;
  background: #fff;
  position: absolute;
  bottom: 0;
}
.roger_mv .scrollDown a:before {
  left: 50%;
  -webkit-transform-origin: left center;
  transform-origin: left center;
  -webkit-transform: rotate(-40deg);
  transform: rotate(-40deg);
}
.roger_mv .scrollDown a:after {
  right: 50%;
  -webkit-transform-origin: right center;
  transform-origin: right center;
  -webkit-transform: rotate(40deg);
  transform: rotate(40deg);
}

/* 2. hallorogerBlock
* ------------------------- */
.hallorogerBlock .detailImmage {
  position: relative;
}
.hallorogerBlock .detailImmage img {
  vertical-align: bottom;
}
.hallorogerBlock .detailImmage .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;
}
.hallorogerBlock .detailImmage .inner .detail {
  color: #fff;
  text-decoration: underline;
  line-height: 1;
  display: block;
  position: absolute;
  bottom: 13px;
  left: 13px;
}
.hallorogerBlock .detailImmage.open .inner {
  opacity: 0;
}
.hallorogerBlock .detailImmage .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;
}
.hallorogerBlock .detailImmage .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;
}
.hallorogerBlock .detailImmage .links ul {
  margin-top: auto;
}
.hallorogerBlock .detailImmage .links ul li {
  margin-top: 12px;
  line-height: 1.666;
}
.hallorogerBlock .detailImmage .links ul li:first-child {
  margin-top: 0;
}
.hallorogerBlock .detailImmage .links ul li a {
  font-family: 'TTCommons-Medium';
  letter-spacing: -0.01em;
}
.hallorogerBlock .detailImmage .links .close {
  margin-top: 25px;
  line-height: 1;
}
.hallorogerBlock .detailImmage .links .close button {
  font-family: 'TTCommons-Medium';
  letter-spacing: -0.01em;
  text-decoration: underline;
  outline: none;
}
.hallorogerBlock .rogerVisual01 {
  margin-bottom: 8%;
  -webkit-transition: .6s ease-out;
  transition: .6s ease-out;
  opacity: 1;
}
.hallorogerBlock .rogerVisual01.is-hidden {
  opacity: 0;
}
.hallorogerBlock .rogerVisual02,
.hallorogerBlock .rogerVisual03 {
  margin: 8.66667% 0;
  -webkit-transition: .6s ease-out;
  transition: .6s ease-out;
  -webkit-transform: translateY(0);
  transform: translateY(0);
  opacity: 1;
}
.hallorogerBlock .rogerVisual02.is-hidden,
.hallorogerBlock .rogerVisual03.is-hidden {
  -webkit-transform: translateY(15px);
  transform: translateY(15px);
  opacity: 0;
}
.hallorogerBlock .rogerVisual03 .movie {
  position: relative;
  background: url("../images/halloroger/mov/visual_sp.gif") no-repeat;
  background-position: center center;
  background-size: cover;
}
.hallorogerBlock .rogerVisual03 .movie:before {
  content: "";
  display: block;
  padding-top: 100%;
}
.hallorogerBlock .rogerVisual03 .movie video {
  width: 100%;
  height: 100%;
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
.hallorogerBlock .articleBlock {
  -webkit-transition: .6s ease-out;
  transition: .6s ease-out;
  -webkit-transform: translateY(0);
  transform: translateY(0);
  opacity: 1;
}
.hallorogerBlock .articleBlock.is-hidden {
  -webkit-transform: translateY(15px);
  transform: translateY(15px);
  opacity: 0;
}
.hallorogerBlock .article {
  font-size: 1.16667em;
  line-height: 1.84615;
}
.hallorogerBlock .article + .article {
  margin-top: 1.5em;
}
.hallorogerBlock .article .q {
  font-size: 0.92857em;
  font-weight: bold;
  line-height: 2;
}
.hallorogerBlock .article .q span {
  font-weight: normal;
}
.hallorogerBlock .innerVisual {
  margin: 8.66667% 0;
  -webkit-transition: .6s ease-out;
  transition: .6s ease-out;
  -webkit-transform: translateY(0);
  transform: translateY(0);
  opacity: 1;
}
.hallorogerBlock .innerVisual.is-hidden {
  -webkit-transform: translateY(15px);
  transform: translateY(15px);
  opacity: 0;
}
.hallorogerBlock .ball {
  width: 56px;
  margin: 14.49275% 20.28986% 0 auto;
}
.hallorogerBlock .mod_plofile {
  border-top: none;
  padding-top: 0;
  margin-top: 9.42029%;
}

/*/////////////////////////////
 RWD
/////////////////////////////*/
@media (min-width: 813px) {
  .roger_mv .rogerInner {
    padding: 0 0 6.66667%;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
  }
  .roger_mv .rogerInner .title .hdg01 {
    font-size: 3.42857em;
    margin-bottom: 0;
  }
  .roger_mv .rogerInner .title .hdgJa {
    font-size: 1.14286em;
    margin: 1.66667% 0 8px;
  }
  .roger_mv .rogerInner .title .lead {
    font-size: 1em;
    line-height: 1.53846;
    padding: 0;
  }
  .roger_mv .rogerInner .title .staff {
    font-size: 0.78571em;
    margin-top: 1.25%;
  }
  .roger_mv .rogerInner .cap {
    display: none;
  }
  .roger_mv .scrollDown {
    bottom: 2.42326%;
  }
  .roger_mv .scrollDown a {
    font-size: 1.14286em;
    padding-bottom: 20px;
  }

  .hallorogerBlock .detailImmage {
    overflow: hidden;
  }
  .hallorogerBlock .detailImmage img {
    width: 100%;
    max-width: none;
    -webkit-transition: .6s ease-out;
    transition: .6s ease-out;
  }
  .hallorogerBlock .detailImmage .inner {
    z-index: 2;
  }
  .hallorogerBlock .detailImmage .inner .detail {
    color: #fff;
    bottom: 20px;
    left: 20px;
  }
  .hallorogerBlock .detailImmage .inner:hover .detail {
    text-decoration: none;
  }
  .hallorogerBlock .detailImmage .inner:hover + img, .hallorogerBlock .detailImmage .inner:hover + picture img {
    opacity: .7;
    -webkit-transform: scale(1.04);
    transform: scale(1.04);
  }
  .hallorogerBlock .detailImmage.rogerVisual01 .inner:hover + img, .hallorogerBlock .detailImmage.rogerVisual01 .inner:hover + picture img, .hallorogerBlock .detailImmage.rogerVisual02 .inner:hover + img, .hallorogerBlock .detailImmage.rogerVisual02 .inner:hover + picture img {
    opacity: .7;
    -webkit-transform: scale(1.02);
    transform: scale(1.02);
  }
  .hallorogerBlock .detailImmage .links {
    z-index: 3;
  }
  .hallorogerBlock .detailImmage .links .in {
    padding: 20px;
  }
  .hallorogerBlock .detailImmage .links ul li {
    font-size: 0.92857em;
    margin-top: 23px;
  }
  .hallorogerBlock .detailImmage .links .close {
    margin-top: 45px;
  }
  .hallorogerBlock .detailImmage .links .close button:hover {
    text-decoration: none;
  }
  .hallorogerBlock .detailImmage.open img {
    -webkit-transform: scale(1.04);
    transform: scale(1.04);
  }
  .hallorogerBlock .detailImmage.open.rogerVisual01 img, .hallorogerBlock .detailImmage.open.rogerVisual02 img {
    -webkit-transform: scale(1.02);
    transform: scale(1.02);
  }
  .hallorogerBlock .rogerVisual01 {
    margin: 0 0 5.41667%;
  }
  .hallorogerBlock .rogerVisual02 {
    max-width: 1000px;
  }
  .hallorogerBlock .rogerVisual02,
  .hallorogerBlock .rogerVisual03 {
    margin: 3.33333% auto;
  }
  .hallorogerBlock .rogerVisual03 {
    overflow: hidden;
  }
  .hallorogerBlock .rogerVisual03 .movie {
    background: none;
  }
  .hallorogerBlock .rogerVisual03 .movie:before {
    padding-top: 58.33333%;
  }
  .hallorogerBlock .rogerVisual03 .movie video {
    -webkit-transform: scale(1.03);
    transform: scale(1.03);
  }
  .hallorogerBlock .article {
    font-size: 1.14286em;
    line-height: 2.125;
  }
  .hallorogerBlock .article .q {
    font-size: 1em;
    line-height: 2.125;
  }
  .hallorogerBlock .innerVisual {
    max-width: 650px;
    margin: 3.33333% auto;
  }
  .hallorogerBlock .ball {
    width: 76px;
    margin: 11.53846% 20% 0 auto;
  }
  .hallorogerBlock .mod_plofile {
    margin-top: 2.5%;
  }
}

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