@charset "utf-8";

/*-----------------------------------
全体
-----------------------------------*/
:root{
  --gap-ss: clamp(5px, 0.199rem + 0.57vw, 10px);
  --gap-s: clamp(10px, 0.398rem + 1.14vw, 20px);
  --gap-ms:clamp(20px, 1.023rem + 1.14vw, 30px);
  --gap-m: clamp(20px, 0.795rem + 2.27vw, 40px);
  --gap-l: clamp(30px, 1.193rem + 3.41vw, 60px);
  --gap-ll: clamp(45px, 1.79rem + 5.11vw, 90px);

  --font-m: clamp(14px, 0.784rem + 0.45vw, 18px);
  --font-l: clamp(24px, 1.273rem + 1.14vw, 34px);

  --color-base:#484848;
  --color-gray:#ececec;
  --color-lgray:#f6f6f6;
  --color-indicator:#c8c8c8;
  --color-dblue:#001e60;
  --color-blue:#004da1;
}

.galleria-pc {
  position:relative;
  font-family: "Noto Sans JP", sans-serif;
  font-weight: 400;
  font-style: normal;
  width:100%;
  text-align:center;
  color:var(--color-base);
  font-size:var(--font-m);
  letter-spacing:0.025em;
  overflow:hidden;
}
.galleria-pc img{
  width:100%;
  object-fit: contain;
}
.galleria-pc .c-button{
  width:100%;
}


/*-----------------------------------
共通
-----------------------------------*/
.contents-inner{
  position:relative;
  width:90vw;
  max-width:1400px;
  text-align:left;
  margin:auto;
}

.hd-ttl-eng{
  font-family: "futura-pt", sans-serif;
  font-weight: 600;
  font-style: italic;
  font-size:clamp(52px, 2.614rem + 3.18vw, 80px);
  line-height:1;
  margin-bottom:0.1em;
}

.hd-ttl{
  font-weight:700; 
  font-size:var(--font-m);
  line-height:1.2;
}
.lead-txt{                       
  font-size:clamp(22px, 1.057rem + 1.59vw, 36px);
  line-height:1.6;
  font-weight:700;
  margin:var(--gap-l) 0;
}
@media screen and (max-width: 1280px) {
  .lead-txt{                       
    font-size:clamp(22px, 1.239rem + 0.68vw, 28px);
  }
}

.c-txt{
  font-size:var(--font-m);
  line-height:1.8;
}
.sub-ttl{
  font-size:clamp(16px, 0.818rem + 0.91vw, 24px);
  line-height:1.2;
  font-weight:700;
  margin-bottom:var(--gap-s);
}

.contents-inner-wrap{
  display:flex;
  width:calc(1400px + calc((100% - 1400px) / 2));
  align-items: center;
  justify-content: space-between;
  text-align:left;
}
.contents-inner-wrap.--right{
  margin-left:calc((100% - 1400px) / 2);
}
.contents-inner-wrap.--left{
  margin-right:calc((100% - 1400px) / 2);
}
@media screen and (max-width: 1399px) {
  .contents-inner-wrap.--right{
    margin-left:5vw;
    width:95vw;
  }
  .contents-inner-wrap.--left{
    margin-right:5vw;
    width:95vw;
  }
}
@media screen and (max-width: 767px) {
  .contents-inner-wrap{
    flex-direction: column;
  }
  .contents-inner-wrap.--right,
  .contents-inner-wrap.--left{
    margin:auto;
    width:90vw;
  }
}


/*-----------------------------------
h1
-----------------------------------*/
.page-ttl{
  width:100%;
  background:#fff;
  padding:10px 0;
}
.page-ttl h1{
  width: calc(100% - 30px);
  max-width:1140px;
  text-align:left;
  font-weight:700;
  font-size:clamp(12px, 0.659rem + 0.45vw, 16px);
  letter-spacing:0.05em;
  margin:auto;
}
/*-----------------------------------
KV
sec-kv
-----------------------------------*/
.sec-kv{
  position:relative;
  width:100%;
  background: #000 url(../images/kv-bkg-pc.webp?0424) no-repeat top center / cover;
  overflow: hidden;
  color:#fff;
}
.kv-area-wrap{
  display:flex;
  justify-content: space-between;
}
.kv-area-text{
  position:relative;
  width:40.85%;
  margin-top:clamp(30px, 1.648rem + 1.14vw, 40px); 
}
.kv-logo{
  width:53.67%;
  margin-bottom:clamp(10px, -0.852rem + 7.39vw, 75px); 
}
.kv-catch{
  width:100%;
}
.kv-lead{
  width:100%;
  margin-top:clamp(30px, 1.42rem + 2.27vw, 50px);
}
.kv-area-img{
  width:57%;
  margin-top:var(--gap-l);
}


