@charset "UTF-8";
/* ===============================================
	* COMMON *
=============================================== */
:root {
  --headerBrandListHeightEc: 5.8rem;

  --box-brandMessage-duration: 2s;
  --box-brandMessage-delay-secondLine: 0.4s;
  --box-brandMessage-delay-thirdLine: 0.8s;
}

@media (max-width: 767px) {
  :root {
    --headerBrandListHeightEc: 4rem;
  }
}

.header-underSide_inner {
  display: none;
}

/* ===============================================
	* FIRSTVIEW *
=============================================== */

.totalTop-fv {
  position: relative;
}
/* ===============================================
	* INFORMATION *
=============================================== */
[data-pageBrandType="total"] .tab_item-contents {
  margin-bottom: 0;
}
.sec-articleList {
}
.articleList_inner {
  width: 100%;
  max-width: var(--container-main);
  padding: 8rem 2rem 10rem;
  margin: 0 auto;
}
.sec-articleList .articleList {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4rem;
}

[data-articleContents="event"] .secTtl-eng {
  color: #fff;
}
.bg-total-lampBlack {
  background: #272727;
}

@media (min-width: 768px) {
  /* ===============================================
		* FIRSTVIEW *
	=============================================== */
  .fv-brandList {
    display: none;
  }
  #app {
    width: 100%;
    /*240722 Matsunuma変更*/
    height: calc(60vh - var(--headerBrandListHeightEc));
    /* 元記述 height: calc(100vh - var(--headerBrandListHeightEc));*/
    background-position: center;
    background-size: cover;
    /* 重いけどプリロード */
    /* background-image: url(../Contents/ImagesPkg/total/fv_total_ec.jpg), url(../Contents/ImagesPkg/total/fv_total_reuse.jpg), url(../Contents/ImagesPkg/total/fv_total_prime.jpg); */
    transition: all 0.6s;
    /* background-position-y: 6rem ;
		opacity: 0; */
  }
  /* html.enable-javascript.window-load #app{
		animation-name: move-firstView ;
		animation-duration: 0.2s;
		animation-fill-mode: forwards;
		animation-timing-function:cubic-bezier(0, 0, 0.855, 1);
		will-change: auto;
	} */
  #app.music {
    background-image:
      url(../Contents/ImagesPkg/total/fv_total_ec.jpg),
      url(../Contents/ImagesPkg/total/fv_total_reuse.jpg),
      url(../Contents/ImagesPkg/total/fv_total_prime.jpg);
  }
  #app.reuse {
    background-image:
      url(../Contents/ImagesPkg/total/fv_total_reuse.jpg),
      url(../Contents/ImagesPkg/total/fv_total_ec.jpg),
      url(../Contents/ImagesPkg/total/fv_total_prime.jpg);
  }
  #app.prime {
    background-image:
      url(../Contents/ImagesPkg/total/fv_total_prime.jpg),
      url(../Contents/ImagesPkg/total/fv_total_ec.jpg),
      url(../Contents/ImagesPkg/total/fv_total_reuse.jpg);
  }
  .panel-brand {
    position: absolute;
  }
  .panel-brand[data-target="music"] {
    animation:
      wobbling_x 1.8s ease-in-out infinite alternate,
      wobbling_y 3s ease-in-out infinite alternate;
  }
  .panel-brand[data-target="reuse"] {
    animation:
      wobbling_x02 4s ease-in-out infinite alternate,
      wobbling_y02 2s ease-in-out infinite alternate;
  }
  .panel-brand[data-target="prime"] {
    animation:
      wobbling_x03 3s ease-in-out infinite alternate,
      wobbling_y03 1.6s ease-in-out infinite alternate;
  }
  @keyframes wobbling_x {
    0% {
      margin-left: 8px;
    }

    100% {
      margin-left: 0px;
    }
  }
  @keyframes wobbling_x02 {
    0% {
      margin-left: -12px;
    }

    100% {
      margin-left: 0px;
    }
  }
  @keyframes wobbling_x03 {
    0% {
      margin-left: 10px;
    }

    100% {
      margin-left: 0px;
    }
  }

  @keyframes wobbling_y {
    0% {
      margin-bottom: 0px;
    }

    100% {
      margin-bottom: -8px;
    }
  }
  @keyframes wobbling_y02 {
    0% {
      margin-bottom: 0px;
    }

    100% {
      margin-bottom: 12px;
    }
  }
  @keyframes wobbling_y03 {
    0% {
      margin-bottom: 0px;
    }

    100% {
      margin-bottom: 14px;
    }
  }

  /*240722 Matsunuma変更*/
  .panel-brand[data-target="music"] {
    bottom: 34vh;
    right: 0;
  }
  .panel-brand[data-target="reuse"] {
    bottom: 15vh;
    right: 0;
  }
  .panel-brand[data-target="prime"] {
    bottom: 0vh;
    right: 0vw;
  }
  /*元記述
	.panel-brand[data-target="music"]{
		bottom: 62vh;
		left: 11vw;
	}
	.panel-brand[data-target="reuse"]{
		bottom: 36vh;
		left: 35vw;
	}
	.panel-brand[data-target="prime"]{
		bottom: 49vh;
		left: 60vw;
	}*/
  .coverTarget {
    /* width: max-content; */
    width: fit-content;
    background: rgba(28, 28, 28, 0);
    padding: 5.6rem 3rem 3rem;
    transition: all 0.6s;
  }

  .totalTop-logo_wrap {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    left: 2rem;
  }

  .brandConcept {
    text-align: center;
    color: #fff;
    line-height: 1;
    font-size: 1.6rem;
    font-weight: 500;
    opacity: 0;
    transition: all 0.6s;
  }
  .brand-Logo {
    filter: drop-shadow(0px 4px 6px rgba(0, 0, 0, 0.2));
    transform: translateY(0);
    transition: all 0.6s;
    margin: 0 auto;
  }
  /*240722 Matsunuma変更*/
  .brand-Logo[data-brandLogo="music"] {
    width: 21.79rem;
    aspect-ratio: 317.9/65.24;
  }
  .brand-Logo[data-brandLogo="reuse"] {
    width: 14.086rem;
    aspect-ratio: 210.86/123.88;
  }
  .brand-Logo[data-brandLogo="prime"] {
    width: 21.154rem;
    aspect-ratio: 301.54/107.89;
  }
  /*元記述
	.brand-Logo[data-brandLogo="music"]{
		width: 31.79rem;
		aspect-ratio: 317.9/65.24;
	}
	.brand-Logo[data-brandLogo="reuse"]{
		width: 21.086rem;
		aspect-ratio: 210.86/123.88;
	}
	.brand-Logo[data-brandLogo="prime"]{
		width: 30.154rem;
		aspect-ratio: 301.54/107.89;
	}*/
}

