.sprites-sprite {
  background-image: url('../../vol020/image/sprites-s1f5acc7d83.png');
  background-repeat: no-repeat;
}

.sprites-copy_01 {
  padding-bottom: 22.95918%;
}
.sprites-copy_01:after {
  width: 100%;
  background-position: 0 0%;
  padding-bottom: 22.95918%;
}

.sprites-copy_02 {
  padding-bottom: 22.95918%;
}
.sprites-copy_02:after {
  width: 100%;
  background-position: 0 6.34766%;
  padding-bottom: 22.95918%;
}

.sprites-copy_03 {
  padding-bottom: 22.95918%;
}
.sprites-copy_03:after {
  width: 100%;
  background-position: 0 12.69531%;
  padding-bottom: 22.95918%;
}

.sprites-ico_arrow {
  padding-bottom: 55%;
}
.sprites-ico_arrow:after {
  width: 980%;
  background-position: 0 18.431%;
  padding-bottom: 55%;
}

.sprites-ico_beams {
  padding-bottom: 43.18182%;
}
.sprites-ico_beams:after {
  width: 222.72727%;
  background-position: 0 21.92047%;
  padding-bottom: 43.18182%;
}

.sprites-ico_fb {
  padding-bottom: 100%;
}
.sprites-ico_fb:after {
  width: 408.33333%;
  background-position: 0 27.81587%;
  padding-bottom: 100%;
}

.sprites-ico_men {
  padding-bottom: 100%;
}
.sprites-ico_men:after {
  width: 326.66667%;
  background-position: 0 34.88603%;
  padding-bottom: 100%;
}

.sprites-ico_women {
  padding-bottom: 100%;
}
.sprites-ico_women:after {
  width: 326.66667%;
  background-position: 0 59.96036%;
  padding-bottom: 100%;
}

.sprites-ico_summer {
  padding-bottom: 100%;
}
.sprites-ico_summer:after {
  width: 230.58824%;
  background-position: 0 43.90244%;
  padding-bottom: 100%;
}

.sprites-ico_tw {
  padding-bottom: 100%;
}
.sprites-ico_tw:after {
  width: 408.33333%;
  background-position: 0 52.59549%;
  padding-bottom: 100%;
}

.sprites-num_01 {
  padding-bottom: 51.72414%;
}
.sprites-num_01:after {
  width: 225.28736%;
  background-position: 0 66.89453%;
  padding-bottom: 51.72414%;
}

.sprites-num_02 {
  padding-bottom: 51.72414%;
}
.sprites-num_02:after {
  width: 225.28736%;
  background-position: 0 73.24219%;
  padding-bottom: 51.72414%;
}

.sprites-num_03 {
  padding-bottom: 51.72414%;
}
.sprites-num_03:after {
  width: 225.28736%;
  background-position: 0 79.58984%;
  padding-bottom: 51.72414%;
}

.sprites-tag {
  padding-bottom: 100%;
}
.sprites-tag:after {
  width: 164.70588%;
  background-position: 0 92.63158%;
  padding-bottom: 100%;
}

.sprites-txt_index {
  padding-bottom: 23.61111%;
}
.sprites-txt_index:after {
  width: 272.22222%;
  background-position: 0 96.86312%;
  padding-bottom: 23.61111%;
}

.sprites-txt_share {
  padding-bottom: 26.53061%;
}
.sprites-txt_share:after {
  width: 400%;
  background-position: 0 100%;
  padding-bottom: 26.53061%;
}

.sprites-copy_01, .sprites-copy_02, .sprites-copy_03, .sprites-ico_arrow, .sprites-ico_beams, .sprites-ico_fb, .sprites-ico_men, .sprites-ico_women, .sprites-ico_summer, .sprites-ico_tw, .sprites-num_01, .sprites-num_02, .sprites-num_03, .sprites-tag, .sprites-txt_index, .sprites-txt_share {
  display: block;
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 0;
}
.sprites-copy_01:after, .sprites-copy_02:after, .sprites-copy_03:after, .sprites-ico_arrow:after, .sprites-ico_beams:after, .sprites-ico_fb:after, .sprites-ico_men:after, .sprites-ico_women:after, .sprites-ico_summer:after, .sprites-ico_tw:after, .sprites-num_01:after, .sprites-num_02:after, .sprites-num_03:after, .sprites-tag:after, .sprites-txt_index:after, .sprites-txt_share:after {
  content: ' ';
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  height: 0;
  background-image: url('../../vol020/image/sprites-s1f5acc7d83.png');
  background-repeat: no-repeat;
  background-size: 100%;
}

