@charset "UTF-8";


/* Common ----------------------------*/
/* -- Background -- */
.sec_bg {
  background-color: #ff5000;
  background-image: url(/hagoromoarare/assets/common/img/2603/bg_texture01.png);
  background-repeat: repeat-y;
  background-position: 50% 0;
  background-size: 100% auto;
}

/* -- Arare -- */
.sec_arare {
  position: absolute;
  pointer-events: none;
}

.sec_arare > * {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* -- Animation Arare -- */
.sec_aniArare {
  position: absolute;
}

/* -- Anniversary Logo -- */
.sec_anniv_logo {
  position: absolute;
  top: -5.4rem;
  left: -2.0rem;
  width: 14.6rem;
}

/* -- Voice -- */
.sec_voice {
  text-align: center;
}

.sec_voiceBtn {
  display: inline-block;
  position: relative;
  width: 60.0rem;
}

.sec_voiceBtn::before,
.sec_voiceBtn::after {
  position: absolute;
  z-index: 2;
  content: '';
}

.sec_voiceBtn::before {
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 3.0rem;
  opacity: 0;
  visibility: hidden;
  background-color: rgba(0, 0, 0, 0.7);
  transition: 0.2s all ease-out;
}

.sec_voiceBtn.is-play::before {
  opacity: 1;
  visibility: visible;
}

.sec_voiceBtn::after {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 10.0rem;
  height: 10.0rem;
  visibility: hidden;
  background-image: url(/hagoromoarare/assets/pages/img/top/2603/icon_pause.svg);
  background-repeat: no-repeat;
  background-position: 50% 50%;
  background-size: 100% auto;
}

.sec_voiceBtn.is-play::after {
  visibility: visible;
  animation: voice-play 1.4s linear infinite;
}

.sec_voiceBtn.is-play:hover {
  opacity: 1 !important;
}

@keyframes voice-play {
  0% {
    transform: translate(-50%, -50%) scale(1);
    opacity: 0.3;
    
  }
  50% {
    transform: translate(-50%, -50%) scale(1.25);
    opacity: 1;
  }
  100% {
    transform:translate(-50%, -50%) scale(1);
    opacity: 0.3;
  }
}

.sec_voiceBtn img {
  position: relative;
  z-index: 1;
}


/* Key Visual ----------------------------*/
.kv {
  background-image: url(/hagoromoarare/assets/pages/img/top/2603/kv_bg.jpg);
}

.kv_ttl {
  position: absolute;
  right: 3.5rem;
  bottom: 14.5rem;
  z-index: 2;
}

.kv_ttl img {
  width: 53.2rem;
}

.kv_slider,
.kv_slide,
.kv_slideInner,
.kv_slideImg,
.kv .slick-list,
.kv .slick-track {
  height: 100%;
}

.kv_slider {
  position: relative;
  z-index: 1;
}

.kv_slider .slick-dots {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  position: absolute;
  bottom: 3.0rem;
  left: 0;
  z-index: 2;
  width: 100%;
}

.kv_slider .slick-dots > li {
  flex: 0 0 auto;
  width: auto;
  margin: 0.8rem;
  line-height: 1;
}

.kv_slider .slick-dots > li > button {
  display: block;
  position: relative;
  width: 2.2rem;
  height: 2.2rem;
  margin: 0;
  border: none;
  border-radius: 100rem;
  opacity: 1;
  background-color: transparent !important;
  font-size: 0;
  text-indent: -999rem;
}

.kv_slider .slick-dots > li > button::before {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 100rem;
  background-color: #fff;
  content: '';
  transition: 0.2s all ease-out;
}

.kv_slider .slick-dots > li > button:hover::before {
  opacity: 0.7;
}

.kv_slider .slick-dots > li.slick-active > button::before,
.kv_slider .slick-dots > li.slick-active > button:hover::before {
  background-color: #141414;
  opacity: 1;
}

.kv_slide {
  position: relative;
}

.kv_slideTtl {
  position: absolute;
  top: 12.5rem;
  right: 3.5rem;
}

.kv_slideTtl img {
  width: 7.1rem;
}

.kv_slideTxt {
  position: absolute;
  bottom: 4.5rem;
  left: 3.5rem;
}

.kv_slideTxt img {
  width: auto;
  height: 32.5rem;
}

.kv_slideImg {
  position: relative;
  z-index: -1;
}

.kv_slideImg img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
}