@media screen and (max-width: 767px)  {
  .sec-kv{
    background: #000 url(../images/kv-bkg-sp.webp?0424) no-repeat top center / cover;
  }
  .sec-kv .contents-inner{
    width:100%;
  }
  .kv-area-wrap{
    flex-direction: column;
  }
  .kv-area-text{
    width:90vw;
    margin:20px auto 0;
  }
  .kv-logo{
    width:49.55%;
  }
  .kv-catch{
    width:85.37%;
    margin-left:14.63%;
  }
  .kv-area-img{
    width:82.9%;
    margin-top:10px;
  }
}

/*-----------------------------------
Lead
sec-lead
-----------------------------------*/
.sec-lead{
  position:relative;
  width:100%;
  background: #000 url(../images/lead-bkg-pc.webp) no-repeat top center / cover;
  background-attachment: fixed;
  overflow: hidden;
  color:#fff;
}

.lead-area-wrap{
  display:flex;
  justify-content: space-between;
}

.lead-area-img{
  display:flex;
  align-items: flex-end;
  width:42.85%;
}
.lead-area-text{
  width:49.28%;
  padding-top:var(--gap-ll);
}
.lead-area-text .lead-ttl{
  width:58.95%;
  margin-bottom:clamp(40px, 2.273rem + 1.14vw, 50px);
}
.lead-area-text .c-txt{
  font-weight:700;
  padding-bottom:var(--gap-l);
}

@media screen and (max-width: 767px) {
  .sec-lead{
    background: #000 url(../images/lead-bkg-sp.webp) no-repeat top center / cover;
    background-attachment: fixed;
  }
  .lead-area-wrap{
    flex-direction: column;
  }
  .lead-area-text .lead-ttl{
    width:80.57%;
  }
  .lead-area-text .c-txt{
    padding-bottom:0;
  }
  .lead-area-text{
    width:100%;
    order: 1;
  }
  .lead-area-img{
    width:100%;
    margin-top:-1em;
    order: 2;
  }
}

/*-----------------------------------
forGAMING
forCREATION
sec-for
-----------------------------------*/
.sec-for{
  position:relative;
  width:100%;
  padding:var(--gap-ll) 0 var(--gap-l) 0;
}

/*--------------*/
.for-area-text{
  position:relative;
  width:48.2%;
  max-width:800px;
}
.sec-for .hd-ttl-eng{
  font-size:clamp(52px, 1.705rem + 7.73vw, 120px);
}
@media screen and (max-width: 1280px) {
  .sec-for .hd-ttl-eng{
    font-size:clamp(52px, 2.614rem + 3.18vw, 80px);
  }
}

.for-ttl-eng small{
  font-size:0.5em;
}

.for-area-img{
  position:relative;
  width:45.78%;
  max-width:760px;
  aspect-ratio: 760/990;
}
.for-area-img p span{
  display:block;
  position:relative;
  overflow: hidden;
  border-radius: 8px;
}

@media screen and (max-width: 767px) {
  .for-area-text{
    width:100%;
  }
  .sec-for.--gaming .for-area-img{
    margin-right:-5vw;
    width:95vw;
  }
  .sec-for.--creation .for-area-img{
    margin-left:-5vw;
    width:95vw;
  }
}

/*--------------*/
.sec-for.--gaming .for-area-img{
  order:2;
}
.sec-for.--gaming .for-area-text{
  order:1;
}
.sec-for.--gaming .for-area-img .image1 span{
  width:82.89%;
  aspect-ratio: 630/400;
  margin-left:17.11%;
  z-index:1;
  border-top-right-radius:0;
  border-bottom-right-radius:0;
}
.sec-for.--gaming .for-area-img .image2 span{
  position:relative;
  width:56.58%;
  aspect-ratio: 430/280;
  margin-top:clamp(10px, 0.284rem + 1.7vw, 25px);
  z-index:2;
}
.sec-for.--gaming .for-area-img .image3 span{
  width:30.92%;
  aspect-ratio: 235/156;
  margin-left:57.63%;
  z-index:4;
}
.sec-for.--gaming .for-area-img .image4 span{
  width:42.1%;
  aspect-ratio: 320/180;
  margin-top:-6.6%;
  margin-left:20.78%;
  z-index:3;
}

@media screen and (max-width: 767px) {
  .sec-for.--gaming .for-area-img{
    order:1;
    margin-bottom:60px;
  }
  .sec-for.--gaming .for-area-text{
    order:2;
  }
}