/*******************************
vol020.scss
*******************************/
html, body {
  color: #000;
}

.contents {
  max-width: 1149px;
  padding: 0 30px 80px;
  margin: 0 auto;
}

.intro {
  padding: 30px 0 48px;
}
.intro__main-wrap {
  position: relative;
  padding-bottom: 49.26023%;
}
.intro__main-wrap > div {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
}
.intro__main {
  opacity: 0;
  position: relative;
  width: 100%;
  height: 100%;
}
.intro__bg-box {
  z-index: 0;
  overflow: hidden;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.intro__bg {
  opacity: 0;
  pointer-events: none;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
  opacity: 0;
  -moz-transform: scale(1.15, 1.15);
  -ms-transform: scale(1.15, 1.15);
  -webkit-transform: scale(1.15, 1.15);
  transform: scale(1.15, 1.15);
}
.intro__bg.show {
  z-index: 1;
  -moz-animation: fadeIn 9600ms linear;
  -webkit-animation: fadeIn 9600ms linear;
  animation: fadeIn 9600ms linear;
}
@-moz-keyframes fadeIn {
  0% {
    -moz-transform: scale(1.15, 1.15);
    transform: scale(1.15, 1.15);
  }
  100% {
    -moz-transform: scale(1, 1);
    transform: scale(1, 1);
    opacity: 1;
  }
}
@-webkit-keyframes fadeIn {
  0% {
    -webkit-transform: scale(1.15, 1.15);
    transform: scale(1.15, 1.15);
  }
  100% {
    -webkit-transform: scale(1, 1);
    transform: scale(1, 1);
    opacity: 1;
  }
}
@keyframes fadeIn {
  0% {
    -moz-transform: scale(1.15, 1.15);
    -ms-transform: scale(1.15, 1.15);
    -webkit-transform: scale(1.15, 1.15);
    transform: scale(1.15, 1.15);
  }
  100% {
    -moz-transform: scale(1, 1);
    -ms-transform: scale(1, 1);
    -webkit-transform: scale(1, 1);
    transform: scale(1, 1);
    opacity: 1;
  }
}
.intro__bg.on {
  filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false);
  opacity: 1;
  z-index: 2;
}
.intro__ttl {
  position: absolute;
  top: 0;
  left: 6.96258%;
  width: 59.1819%;
  margin-top: 15.31767%;
}
.intro__tag {
  position: absolute;
  top: 0;
  left: 0;
  width: 10.35683%;
}
.intro__attr {
  position: absolute;
  top: 0;
  right: 2.26284%;
  width: 7.39774%;
  margin-top: 2.4369%;
}
.intro__logo {
  position: absolute;
  right: 1.74064%;
  bottom: 0;
  width: 7.65883%;
  margin-bottom: 6.44038%;
}
.intro__detail {
  position: relative;
  padding-top: 32px;
}
.intro__detail:before {
  content: ' ';
  display: block;
  position: absolute;
  top: -50px;
  left: -30px;
  right: -30px;
  height: 52px;
  background-image: url("/special/happyoutside/vol020/image/triangle.png");
  background-repeat: no-repeat;
  background-position: bottom center;
  background-size: cover;
}
.intro__copy {
  color: #ff3300;
  font-size: 17px;
  font-weight: 600;
  text-align: center;
  line-height: 1em;
}
.intro__txt {
  margin-top: 24px;
  color: #333;
  font-size: 14px;
  text-align: center;
  line-height: 26px;
}
.intro__nav {
  margin-top: 44px;
}
.intro__nav__ttl {
  width: 72px;
  margin: 0 auto;
}
.intro__nav__list {
  font-size: 0;
  text-align: center;
}
.intro__nav__bnr {
  display: inline-block;
  vertical-align: middle;
  *vertical-align: auto;
  *zoom: 1;
  *display: inline;
  width: 250px;
  margin: 20px 10px 0;
}
.intro__nav__bnr > a {
  -moz-transition: none;
  -o-transition: none;
  -webkit-transition: none;
  transition: none;
}
.intro__nav__arrow {
  display: block;
  width: 20px;
  margin: 14px auto 0;
}