/*▽▽240722 Matsunuma変更▽▽*/
@media screen and (min-width: 1440px) {
  .panel-brand[data-target="music"] {
    bottom: 1vh;
    right: 30vw;
  }
  .panel-brand[data-target="reuse"] {
    bottom: 0vh;
    right: 17vw;
  }
  .panel-brand[data-target="prime"] {
    bottom: 0vh;
    right: 0vw;
  }
}
@media screen and (min-width: 1500px) {
  .brand-Logo[data-brandLogo="music"] {
    width: 31.79rem;
    aspect-ratio: 317.9/65.24;
  }
  .brand-Logo[data-brandLogo="reuse"] {
    width: 21.086rem;
    aspect-ratio: 210.86/123.88;
  }
  .brand-Logo[data-brandLogo="prime"] {
    width: 30.154rem;
    aspect-ratio: 301.54/107.89;
  }
}

/*△△240722 Matsunuma変更△△*/

/* ===============================================
	*FV テキストアニメーション *
=============================================== */
.brandMessage {
  width: 46.6rem;
  /*aspect-ratio: 676/222; */
  position: absolute;
  /* left: 6.5vw; */
  /* bottom: 7vh; */
  bottom: 3vh;
  z-index: 1;
}

.card-brandMessage {
  display: flex;
  flex-wrap: nowrap;
}
/* .card-brandMessage + .card-brandMessage{
	margin-top: 1rem;
} */
.character_inner {
  /* overflow-y: hidden; */
  /* height: 0; */
  font-size: 6rem;
  font-weight: 600;
  color: #fff;
}

/* MVアニメーション 背景のスライド */
.card-brandMessage {
  display: flex;
  flex-wrap: nowrap;
  width: max-content;
  position: relative;
  width: 100%;
  /*height: 300px; */
  overflow: hidden;
  padding: 1.5rem;
  /*height: calc(4.8rem + 3rem); */
}