/*--------------*/
.sec-for.--creation .for-area-img{
  order:1;
}
.sec-for.--creation .for-area-text{
  order:2;
}
.sec-for.--creation .for-area-img .image1 span{
  width:78.15%;
  aspect-ratio: 594/380;
  z-index:1;
  border-top-left-radius:0;
  border-bottom-left-radius:0;
}
.sec-for.--creation .for-area-img .image2 span{
  width:35.52%;
  aspect-ratio: 270/160;
  margin-top:clamp(20px, 0.795rem + 2.27vw, 40px);
  margin-left:11.84%;
  z-index:3;
}
.sec-for.--creation .for-area-img .image3 span{
  width:65.78%;
  aspect-ratio: 500/300;
  margin-top:calc(clamp(36px, 1.341rem + 4.55vw, 76px) * -1);
  margin-left:34.21%;
  z-index:2;
}
.sec-for.--creation .for-area-img .image4 span{
  width:34.21%;
  aspect-ratio: 260/160;
  margin-top:clamp(10px, 0.398rem + 1.14vw, 20px);
  margin-left:14.86%;
  z-index:4;
}

@media screen and (max-width: 767px) {
  .sec-for.--creation .for-area-img{
    order:1;
    margin-bottom:60px;
  }
  .sec-for.--creation .for-area-text{
    order:2;
  }
}

/*--------------*/
.for-list{                       
  margin-top:var(--gap-m);
  display:grid;
  grid-template-columns: repeat(4,1fr);
  gap:20px;
  margin-bottom:var(--gap-m);
}
@media screen and (max-width: 767px) {
  .for-list{        
    grid-template-columns: repeat(2,1fr);
  }
}

.more-btn{
  width:100%;
  max-width:400px;
}

.more-btn .c-button{
  background:var(--color-dblue);
  color:#fff;
  border-radius: 100vw;
  border-color:var(--color-dblue);
  height:clamp(60px, 3.295rem + 2.27vw, 80px);
  font-size:clamp(16px, 0.909rem + 0.45vw, 20px);
  font-weight:700;
}
.more-btn .c-button::after {
  border-color: #fff;
}
.more-btn .c-button::before {
  background:#00A2E6;
  opacity: .4;
}

/*-----------------------------------
forGAMING
forCREATION
sec-for-campaign
-----------------------------------*/
.sec-for-campaign{
  background:var(--color-gray);
  padding:var(--gap-l) 0;
}
.sec-for-campaign{
  background:var(--color-gray);
  padding:var(--gap-l) 0;
}
.for-campaign-list{
  display:grid;
  gap:var(--gap-s);
  grid-template-columns: repeat(6,1fr);
}

.for-campaign-list a:hover {
  -webkit-animation-duration: 1s;
  -webkit-animation-name: flash;
  animation-name: hover-flash;
  animation-duration: 1s;
  opacity: 1;
}

@media screen and (max-width: 820px) {
  .for-campaign-list{
    grid-template-columns: repeat(3,1fr);
  }
}
@media screen and (max-width: 480px) {
  .for-campaign-list{
    grid-template-columns: repeat(2,1fr);
  }
}

/*-----------------------------------
LINEUP
sec-lineup
-----------------------------------*/
.sec-lineup{
  position:relative;
  width:100%;
  padding:var(--gap-ll) 0;
}
.lineup-list{
  margin-top:var(--gap-m);
  display: grid;
  gap:var(--gap-m);
  grid-template-columns: repeat(2,1fr);
}
.hd-sub-ttl-eng{
  position:relative;
  font-family: "futura-pt", sans-serif;
  font-weight: 600;
  font-style: italic;
  font-size:clamp(36px, 1.932rem + 1.59vw, 50px);
  z-index:+1;
}
.hd-sub-ttl-eng span{
  background:#fff;
  padding-right:0.5em;
  width:fit-content;
  z-index:1;
}
.hd-sub-ttl-eng::before{
  position:absolute;
  content:'';
  top:0.5em;
  left:0;
  width:100%;
  height:1px;
  z-index:-1;
  background:var(--color-base);
}
.hd-sub-ttl{
  font-size:clamp(14px, 0.83rem + 0.23vw, 16px);
  font-weight:700;
  margin-bottom:var(--gap-s);
}
.lineup-sub-list{
  display: grid;
  gap:var(--gap-m);
  grid-template-columns: repeat(2,1fr);
  text-align:center;
}

.lineup-sub-list a{
  display:block;
}