.kv_comments {
  position: absolute;
  bottom: 4.0rem;
  right: 3.0rem;
  z-index: 2;
  color: #fff;
  font-size: 1.6rem;
  line-height: 1.4;
}


/* Anniversaray ----------------------------*/
.anniv {
  position: relative;
  z-index: 1;
  padding-top: 19.0rem;
  margin-top: 100vh;
  text-align: center;
}

.anniv::before,
.anniv::after {
  position: absolute;
  z-index: -1;
  width: 32.8rem;
  height: 34.2rem;
  background-image: url(/hagoromoarare/assets/pages/img/top/2603/anniv_bg.png);
  background-repeat: no-repeat;
  background-position: 50% 0;
  background-size: 100% auto;
  content: '';
}

.anniv::before {
  top: 7.5rem;
  right: 0;
}

.anniv::after {
  top: 73.5rem;
  left: 0;
}

.anniv > .sec_arare {
  top: 6.0rem;
  left: 50%;
  transform: translateX(-50%);
  width: 86.4rem;
  height: 52.2rem;
}

.anniv_ttl > span {
  display: block;
}

.anniv_ttl > span:nth-of-type(2) {
  margin-top: 4.5rem;
}

.anniv_ttl > span:nth-of-type(1) img {
  width: 27.5rem;
}

.anniv_ttl > span:nth-of-type(2) img {
  width: 60.0rem;
}

.anniv_txt {
  margin-top: 0;
  color: #fff;
  font-size: 2.6rem;
  font-weight: 500;
  line-height: 2.2;
}

.anniv_voice {
  margin-top: 4.0rem;
}

.anniv_hagoromoarare {
  position: relative;
  margin-top: 7.0rem;
}

.anniv_hagoromoarare > img {
  width: 50.0rem;
}

.anniv_hagoromoarare .sec_arare {
  top: -3.0rem;
  left: 7.0rem;
  width: 62.4rem;
  height: 40.6rem;
}


/* Package ----------------------------*/
.pkg {
  padding: 0 3.5rem;
  margin-top: 9.0rem;
}

.pkg_inner {
  position: relative;
  z-index: 1;
  padding: 8.5rem 4.5rem 9.5rem 4.5rem;
  border-radius: 2.0rem;
  background-color: #ffe7b8;
}

.pkg_ttl {
  margin-bottom: 11.6rem;
  text-align: center;
}

.pkg_ttl img {
  width: 41.2rem;
}

.pkg_list > li {
  position: relative;
  z-index: 1;
  margin-top: 6.5rem;
  padding-top: 12.0rem;
  border-top: 0.2rem dashed #ff5000;
}

.pkg_list > li:nth-of-type(1) {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}

.pkg_list > li::before,
.pkg_list > li::after {
  position: absolute;
  z-index: -1;
  background-repeat: no-repeat;
  background-position: 50% 0;
  background-size: 100% auto;
  content: '';
}

.pkg_list01::before,
.pkg_list01::after {
  background-image: url(/hagoromoarare/assets/pages/img/top/2603/pkg_list01_bg.svg);
}

.pkg_list01::before {
  top: -7.3rem;
  left: -4.5rem;
  width: 28.0rem;
  height: 33.4rem;
}

.pkg_list01::after {
  right: 0.5rem;
  bottom: 12.4rem;
  width: 9.6rem;
  height: 11.5rem;
}

.pkg_list02::before,
.pkg_list02::after {
  background-image: url(/hagoromoarare/assets/pages/img/top/2603/pkg_list02_bg.svg);
}

.pkg_list02::before {
  top: 5.0rem;
  right: -4.5rem;
  width: 28.0rem;
  height: 33.4rem;
}

.pkg_list02::after {
  left: 0.5rem;
  bottom: -2.0rem;
  width: 10.8rem;
  height: 13.0rem;
}

.pkg_list01 .sec_arare {
  top: -13.5rem;
  right: -7.0rem;
  width: 19.7rem;
  height: 30.7rem;
}

.pkg_list02 .sec_arare {
  top: 6.5rem;
  left: -6.5rem;
  width: 17.2rem;
  height: 32.5rem;
}