/* MVアニメーション テキスト 共通 */
html.enable-javascript .character {
  /* height: 0; */
  transform: translate(0%, 40px);
  opacity: 0;
}

html.enable-javascript.window-load .character_inner {
  /* height: 4.8rem; */
  /* will-change: auto; */
  overflow: hidden;
}
html.enable-javascript.window-load [data-line="secondLine"] .character {
  animation-delay: 0.2s;
}
html.enable-javascript.window-load [data-line="thirdLine"] .character {
  animation-delay: 0.4s;
}
html.enable-javascript .character {
  /* transform: translateY(100%); */
  /* height: 0; */
  width: 100%;
}
html.enable-javascript.window-load .character {
  /* animation-name: visible-character;
	animation-duration:0.8s;
	animation-fill-mode: forwards; */
  /* height: 4.8rem; */
  animation-name: visible-character;
  animation-duration: 0.6s;
  animation-fill-mode: forwards;
  animation-timing-function: cubic-bezier(0, 0, 0.855, 1);
}

/* MVアニメーション keyframes */
@keyframes move-firstView {
  0% {
    background-position-y: 6rem;
    opacity: 0;
  }
  100% {
    background-position-y: 0rem;
    opacity: 1;
  }
}
@keyframes visible-character {
  0% {
    /* transform: translate(0 ,-80%); */
    /* height: 0; */
    transform: translate(0%, 40px);
    opacity: 0;
  }
  20% {
    /* height: 0; */
    opacity: 1;
  }
  100% {
    /* transform: translate(0,0); */
    transform: translate(0, 0);
    opacity: 1;
    /* height: 100%; */
  }
}

/* ===============================================
	* BANNER AREA *
=============================================== */
.bottomBanner_inner {
  width: 100%;
  padding: 0 2rem;
  margin: 8rem auto;
}
.bottomBanner_link {
  max-width: 60rem;
  width: 100%;
  margin: 0 auto;
}
.bottomBanner_link img {
  filter: drop-shadow(0px 4px 6px rgba(0, 0, 0, 0.2));
  transition: filter 0.6s;
}

@media (max-width: 1501px) {
}

@media (max-width: 820px) {
  .brandBtn {
    width: 14rem;
  }
}

@media screen and (max-width: 1024px) {
  #Wrap_lower.onlyDefault {
    margin: 0 auto;
    padding: 0;
  }
}

@media (min-width: 768px) and (max-width: 820px) {
  /* ===============================================
		* INFORMATION *
	=============================================== */
}

@media (max-width: 820px) {
  .brandMessage {
    left: 3.5vw;
    bottom: 1vh;
  }
}