.lineup-sub-list img{
  overflow:hidden;
  border-radius: 8px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.lineup-sub-list p{
  margin-top:var(--gap-ms);
  font-size:var(--font-m);
  font-weight:500;
}
.lineup-sub-list a:hover img{
  transform: scale(1.08); 
  box-shadow: 0 8px 20px rgba(0, 200, 255, 0.2);
}
.lineup-sub-list a:hover p{
  opacity: 0.7;
}

@media screen and (max-width: 767px) {
  .lineup-list{
    grid-template-columns: repeat(1,1fr);
  }
}



/*-----------------------------------
QUALITY
sec-quality
-----------------------------------*/
.sec-quality{
  position:relative;
  width:100%;
  padding:var(--gap-ll) 0;
}

.quality-img{
  order:2;
  width:39.7%;
}
.quality-txt{
  order:1;
  width:55%;
}
.quality-txt .c-txt{
  width:80%;
}

@media screen and (max-width: 767px) {
  .quality-img{
    order:1;
    margin-right:-5vw;
    width:95vw;
  }
  .quality-txt{
    order:2;
    width:100%;
  }
  .quality-txt .c-txt{
    width:100%;
  }
}

/*----------------------
Quality Swiper
------------------------*/
.quality-swiper-wrapper {
  overflow: hidden;
  margin-top:var(--gap-ll);
}
.quality-swiper {
  width: 100%;
  margin: 0 auto var(--gap-l);
  position: relative;
  overflow: visible;
}
.quality-swiper img{
  border-radius:8px;
  overflow: hidden;
}
.quality-swiper .swiper-slide {
  width: auto;
  height: auto;
  transition: transform 0.6s cubic-bezier(0.25, 0.8, 0.25, 1);
  will-change: transform;
  backface-visibility: hidden;
  overflow: hidden;
  display: flex;
  gap: var(--gap-ms);
  flex-direction: column;
  justify-content: flex-end;
}


@media screen and (max-width: 767px) {
  .quality-swiper .swiper-slide {
    transform: scale(0.9);
  }
  .quality-swiper .swiper-slide-active {
    transform: scale(1);
    z-index: 2;
    transition: all 0.4s ease;
  }
}

/* ボタン・インジケーター */
.quality-swiper .swiper-slide-prev,
.quality-swiper .swiper-slide-next {
  z-index: 1;
}
.quality-swiper-indicator-outer{
  position: relative;
  margin:60px auto 0 auto;
  width:80%;
  max-width:400px;
}
.quality-swiper-button {
  position: absolute;
  z-index: 1;
  top: 50%;
  cursor: pointer;
  width: clamp(20px, 1.023rem + 1.14vw, 30px);
  height: clamp(20px, 1.023rem + 1.14vw, 30px);
  border-top: 2px solid var(--color-indicator);
  border-left: 2px solid var(--color-indicator);
}
.quality-swiper-next {
  right: 0;
  transform: translateY(-50%) rotate(135deg);
}
.quality-swiper-prev {
  left: 0;
  transform: translateY(-50%) rotate(-45deg);
} 
.quality-swiper-button.swiper-button-disabled {
  border-top: 2px solid var(--color-indicator);
  border-left: 2px solid var(--color-indicator);
  cursor: default;
}
.quality-swiper-button:hover{
  opacity: 0.7;
  cursor: pointer;
}
.quality-swiper-pagination {
  display: flex;
  justify-content: center;
  gap: var(--gap-ms);
}

.quality-swiper-pagination .swiper-pagination-bullet {
  width: clamp(13px, 0.744rem + 0.34vw, 16px);
  height: clamp(13px, 0.744rem + 0.34vw, 16px);
  background: var(--color-indicator);
  border-radius: 50%;
  opacity: 1;
  transition: all 0.4s ease;
}

.quality-swiper-pagination .swiper-pagination-bullet-active {
  background: var(--color-base);
}

.quality-swiper-pagination .swiper-pagination-bullet:hover {
  opacity: 0.7;
  transform: translateY(5px);
}

/*----------slider中身--*/
.quality-slider-cont{
  width:100%;
  display:flex;
  gap:var(--gap-s);
  align-items: center;
  text-align:left;
}
.quality-slider-num{
  height:100%;
  border-right:1px solid var(--color-base);
  display:flex;
  align-items: center;
  justify-content: center;
  font-family: "futura-pt", sans-serif;
  font-weight: 600;
  font-style: italic;
  font-size:clamp(18px, 0.398rem + 3.64vw, 50px);
  padding:0 var(--gap-s);
}
.quality-slider-ttl{
  line-height:1.4;
  font-weight: 600;
  margin-bottom:10px;
}
.quality-slider-tag{
  display:flex;
  gap:5px;
}
.quality-slider-tag li{
  padding:0.5em 1em;
  background:var(--color-gray);
  font-size:clamp(8px, 0.409rem + 0.45vw, 12px);
  border-radius:2px;
  white-space:nowrap;
}

@media screen and (min-width: 1025px) and (max-width: 1280px) {
  .quality-slider-num{
    font-size:30px;
    padding:0 10px 0 0;
  }
  .quality-slider-ttl{
    line-height:1.4;
    font-size:16px;
    height:4.2em;
  }
}

@media screen and (min-width: 768px) and (max-width: 1024px) {
  .quality-slider-num{
    font-size:20px;
    padding:0 10px 0 0;
  }
  .quality-slider-ttl{
    line-height:1.4;
    font-size:12px;
    height:4.2em;
  }
}

@media screen and (max-width: 767px) {
  .quality-slider-cont{
    gap:6px;
  }
  .quality-slider-num{
    align-items: start;
    padding:0 6px 0 0;
  }
  .quality-slider-tag li{
    padding:0.5em;
  }
  .quality-slider-ttl{
    font-size:12px;
  }
  .swiper-slide-active .quality-slider-ttl{
    font-size:15px;
  }

}

/*-----------------------------------
Partnership
sec-partner
-----------------------------------*/
.sec-partner{
  background:var(--color-lgray);
  padding:var(--gap-l) 0;
}

.partner-list{
  width:100%;
  display:grid;
  gap:30px;
  grid-template-columns: repeat(2, 1fr);
}

.partner-list li{
  background:#fff;
  padding:var(--gap-ms);
  display:flex;
  gap:var(--gap-s);
  align-items: center;
  border-radius: 8px;
}
.partner-img{
  width:25%;
}
.partner-txt{
  width:calc(75% - var(--gap-s));
  font-size:clamp(0.75rem, 0.659rem + 0.45vw, 1rem);
  font-weight:600;
  line-height:1.4;
}

@media screen and (max-width: 767px) {
  .partner-list{
    gap:10px;
    grid-template-columns: repeat(1, 1fr);
  }
  .partner-list li{
    padding:15px;
  }
}

/*-----------------------------------
Campaign
sec-campaign
-----------------------------------*/
.sec-campaign{
  background:var(--color-gray);
  padding:var(--gap-l) 0;
}

@media screen and (max-width: 1300px) {
  .p-rot-banner-wrapper--campaign-pc .js-itemsliderhasnav-swiper-button-next {
    display:none;
  }
  .p-rot-banner-wrapper--campaign-pc .js-itemsliderhasnav-swiper-button-prev {
    display:none;
  }
}
/*---------------------------
文字アニメーション
---------------------------*/
.fade-in-txt span {
  display: inline-block;
  opacity: 0;
  filter: blur(8px);
  transform: translateY(20px);
  animation: blurUp 0.2s ease forwards;
}
@keyframes blurUp {
  to {
    opacity: 1;
    filter: blur(0);
    transform: translateY(0);
  }
}

/*---------------------------
動きアニメーション
---------------------------*/
.fade-in {  
  opacity: 0;
  transform: translateY(60px) scale(0.98);
  transition: 
    opacity 1.4s cubic-bezier(0.22, 1, 0.36, 1),
    transform 1.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.fade-in.is-active {
  opacity: 1;
  transform: translate(0) scale(1);
}

.fade-display{
 animation-name: anime-display;
 animation-duration:3s;
}
@keyframes anime-display
{
 0%{
  opacity: 0;
 }

 100%{
  opacity: 1;
 }
}

.fade-delay1 {
  transition-delay: 100ms;
}
.fade-delay2 {
  transition-delay: 200ms;
}
.fade-delay3 {
  transition-delay: 300ms;
}
.fade-delay4 {
  transition-delay: 400ms;
}
.fade-delay5 {
  transition-delay: 500ms;
}
.fade-delay6 {
  transition-delay: 600ms;
}
.fade-delay7 {
  transition-delay: 700ms;
}
.fade-delay8 {
  transition-delay: 800ms;
}
.fade-delay9 {
  transition-delay: 900ms;
}

.fade-in-zoom {
  transform: scale(0.5);
}

.fade-in-up {
  transform: translate(0, 50px);
}

.fade-in-down {
  transform: translate(0, -110px);
}

.fade-in-left {
  transform: translate(-50px, 0);
}

.fade-in-right {
  transform: translate(50px, 0);
}

/* パララックス用 */
.para {
  display: inline-block;
  will-change: transform;
}