.pkg_listInner {
  text-align: center;
}

.pkg_listInner > dt {
  display: block;
}

.pkg_list01 .pkg_listInner > dt img {
  width: 26.8rem;
}

.pkg_list02 .pkg_listInner > dt img {
  width: 32.5rem;
}

.pkg_listInner > dd:nth-of-type(1) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 38.0rem;
  margin-top: 4.5rem;
  padding: 1.0rem;
  border-radius: 100.0rem;
  background-color: #141414;
  color: #fff;
  font-size: 2.5rem;
  font-weight: 700;
  line-height: 1.4;
}

.pkg_listInner > dd:nth-of-type(2) {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 1.8rem;
  font-size: 2.3rem;
  font-weight: 700;
  line-height: 1.4;
}

.pkg_listInner > dd:nth-of-type(2) img {
  display: inline-block;
  width: 10.0rem;
  margin-right: 2.0rem;
}

.pkg_listInner > dd:nth-of-type(2) > a {
  color: #0082ff;
  text-decoration: underline;
}

.pkg_comments {
  position: absolute;
  right: 2.5rem;
  bottom: 2.5rem;
  font-size: 1.6rem;
  line-height: 1.4;
}

/* Movie / Radio ----------------------------*/
.mr {
  padding: 0 3.5rem;
  margin-top: 7.0rem;
}

.mr_inner {
  position: relative;
  z-index: 1;
  padding: 0 3.0rem 7.5rem 3.5rem;
  border: 0.5rem solid #ffe7b8;
  border-radius: 2.0rem;
  background-color: #ff5000;
}

.mr_inner::before,
.mr_inner::after {
  position: absolute;
  z-index: -1;
  width: 27.8rem;
  height: 29.0rem;
  overflow: hidden;
  background-image: url(/hagoromoarare/assets/pages/img/top/2603/mr_bg.png);
  background-repeat: no-repeat;
  background-position: 50% auto;
  background-size: 100% auto;
  content: '';
}

.mr_inner::before {
  top: 0;
  left: 0;
  border-top-left-radius: 2.0rem;
}

.mr_inner::after {
  bottom: 0;
  right: 0;
  border-bottom-right-radius: 2.0rem;
}

.mr_ttl {
  margin-bottom: 3.5rem;
  text-align: center;
}

.mr_list > li {
  margin-top: 3.0rem;
}

.mr_list > li:nth-of-type(1) {
  margin-top: 0;
}

.mr_listInner {
  padding: 1.0rem;
  background-color: #ffe7b8;
  text-align: center;
}

.mr_listInner > dt {
  display: block;
}

.mr_listInner > dd {
  padding-top: 2.5rem;
  padding-bottom: 2.5rem;
}

.mr_listInner > dd > a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 52.5rem;
  padding: 1.0rem;
  border-radius: 100.0rem;
  background-color: #ff5000;
  color: #fff;
  font-size: 2.5rem;
  font-weight: 700;
  line-height: 1.4;
}


/* Movie ----------------------------*/
.movie {
  padding-top: 10.0rem;
}

.movie .mr_ttl img {
  width: 17.3rem;
}


/* Radio ----------------------------*/
.radio {
  position: relative;
  margin-top: 10.0rem;
  padding-top: 9.0rem;
  border-top: 0.2rem dashed #fff;
}

.radio .mr_ttl img {
  width: 16.8rem;
}

.radio .sec_arare {
  top: -7.3rem;
  left: -4.7rem;
  width: 19.3rem;
  height: 18.4rem;
}


/* Profile / Special ----------------------------*/
.ps {
  padding: 0 3.5rem 5.0rem 3.5rem;
  margin-top: 5.0rem;
}

.ps_inner {
  position: relative;
  z-index: 1;
  padding: 0 4.5rem 49.5rem 4.5rem;
  border-radius: 2.0rem;
  background-color: #141414;
}

.ps_inner::after {
  position: absolute;
  left: 0;
  bottom: 0;
  z-index: -1;
  width: 100%;
  height: 49.5rem;
  background-image: url(/hagoromoarare/assets/pages/img/top/2603/ps_bottom.png);
  background-repeat: no-repeat;
  background-position: 50% bottom;
  background-size: 100% auto;
  content: '';
}