@media (max-width: 767px) {
  /* ===============================================
		* COMMON *
	=============================================== */
  /* 
	.header-brandList{
		opacity: 0;
		pointer-events: none;
	} */

  /* .header-userHelper {
		top: calc(50% - 1.8rem);
	} */
  /* ===============================================
		* FIRSTVIEW *
	=============================================== */

  #app {
    display: none;
  }
  /* .fv-brandList_inner{
		position: relative;
	} */
  /*240722 Ogawa変更*/
  .swiper_thumbnail {
    position: absolute;
    left: 0;
    /*bottom: 0;*/
    top: 135px;
  }

  .fv-brandList .swiper-container[data-sliderRole="mainSlider"] {
    width: 100%;
    /*height: auto;*/
    height: 56vh;
    overflow: hidden;
  }

  .fv-brandList .swiper-container[data-sliderRole="mainSlider"] .swiper-slide {
    text-align: center;
    /* Center slide text vertically */
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .slide-img img {
    display: block;
  }

  /* アニメーション調整 */
  .fv-brandList .swiper-container[data-sliderRole="mainSlider"] {
    overflow-x: hidden;
    position: relative;
    width: 100%;
  }

  /* これ関係分 */
  .fv-brandList
    .swiper-container[data-sliderRole="mainSlider"]
    .swiper-slide.swiper-slide-next
    img,
  .fv-brandList
    .swiper-container[data-sliderRole="mainSlider"]
    .swiper-slide.swiper-slide-prev
    img,
  .fv-brandList
    .swiper-container[data-sliderRole="mainSlider"]
    .swiper-slide.swiper-slide-duplicate-next
    img,
  .fv-brandList
    .swiper-container[data-sliderRole="mainSlider"]
    .swiper-slide.swiper-slide-duplicate-prev
    img {
    transform: scale3d(1.1, 1.1, 1);
  }

  .fv-brandList .swiper-container[data-sliderRole="mainSlider"] img {
    object-fit: cover;
    width: 100%;
    height: 100%;
    transition: transform 3s cubic-bezier(0.22, 0.61, 0.36, 1);
    backface-visibility: hidden;
    will-change: transform;
    transform: scale3d(1, 1, 1);
  }

  .fv-brandList {
    position: relative;
  }

  .swiper_thumbnail {
    width: 100%;
  }
  .swiper_thumbnail .swiper-wrapper {
    gap: 0.5rem;
    pointer-events: none;
  }
  .swiper_thumbnail .swiper-slide {
    height: max-content !important;
    width: max-content !important;
    padding: 2rem;
    background: rgba(0, 0, 0, 0);
    transform: scale(1, 1);
    backdrop-filter: blur(0);
    -webkit-backdrop-filter: blur(0);
    transition: all 2s;
    pointer-events: all;
  }
  .swiper_thumbnail .swiper-slide[data-brandPanel="music"] img {
    width: 16.253rem;
    aspect-ratio: 162.53/57.87;
  }
  .swiper_thumbnail .swiper-slide[data-brandPanel="reuse"] img {
    width: 9.642rem;
    aspect-ratio: 96.42/52.75;
  }
  .swiper_thumbnail .swiper-slide[data-brandPanel="prime"] img {
    width: 14.7rem;
    aspect-ratio: 301.54/107.9;
  }
  /* .swiper_thumbnail .swiper-slide + .swiper-slide{
		margin-top: 2rem;
	} */

  .swiper_thumbnail .swiper-slide.swiper-slide-thumb-active {
    background: rgba(0, 0, 0, 0.5);
    transform: scale(1.2, 1.2);
    transform-origin: 0 50%;
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
  }

  .swiper_thumbnail .swiper-slide figure {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    font-size: 1rem;
    line-height: 1;
    font-weight: 600;
    color: #fff;
  }
  .brandConcept {
    text-align: center;
  }
  .brandMessage {
    /* width: 28.9rem; */
    position: absolute;
    top: 3rem;
    left: 2rem;
    bottom: inherit;
    z-index: 2;
    transform: scale(0.45);
    transform-origin: 0% 0%;
    display: none;
  }
  /*240722 Ogawa 変更*/
  .character_inner {
    /*font-size: 7rem;*/
    font-size: 5rem;
  }

  /* ===============================================
		* INFORMATION *
	=============================================== */
  .sec-articleList .articleList {
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr));
    gap: 1.2rem 0;
  }
  [data-pageBrandType="total"] .tab_item-contents {
    margin-top: 3rem;
  }
  /* ===============================================
		* BANNER AREA *
	=============================================== */
  .bottomBanner_inner {
    padding: 0 1rem;
    margin: 6rem auto;
  }
}

@media (max-width: 480px) {
  /* SP only */
}

@media (hover: hover) and (pointer: fine) {
  .coverTarget:hover {
    background: rgba(28, 28, 28, 0.8);
    opacity: 1;
    animation: none;
  }
  .coverTarget:hover .brand-Logo {
    transform: translateY(-2.6rem);
  }
  .coverTarget:hover .brandConcept,
  .bottomBanner_link:hover {
    opacity: 1;
  }
  .bottomBanner_link:hover img {
    filter: drop-shadow(0px 4px 16px rgba(0, 0, 0, 0.4));
    opacity: 1;
  }
}

/* 2024.10 総合トップ改修 */
.top-maincol {
  margin: 10px 0 60px;
}
a.top-maincol-link {
  align-items: center;
  color: #575757;
  display: flex;
  padding: 0 30px 0 0;
  position: relative;
  text-decoration: none;
}
.top-maincol-link::before {
  border: 3px solid #666;
  border-bottom: none;
  border-left: none;
  content: "";
  height: 20px;
  position: absolute;
  right: 10px;
  transform: rotate(45deg);
  width: 20px;
}
.top-maincol-img {
  margin-right: 10px;
}
.top-maincol-img img {
  height: 80px;
  vertical-align: bottom;
  width: 80px;
}
.top-maincol-name {
  display: block;
  font-size: 3.6rem;
  color: #333;
  font-weight: 900;
}
.top-maincol-text {
  font-size: 12px;
}
.slick-slider {
  background-color: #4f4f4f;
}