.lineup {
  width: 90.51349%;
  padding-top: 20px;
  margin: 0 auto 50px;
}
.lineup__header {
  position: relative;
  background-color: #000;
  height: 50px;
}
.lineup__num, .lineup__copy {
  position: absolute;
  bottom: 0;
}
.lineup__num {
  left: 0;
  width: 87px;
}
.lineup__copy {
  right: 0;
  width: 196px;
}
.lineup__list {
  text-align: center;
  font-size: 0;
}
.lineup__item {
  display: inline-block;
  vertical-align: middle;
  *vertical-align: auto;
  *zoom: 1;
  *display: inline;
  width: 44.23077%;
  margin: 0 1.53846% 32px;
}
.lineup__item:first-child {
  display: block;
  width: 91.34615%;
  margin: 20px auto 32px;
}

.item:nth-child(even) {
  position: relative;
  top: 18px;
}
.item:after {
  content: ' ';
  display: block;
  clear: both;
}
.item__img {
  height: 0;
  padding-bottom: 69.34783%;
}
.item__img img {
  opacity: 0;
}
.item__txt {
  float: left;
  margin-top: 16px;
  margin-left: 8px;
  font-family: 'Roboto', sans-serif;
  font-size: 12px;
  font-weight: 500;
  -moz-transition: all 240ms cubic-bezier(0.455, 0.03, 0.515, 0.955) 200ms;
  -o-transition: all 240ms cubic-bezier(0.455, 0.03, 0.515, 0.955) 200ms;
  -webkit-transition: all 240ms cubic-bezier(0.455, 0.03, 0.515, 0.955);
  -webkit-transition-delay: 200ms;
  transition: all 240ms cubic-bezier(0.455, 0.03, 0.515, 0.955) 200ms;
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
  opacity: 0;
}
.item__txt.show {
  filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false);
  opacity: 1;
  -moz-transform: translateY(0);
  -ms-transform: translateY(0);
  -webkit-transform: translateY(0);
  transform: translateY(0);
}
.item__btn {
  float: right;
  width: 60px;
  margin-top: -26px;
  margin-right: 6px;
  -moz-transition: all 240ms cubic-bezier(0.455, 0.03, 0.515, 0.955) 200ms;
  -o-transition: all 240ms cubic-bezier(0.455, 0.03, 0.515, 0.955) 200ms;
  -webkit-transition: all 240ms cubic-bezier(0.455, 0.03, 0.515, 0.955);
  -webkit-transition-delay: 200ms;
  transition: all 240ms cubic-bezier(0.455, 0.03, 0.515, 0.955) 200ms;
  filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);
  opacity: 0;
  -moz-transform: translateY(20px);
  -ms-transform: translateY(20px);
  -webkit-transform: translateY(20px);
  transform: translateY(20px);
}
.item__btn > a {
  -moz-transition: none;
  -o-transition: none;
  -webkit-transition: none;
  transition: none;
}
.item__btn.show {
  filter: progid:DXImageTransform.Microsoft.Alpha(enabled=false);
  opacity: 1;
  -moz-transform: translateY(0);
  -ms-transform: translateY(0);
  -webkit-transform: translateY(0);
  transform: translateY(0);
}
.item:first-child .item__img {
  padding-bottom: 50.52632%;
}
.item:first-child .item__txt {
  float: right;
  margin-top: 2px;
  margin-right: 14px;
}
.item:first-child .item__btn {
  margin-top: -30px;
}
.item:first-child .item__btn:first-child {
  margin-right: 22px;
}

.outro {
  position: relative;
  width: 732px;
  height: 391px;
  margin: 76px auto 0;
}
.outro__bg {
  position: absolute;
  top: 0;
  left: 0;
}
.outro__share {
  padding-top: 224px;
}

.share__ttl {
  width: 49px;
  margin: 0 auto;
}
.share__list {
  font-size: 0;
  text-align: center;
}
.share__ico {
  display: inline-block;
  vertical-align: middle;
  *vertical-align: auto;
  *zoom: 1;
  *display: inline;
  width: 48px;
  margin-top: 10px;
}
.share__ico > a {
  -moz-transition: none;
  -o-transition: none;
  -webkit-transition: none;
  transition: none;
}

.archives {
  border-top: 1px solid #eee;
}

.insta {
  margin-bottom: 70px;
}