.ps_inner > .sec_arare {
  top: -11.0rem;
  right: -2.5rem;
  width: 19.6rem;
  height: 16.6rem;
}

.ps_sns {
  margin-top: 9.5rem;
}

.ps_sns > dd {
  margin-top: 3.5rem;
}

.ps_comments {
  position: absolute;
  right: 2.5rem;
  bottom: 2.5rem;
  color: #fff;
  font-size: 1.6rem;
  line-height: 1.4;
  text-align: right;
}


/* Profile ----------------------------*/
.profile_ttl {
  text-align: center;
}

.profile_ttl img {
  width: 22.4rem;
}

.profile {
  padding-top: 10.0rem;
  position: relative;
  z-index: 1;
}

.profile::before,
.profile::after {
  position: absolute;
  z-index: -1;
  width: 25.1rem;
  height: 30.0rem;
  background-image: url(/hagoromoarare/assets/pages/img/top/2603/profile_bg.svg);
  background-repeat: no-repeat;
  background-position: 50% 0;
  background-size: 100% auto;
  content: '';
}

.profile::before {
  top: 5.7rem;
  right: -4.5rem;
}

.profile::after {
  bottom: 2.5rem;
  left: -4.5rem;
}

.profile_inner {
  margin-top: 7.5rem;
  color: #fff;
}

.profile_inner > dt {
  display: block;
  padding-left: 4.0rem;
  padding-right: 4.0rem;
}

.profile_inner > dd {
  margin-top: -10.0rem;
}

.profile_name > span {
  display: block;
  font-size: 2.0rem;
  line-height: 1;
}

.profile_name > span:nth-of-type(1) {
  margin-bottom: 1.5rem;
  color: #ff5000;
}

.profile_name > span:nth-of-type(2) {
  display: inline-block;
  margin-bottom: 2.5rem;
  padding-bottom: 2.5rem;
  border-bottom: 0.3rem solid #fff;
  font-size: 4.0rem;
  font-weight: 700;
}

.profile_txt {
  margin-top: 4.0rem;
  font-size: 2.2rem;
  line-height: 2;
}

.profile_sns {
  display: flex;
  align-items: center;
  margin-top: 9.0rem;
  justify-content: flex-end;
}

.profile_sns > li {
  display: inline-block;
  margin-left: 2.5rem;
}

.profile_snsInner {
  display: flex;
  align-items: center;
}

.profile_snsInner > dt {
  display: block;
  width: 4.0rem;
}

.profile_sns > li.x .profile_snsInner > dt {
  width: 3.0rem;
}

.profile_snsInner > dd {
  flex: 1;
  padding-left: 1.0rem;
  color: #fff;
  font-size: 2.0rem;
}


/* Special ----------------------------*/
.special {
  margin-top: 7.0rem;
  padding-top: 9.0rem;
  border-top: 0.2rem dashed #fff;
  position: relative;
  z-index: 1;
}

.special::before,
.special::after {
  position: absolute;
  z-index: -1;
  width: 27.9rem;
  height: 29.2rem;
  background-image: url(/hagoromoarare/assets/pages/img/top/2603/special_bg.svg);
  background-repeat: no-repeat;
  background-position: 50% 0;
  background-size: 100% auto;
  content: '';
}

.special::before {
  top: 51.5rem;
  left: -4.5rem;
}

.special::after {
  bottom: -9.0rem;
  right: -4.5rem;
}

.special > .sec_arare {
  top: -12.5rem;
  left: -6.5rem;
  width: 18.0rem;
  height: 20.0rem;
}

.special_ttl {
  text-align: center;
}

.special_ttl span {
  display: block;
}

.special_ttl > span:nth-of-type(2) {
  position: relative;
  margin-top: 2.0rem;
}

.special_ttl > span:nth-of-type(1) img {
  width: 57.5rem;
}

.special_ttl > span:nth-of-type(2) img {
  width: 56.4rem;
}

.special_ttlIcon {
  position: absolute;
  top: -7.0rem;
  left: 50%;
  transform: translateX(-50%);
  width: 11.4rem;
}

.special_ttlIconInner {
  animation: profile-special-icon 1.4s linear infinite;
}