.info-news li {
  border-bottom: 1px dotted #000;
  list-style: none;
  padding: 10px;
  max-width: 950px;
  margin: 0 auto;
  position: relative;
}
.info-news span {
  border-radius: 5px;
  display: inline-block;
  margin-right: 20px;
  padding: 5px;
  width: 15%;
  text-align: center;
}
.info-news-img {
  display: block;
  width: 40px;
  height: 40px;
  position: absolute;
  right: 0;
  top: 5px;
}
.info-news .online {
  background-color: #d10606;
  color: #fff;
  font-weight: 900;
}
.info-news .online::after {
  content: "ONLINE STORE";
}
.info-news .reuse {
  background-color: #e75400;
  color: #fff;
  font-weight: 900;
}
.info-news .reuse::after {
  content: "REUSE";
}
.info-news .entertainment {
  background-color: #b5a25d;
  color: #fff;
  font-weight: 900;
}
.info-news .entertainment::after {
  content: "ENTERTAINMENT";
}
.info-news .information {
  background-color: #00caee;
  color: #fff;
  font-weight: 900;
}
.info-news .information::after {
  content: "INFORMATION";
}
.info-news .prime {
  background-color: #0e6cc9;
  color: #fff;
  font-weight: 900;
}
.info-news .prime::after {
  content: "Ikebe PRIME";
}
.info-news time {
  display: inline-block;
  font-weight: bold;
  margin-right: 24px;
}
.info-news p {
  color: #1c448d;
  display: inline-block;
  text-decoration: underline;
  overflow: hidden;
  max-width: 65%;
  text-overflow: ellipsis;
  white-space: nowrap;
  position: absolute;
  top: 15px;
}
.button-color--black {
  border: 1px solid #000;
  color: var(--color-white);
  background: #000;
}
/*リユース*/
.ReuseContents {
  background-color: #ed6d00;
}
.reuse_wrap {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2rem 4rem;
  margin-bottom: 60px;
}
.reuse_wrap h2 {
  font-size: 4.2rem;
  margin-bottom: 20px;
  font-weight: 900;
}
.reuse_wrap p {
  font-size: 1.6rem;
  font-weight: 600;
  margin-bottom: 20px;
}
.reuse_wrap .link-tx {
  margin-top: 20px;
  font-size: 3.2rem;
  text-decoration: underline;
  font-weight: 900;
}
/*エンタメ*/
.EntertainmentContents {
  background-color: #000;
  color: #fff;
  position: relative;
}
.EntertainmentContents .top-maincol-text {
  color: #fff;
}
.EntertainmentContents .top-maincol-name {
  color: #fff;
}
.home .topicsContents .swiper-btn {
  width: 10rem;
}
#Foot {
  margin-top: 30px;
}
@media (max-width: 768px) {
  .brandMessage {
    top: initial;
    bottom: -8vh;
  }
  .info-news span {
    width: 33% !important;
    font-size: 9px;
  }
  .info-news p {
    max-width: 100% !important;
    font-size: 12px;
  }
  .secTtl-eng {
    font-size: 3rem;
    margin-bottom: 10px;
  }
  .top-maincol-img img {
    height: 50px;
    width: 50px;
  }
  .top-maincol-name {
    font-size: 2.4rem;
  }
  .top-maincol-text {
    font-size: 9px;
  }

  .reuse_wrap {
    grid-template-columns: repeat(1, minmax(0, 1fr));
    gap: 2rem 0rem;
    margin-bottom: 30px;
  }
  .reuse_wrap h2 {
    font-size: 2.8rem;
  }
  .reuse_wrap p {
    font-size: 1.4rem;
  }
  .reuse_wrap .link-tx {
    font-size: 2rem;
  }
  .shop-banner_wrap {
    grid-template-columns: repeat(1, minmax(0, 1fr)) !important;
    gap: 2rem !important;
    margin: 4rem 0 !important;
  }
  .home .topicsContents .swiper-btn {
    width: 3rem;
  }
  .info-news p {
    position: relative;
    top: 0;
  }
  .info-news-img {
    display: none;
  }
}