@keyframes profile-special-icon {
  0% {
    transform: cale(1);
    
  }
  50% {
    transform: scale(0.75);
  }
  100% {
    transform: scale(1);
  }
}

.special_subttl {
  margin-top: 3.5rem;
  text-align: center;
}

.special_subttl img {
  width: 55.0rem;
}

.special_txt {
  margin-top: 5.5rem;
  color: #fff;
  font-size: 2.5rem;
  text-align: center;
  line-height: 2.2;
}

.special_voice {
  margin-top: 6.0rem;
}

.special_voice > li {
  margin-top: 1.5rem;
}

.special_voice > li:nth-of-type(1) {
  margin-top: 0;
}

.special_voiceBtn {
  display: block;
  position: relative;
  z-index: 1;
  width: 100%;
  padding: 1.0rem;
  border: 0.2rem dashed #fff;
  border-radius: 100.0rem;
  overflow: hidden;
}

.special_voiceBtn > span {
  display: flex;
  align-items: center;
  position: relative;
  z-index: -1;
  width: 100%;
  height: 18.0rem;
  padding-left: 8.0rem;
  border-radius: 100.0rem;
  font-size: 3.0rem;
  font-weight: 900;
  text-align: left;
  line-height: 1.4;
}

.special_voiceBtn.is-orange > span {
  background-color: #ffb999;
}

.special_voiceBtn.is-yellow > span {
  background-color: #ffe7b8;
}

.special_voiceBtn > span::before,
.special_voiceBtn > span::after {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  content: '';
}

.special_voiceBtn > span::before {
  left: 5.0rem;
  width: 0.7rem;
  height: 8.0rem;
  background-color: #ff5000;
}

.special_voiceBtn > span::after {
  right: 3.5rem;
  width: 8.6rem;
  height: 10.2rem;
  background-image: url(/hagoromoarare/assets/pages/img/top/2603/special_voice_icon.svg);
  background-repeat: no-repeat;
  background-position: 50% auto;
  background-size: 100% auto;
}


/* Products ----------------------------*/
.products {
  background-color: #ff5000;
  background-image: url(/hagoromoarare/assets/common/img/2603/bg_texture02.jpg);
  background-repeat: repeat;
}

.products_kv {
  background-image: url(/hagoromoarare/assets/pages/img/top/2603/products_kv_bg.jpg);
  background-repeat: repeat;
  background-size: 16.7rem auto;
}

.products_kv::before {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 35.7rem;
  background-image: url(/hagoromoarare/assets/pages/img/top/2603/products_kv_bg_bottom.png);
  background-repeat: no-repeat;
  background-position: 50% bottom;
  background-size: 100% auto;
  content: '';
}

.products_kvInner {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 100%;
  text-align: center;
}

.products_kvTtl {
  position: relative;
  z-index: 1;
}

.products_kvTtl::before {
  position: absolute;
  z-index: -1;
  left: 0;
  bottom: -8.0rem;
  width: 100%;
  height: 40.0rem;
  background-image: url(/hagoromoarare/assets/pages/img/top/2603/products_kv_ttl_bg.png);
  background-repeat: no-repeat;
  background-position: 50% 0;
  background-size: 100% auto;
  content: '';
}

.products_kvTtl img {
  width: 27.6rem;
}

.products_kvProducts {
  margin-top: 7.0rem;
  position: relative;
  z-index: 2;
}

.products_kv .sec_aniArare {
  top: -16.0rem;
  right: -5.5rem;
  width: 32.0rem;
}

.products_kvComments {
  position: absolute;
  right: 2.5rem;
  bottom: 2.5rem;
  font-size: 1.6rem;
  text-align: right;
}

.products_lead {
  position: relative;
  margin-top: calc(100vh + 37.4rem);
  color: #fff;
  text-align: center;
}

.products_lead::before {
  position: absolute;
  top: -37.4rem;
  left: 0;
  width: 100%;
  height: 37.4rem;
  background-image: url(/hagoromoarare/assets/pages/img/top/2603/products_lead_mask.png);
  background-repeat: no-repeat;
  background-position: 50% bottom;
  background-size: 100% auto;
  content: '';
}

.products_leadTtl {
  padding-top: 11.0rem;
  font-size: 5.0rem;
  font-weight: 700;
  line-height: 1.5;
}

.products_leadTxt {
  margin-top: 4.0rem;
  font-size: 3.0rem;
  font-weight: 700;
  line-height: 2.4;
}

.products_leadInner {
  margin-top: 1.0rem;
}

.products_leadInner > dt {
  display: block;
  position: relative;
}

.products_leadInner > dt > img {
  width: 50.0rem;
}

.products_leadInner > dt .sec_arare {
  top: -7.0rem;
  left: 6.0rem;
  width: 62.6rem;
  height: 40.8rem;
}

.products_leadInner > dd {
  margin-top: 3.0rem;
  font-size: 3.0rem;
  font-weight: 700;
  line-height: 2.4;
}

.products_leadVoice {
  position: relative;
  z-index: 2;
  margin-top: 4.0rem;
}

.products_leadBottom {
  position: relative;
  z-index: 1;
  height: 94.5rem;
  background-image: url(/hagoromoarare/assets/pages/img/top/2603/products_lead_bottom_bg.jpg);
  background-repeat: no-repeat;
  background-position: 50% bottom;
  background-size: 100% auto;
}

.products_leadBottom .sec_aniArare {
  top: -2.0rem;
  left: 9.0rem;
  width: 32.0rem;
}

.products_leadBottomComments {
  position: absolute;
  right: 4.0rem;
  bottom: 4.0rem;
  font-size: 1.6rem;
  line-height: 1.4;
}

.products_featuresInner {
  position: relative;
  z-index: 1;
}

.products_featuresTtl {
  position: absolute;
  top: 5.5rem;
  left: 0;
  z-index: 1;
  width: 100%;
  color: #fff;
  font-size: 5.0rem;
  font-weight: 700;
  text-align: center;
  line-height: 1.4;
}

.products_featuresTxt {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  color: #fff;
  font-size: 3.0rem;
  font-weight: 700;
  text-align: center;
  line-height: 2.4;
  text-shadow: 0px 0px 5px rgba(135, 67, 0, 0.9), 0px 0px 5px rgba(135, 67, 0, 0.9);
}

.products_featuresBtn {
  position: absolute;
  right: 4.0rem;
  bottom: 4.2rem;
  z-index: 2;
}

.products_featuresBtnInner {
  display: block;
  position: relative;
  width: 10.0rem;
  height: 9.8rem;
  overflow: hidden;
  text-indent: 100%;
  white-space: nowrap;
}

.products_featuresBtn.is-play .products_featuresBtnInner {
  animation: features-btn-play 1.3s linear infinite;
}

@keyframes features-btn-play {
  0% {
    transform: scale(1);
    opacity: 0.3;
    
  }
  50% {
    transform: scale(1.2);
    opacity: 1;
  }
  100% {
    transform: scale(1);
    opacity: 0.3;
  }
}

.products_featuresBtnInner::before,
.products_featuresBtnInner::after {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-size: 100% auto;
  content: '';
}

.products_featuresBtnInner::before {
  background-image: url(/hagoromoarare/assets/pages/img/top/2603/icon_play.svg);
}
.products_featuresBtn.is-play .products_featuresBtnInner::before {
  display: none;
}

.products_featuresBtnInner::after {
  display: none;
  background-image: url(/hagoromoarare/assets/pages/img/top/2603/icon_pause.svg);
}
.products_featuresBtn.is-play .products_featuresBtnInner::after {
  display: block;
}

.products_featuresBg {
  position: relative;
  z-index: -1;
  width: 100%;
  height: 75.0rem;
  overflow: hidden;
}

.products_featuresBg > * {
  display: inline-block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  transition: 2.0s transform linear;
}

.products_features01 .products_featuresBtn.is-play + .products_featuresBg > * {
  transform: scale(1.3);
}

.products_wasabi {
  position: relative;
  padding: 6.5rem 3.5rem 8.5rem 3.5rem;
}

.products_wasabiOuter {
  padding-top: 5.0rem;
  padding-bottom: 6.0rem;
  border: 0.5rem solid #adce17;
  border-radius: 2.0rem;
  background-color: #007837;
  background-image: url(/hagoromoarare/assets/pages/img/top/2603/products_wasabi_bg.png);
  background-repeat: repeat;
  background-size: 9.8rem auto;
}

.products_wasabiTtl {
  position: relative;
  padding-bottom: 7.5rem;
  margin-bottom: 2.5rem;
  color: #fff;
  font-size: 5.0rem;
  font-weight: 700;
  text-align: center;
  line-height: 1.4;
  letter-spacing: 0.1em;
}

.products_wasabiTtl::after {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 48.4rem;
  height: 4.6rem;
  background-image: url(/hagoromoarare/assets/pages/img/top/2603/products_wasabi_ttl_bg.svg);
  background-repeat: no-repeat;
  background-position: 50% 0;
  background-size: 100% auto;
  content: '';
}

.products_wasabiInner {
  color: #fff;
  text-align: center;
}

.products_wasabiInner > dt {
  display: block;
  position: relative;
}

.products_wasabiInner > dt > img {
  width: 68.0rem;
}

.products_wasabiInner > dt .sec_arare {
  left: -2.2rem;
  bottom: -3.5rem;
  width: 21.2rem;
  height: 16.0rem;
}

.products_wasabiInner > dd {
  margin-top: 3.5rem;
}

.products_wasabiName img {
  width: 43.0rem;
}

.products_wasabiContents {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 38.0rem;
  padding: 1.0rem;
  margin-top: 2.0rem;
  border-radius: 100.0rem;
  background-color: #141414;
  font-size: 2.5rem;
  font-weight: 700;
  line-height: 1.4;
}

.products_wasabiTxt {
  margin-top: 2.5rem;
  font-size: 2.3rem;
  font-weight: 500;
}

.products_wasabiComments {
  position: absolute;
  color: #fff;
  font-size: 1.6rem;
}

.products_wasabi > .products_wasabiComments {
  top: 1.5rem;
  right: 3.5rem;
}

.products_wasabiInner .products_wasabiComments {
  right: 1.0rem;
  bottom: 2.0rem;
}


/* Manga ----------------------------*/
.manga {
  position: relative;
  z-index: 1;
  background-color: #ffd21e;
}

.manga::before {
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  width: 100%;
  height: 89.5rem;
  background-image: url(/hagoromoarare/assets/common/img/2603/bg_pattern03.svg);
  background-repeat: repeat;
  background-size: 2.2rem auto;
  content: '';
}

.manga_ttl {
  padding-top: 5.0rem;
  text-align: center;
}

.manga_ttl > span {
  display: block;
}

.manga_ttl > span:nth-of-type(1) > img {
  width: 70.8rem;
}

.manga_ttl > span:nth-of-type(2) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 65.0rem;
  height: 9.0rem;
  margin-top: -1.7rem;
  border-radius: 100.0rem;
  background-color: #000;
  color: #fff;
  font-size: 3.0rem;
  font-weight: 700;
}

.manga_txt {
  margin-top: 2.0rem;
  font-size: 2.5rem;
  font-weight: 700;
  line-height: 2.0;
  text-align: center;
}

.manga_txt:nth-of-type(1) {
  margin-top: 5.0rem;
}

.manga_img {
  margin-top: 3.5rem;
}

.manga_list {
  margin-top: 5.0rem;
  padding: 5.0rem 5.0rem 3.5rem 5.0rem;
  background-image: url(/hagoromoarare/assets/common/img/2603/bg_pattern03.svg);
  background-repeat: repeat;
  background-size: 2.2rem auto;
}

.manga_listInner > li {
  margin-top: 5.0rem;
}

.manga_listInner > li:nth-of-type(1) {
  margin-top: 0;
}

.manga_listComments {
  margin-top: 2.5rem;
  font-size: 1.6rem;
  line-height: 1.4;
}


/* Buy ----------------------------*/
.buy {
  position: relative;
  z-index: 2;
  padding: 7.5rem 4.5rem 18.5rem 4.5rem;
  background-color: #ff5000;
  background-image: url(/hagoromoarare/assets/common/img/2603/bg_pattern02.svg);
  background-repeat: repeat;
  background-size: 6.82rem auto;
}

.buy_ttl {
  position: relative;
  padding-bottom: 7.0rem;
  color: #fff;
  font-size: 5.0rem;
  font-weight: 700;
  line-height: 1.4;
  text-align: center;
}

.buy_ttl::before {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 48.2rem;
  height: 4.2rem;  
  background-image: url(/hagoromoarare/assets/pages/img/top/2603/buy_ttl_bg.svg);
  background-repeat: no-repeat;
  background-position: 50% 0;
  background-size: 100% auto;
  content: '';
}

.buy_inner {
  padding-left: 1.0rem;
  padding-right: 1.0rem;
  color: #fff;
  text-align: center;
}

.buy_inner > dt {
  display: block;
  margin-top: -1.0rem;
}

.buy_inner > dt img {
  width: 51.0rem;
}

.buy_inner > dd {
  font-size: 2.8rem;
  font-weight: 700;
  line-height: 1.8;
}

.buy_btn {
  margin-top: 3.5rem;
}

.buy_btn > dt {
  display: block;
  margin-top: 0.5rem;
  font-size: 2.8rem;
  font-weight: 500;
  line-height: 1.4;
}

.buy_btn > dd > a {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 8.0rem;
  border-radius: 100.0rem;
  background-color: #004098;
  color: #ffd21e;
  font-size: 3.0rem;
  font-weight: 700;
}

.buy_banner {
  margin-top: 2.0rem;
}

.buy_banner > dd {
  color: #fff;
  font-size: 1.6rem;
  text-align: right;
}

.buy_banner > dt {
  display: block;
  margin-top: 0.5rem;
}

.buy_banner > dt > a {
  display: block;
  position: relative;
}

.buy_banner > dt > a::after {
  position: absolute;
  right: -4.5rem;
  bottom: -25.9rem;
  width: 70.4rem;
  height: 39.2rem;
  background-image: url(/hagoromoarare/assets/pages/img/top/2603/buy_banner_illust.png);
  background-repeat: no-repeat;
  background-position: 50% 0;
  background-size: 100% auto;
  content: '';
}

.buy_bannerSteam,
.buy_bannerSteam > span {
  display: block;
  position: absolute;
}

.buy_bannerSteam {
  top: 2.6rem;
  width: 100%;
}

.buy_bannerSteam > span {
  display: block;

}

.buy_bannerSteam > span:nth-of-type(1) {
  top: 0;
  left: 1.8rem;
  width: 7.7rem;
  height: 12.1rem;
  animation: buy-banner-steam01 2.0s ease-out infinite;
}

.buy_bannerSteam > span:nth-of-type(2) {
  top: 0.5rem;
  right: 2.2rem;
  width: 7.7rem;
  height: 12.1rem;
  animation: buy-banner-steam02 2.0s ease-out infinite;
}

@keyframes buy-banner-steam01 {
  0% {
    transform: translateY(0) scale(1.2);
    opacity: 1;
  }
  50% {
    transform: translateY(1.0rem) scale(0.85);
    opacity: 0.3;
  }
  100% {
    transform: translateY(0) scale(1.2);
    opacity: 1;
  }
}

@keyframes buy-banner-steam02 {
  0% {
    transform: translateY(0) scale(0.85);
    opacity: 0.3;
  }
  50% {
    transform: translateY(1.0rem) scale(1.2);
    opacity: 1;
  }
  100% {
    transform: translateY(0) scale(0.85);
    opacity: 0.3;
  }
}


/* Petit Mall ----------------------------*/
.petitmall {
  position: relative;
  z-index: 1;
  padding-top: 14.5rem;
  padding-bottom: 5.0rem;
  background-color: #fff;
}

.petitmall_ttl {
  text-align: center;
}

.petitmall_ttl > span {
  display: block;
  font-size: 3.5rem;
  font-weight: 700;
  line-height: 1.4;
}

.petitmall_ttl > span:nth-of-type(1) {
  margin-bottom: 2.5rem;
}

.petitmall_ttl > span:nth-of-type(1) img {
  width: 15.2rem;
}

.petitmall_inner {
  margin-top: 2.5rem;
  text-align: center
}

.petitmall_inner > dd {
  font-size: 2.5rem;
  font-weight: 500;
}

.petitmall_inner > dt {
  display: block;
  margin-top: 5.0rem;
}

.petitmall_comments {
  margin-top: 3.5rem;
  padding-left: 6.0rem;
  padding-right: 6.0rem;
  font-size: 2.0rem;
}