@charset "utf-8";
/*------------------------------------------------------------------------------
 ROOT（CSS変数を設定）
 -------------------------------------------------------------------------------*/
 :root {
    --txt_color: #000;
    --txt_color_2: #02b6cc;
    --bg: #e3e2e1;
    --font-base: "Noto Sans JP", sans-serif;
    --font-en: rigid-square, sans-serif;
    --font-sub: fot-udkakugoc60-pro, sans-serif;
    --fz-xs: 1.2rem;
    --fz-sm: 1.6rem;
    --fz-md: 1.8rem;
    --fz-lg: 2.4rem;
    --fz-xl: 3.5rem;
 }

/*------------------------------------------------------------------------------
 共通
 -------------------------------------------------------------------------------*/
 /* *{
  outline: 1px solid red;
} */

 html{
    font-size: 62.5%;/* 1rem = 10px */
 }
 body{
    overflow-wrap: anywhere;
    margin: 0;
    font-family: var(--font-base);
    color: var(--txt_color);
    font-size: var(--fz-sm);
    letter-spacing: 0.02rem;
    font-weight: 500;
    line-height: 1.6;
    background-color: var(--bg);
    img{
        object-fit: contain;
        width: 100%;
        height: 100%;
        display: block;
    }
    &::before{
      position: fixed;
      display: block;
      width: 100vw;
      height: 100vh;
      background-position: center top;
      content: '';
      z-index: -999;
      background-color: #e3e2e2;
      background-image:
      url(../img/bg-pattern.webp),

      linear-gradient(#f9f9f9 1px, transparent 1px),
      linear-gradient(90deg, #f9f9f9 1px, transparent 1px);

      background-size:
      160px 150px,

      110px 100px,
      110px 100px;

      background-repeat:
      repeat,

      repeat,
      repeat;
    }
}
html , body{
   overflow-x: clip;
}
/* 全要素に box-sizing を適用 */
 *,
 *::before,
 *::after {
 box-sizing: border-box;
 }

 /* SPのみ表示要素 */
 .sp{
    display: none;
 }
 /* PCのみ表示要素 */
 .pc{
   display: block;
 }
 /* 非表示要素 */
 .hide{
   opacity: 0;
 }
 @media all and (max-width:768px) {
   /* SPのみ表示要素 */
   .sp{
      display: block;
   }
   /* PCのみ表示要素 */
   .pc{
      display: none;
   }
 }

/*------------------------------------------------------------------------------
 loading
 -------------------------------------------------------------------------------*/
/* --- ローディング画面全体 --- */
.loader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 9999;
  pointer-events: none;
  overflow: hidden; 
}

/* --- 巨大な背景（色と動きの設定） --- */
.loader-bg {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 200vmax;
  height: 200vmax;
  background-color: #ffffff; 
  z-index: 1;
  transform: translate(-50%, -50%) rotate(-45deg) translateY(0);
  will-change: transform, background-color;
  transition: background-color 0.4s ease, transform 2.2s cubic-bezier(0.25, 1, 0.5, 1);
	
  background-color: #ffffff;
  background-image: radial-gradient(#f4f4f4 1.6px, transparent 1.6px), radial-gradient(#f4f4f4 1.6px, transparent 1.6px);
  background-size: 6px 6px;
  background-position: 0 0, 6px 6px;
  background-blend-mode: multiply; 
}

/* ★2段階目の背景色（鮮やかなグリーン） */
.loader.bg-green .loader-bg {
  background-color: #03c5dd; 
  background-image: none;
}

/* --- コンテンツエリア --- */
.loader-content {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10000;
  transition: opacity 0.4s ease;
}

/* --- 各フェーズ --- */
.phase {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  text-align: center;
  color: var(--txt_color); 
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s ease, visibility 0.5s ease;
}

#phase2 {
  transition: visibility 0s;
}

.phase.active {
  opacity: 1;
  visibility: visible;
}

/* --- テキスト・バーの装飾 --- */
.loading-text {
  font-size: 1.8rem;
  letter-spacing: 0.2rem;
  margin-bottom: 15px;
  font-family: var(--font-en);
  font-optical-sizing: auto;
  font-weight: 600;
  font-style: normal;
}

.logo {
  font-size: 2.8rem;
  letter-spacing: 0.3rem;
  font-weight: bold;
  font-family: var(--font-en);
  font-optical-sizing: auto;
  font-weight: 600;
  font-style: normal;
}

/* ★修正: .logoの記述を削除し、.loading-textだけ残す */
.loading-text span {
  opacity: 0; 
  display: inline-block;
}

.phase.active .loading-text span {
  animation: textParapara 0.1s forwards;
}

@keyframes textParapara {
  0% { opacity: 0; transform: translateY(2px); } 
  100% { opacity: 1; transform: translateY(0); } 
}

/* プログレスバー */
.progress-bar-wrap {
  width: 200px;
  height: 2px;
  background-color: rgba(0, 0, 0, 0.15);
  margin: 0 auto;
  overflow: hidden;
}

.progress-bar {
  width: 0%;
  height: 100%;
  background-color: #03c5dd;
  animation: loading 2.2s ease forwards; 
}

@keyframes loading {
  0% { width: 0%; }
  100% { width: 100%; }
}

/* === アニメーション実行用のクラス === */
.loader.loader-finish .loader-content {
  opacity: 0;
}

.loader.loader-finish .loader-bg {
  transform: translate(-50%, -50%) rotate(-45deg) translateY(100%);
}

@media all and (max-width:768px) {
   .loading-text {
      font-size: 1.4rem;
   }
   .progress-bar-wrap {
      width: 160px;
   }
   .logo {
      font-size: 1.8rem;
   }
}

/*------------------------------------------------------------------------------
 header
 -------------------------------------------------------------------------------*/
 /* h1 */
 .visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.header_logo{
   justify-self: start;
}
.header_logo a ,.f-logo{
  display:block;
  width:200px;
  height:42px;
  background:url(../img/logo.webp) no-repeat center / contain;
}

header{
   position: fixed;
   width: 100%;
   z-index: 999;
   height: 80px;
}
.header_inner{
   width: 100%;
   display: grid;
   grid-template-columns: auto 1fr;
   align-items: center;
   padding: 0 min(1.66vw,30px);
   height: 80px;
   background-color: #1c1c1b;
   background-image:
   radial-gradient(
      circle at center,
      #010101 0%,
      rgba(1,1,1,0.9) 20%,
      rgba(1,1,1,0) 80%
   ),
   radial-gradient(#010101 1.8px, transparent 1.8px),
   radial-gradient(#010101 1.8px, transparent 1.8px);
   background-size:
   100% 100%,
   8px 8px,
   8px 8px;
   background-position:
   center,
   0 0,
   4px 4px;
}
.nav-pc{
   justify-self: center;
   ul{
      display: flex;
      gap: min(3.4vw,60px);
      height: 80px;
      align-items: center;
      li{
         width: fit-content;
      }
      a{
         display: flex;
         flex-direction: column;
         align-items: center;
         font-size: 22px;
         font-family: var(--font-en);
         font-weight: 600;
         color: #fff;
         line-height: 1.4;
      }
      span{
         display: block;
         font-size: 12px;
         color: var(--txt_color_2);
         letter-spacing: 0.04rem;
         font-family: var(--font-sub);
         letter-spacing: 0.2rem;
         font-weight: 500;
      }
   }
}

/* navホバーアニメーション */
.nav-pc a ,.nav-footer a{
   display: inline-block;
   position: relative;
   &::after{
      content: attr(data-text);
      position: absolute;
      inset: 0;
      color: var(--txt_color_2);
      clip-path: inset(0 0 100% 0);
      transition:
         clip-path .35s cubic-bezier(.22, 1, .36, 1);
   }
}
.nav-pc a:hover::after , .nav-footer a:hover::after ,.nav-pc a.is-active::after{
	clip-path: inset(0 0 0 0);
}
.is-active{
   color: var(--txt_color_2);
}

.nav-sp , .hamburger_wrapper{
   display: none;
}
.nav-pc-item{
   position: relative;
   padding: 8px 0;
}
.drop-menu-list-wrapper{
   z-index: 1;
   left: 0;
   position: absolute;
   top: 100%;

   transform-origin: top;
	transform:
		scaleY(0)
		translateY(-10px);
	opacity: 0;
	transition:
		transform .35s cubic-bezier(.22, 1, .36, 1),
		opacity .2s ease;
      
   width: max-content;
   border-radius: 5px;
   background: #d4d2d2;
   width: 168px;
   height: 162px;
   /* 外側 = border役 */
   padding: 1px;
   clip-path: polygon(
   0 0,
   100% 0,
   100% calc(100% - 20px),
   calc(100% - 20px) 100%,
   0 100%
   );
}
.nav-pc-item:hover .drop-menu-list-wrapper {
   transform:
		scaleY(1)
		translateY(0);
   opacity: 1;
}
.drop-menu-list{
   display: flex;
   flex-direction: column;
   gap: 0!important;
   background-color: #fff;
   border-radius: 5px;
   width: 100%;
   height: 100%!important;
   clip-path: polygon(
   0 0,
   100% 0,
   100% calc(100% - 20px),
   calc(100% - 20px) 100%,
   0 100%
   );
   li{
      position: relative;
      padding: 16px 0;
      border-bottom: 1px solid #d4d2d2;
      width: 100%!important;
      padding-left: 30px;
      &:last-of-type{
         border-bottom: 0;
      }
      &::after{
         content: "";
         width: 6px;
         height: 12px;
         position: absolute;
         top: 50%;
         left: 14%;
         transform: translateY(-50%);
         background-image:
            radial-gradient(#9a9a9a 0.8px, transparent 0.8px),
            radial-gradient(#9a9a9a 0.8px, transparent 0.8px);

         background-size: 2px 2px;
         background-position: 0 0, 4px 4px;

         clip-path: polygon(0 0, 100% 50%, 0 100%);
      }
      a{
         font-size: 15px;
         color: var(--txt_color);
         width: fit-content;
         display: block;
         margin-left: 8px;
      }
   }
}
@media all and (max-width:1000px) {
   .header_logo a{
      width:160px;
   }
   .nav-pc{
      ul{
         gap: 3vw;
         a{
            font-size: 17px;
         }
         span{
            font-size: 10px;
         }
      }
   }
   .drop-menu-list-wrapper{
      width: 118px;
      height: 126px;
   }
   .drop-menu-list{
      li{
         padding: 12px 0;
         padding-left: 20px;
         a{
            font-size: 12px;
         }
      }
   }
}
@media all and (max-width:768px) {
   header{
      height: min(14vw,80px);
   }
   .header_inner{
      height: min(14vw,80px);
      background-image: none;
      background-color: #161616;
      grid-template-columns: 1fr auto;
      padding: 0 min(4vw, 30px);
   }
   .header_logo {
      justify-self: center;
   }
   .nav-pc{
      display: none;
   }
   .nav-sp{
      display: block;
      pointer-events: none;
      transform-origin: top;
      transform:
         scaleY(0)
         translateY(-10px);
      opacity: 0;
      transition:
         transform .35s cubic-bezier(.22, 1, .36, 1),
         opacity .2s ease;

      justify-self: end;
      width: 100%;
      height: 100vh;
      background-color: #fff;

      background-image:
      radial-gradient(#f4f4f4 1.6px, transparent 1.6px),
      radial-gradient(#f4f4f4 1.6px, transparent 1.6px);

      background-size: 8px 8px;
      background-position: 0 0, 4px 4px;
      ul{
         li{
            padding: min(5vw,26px) 0;
            border-bottom: 1px solid var(--txt_color);
            &:last-of-type{
               border-bottom: 0;
               padding-bottom: 0;
            }
         }
         a{
            display: flex;
            gap: 10px;
            align-items: center;
            font-size: 32px;
            font-family: var(--font-en);
            font-weight: 600;
            color: var(--txt_color);
            line-height: 1;
            margin-left: 10%;
            position: relative;
            letter-spacing: -0.02rem;
            &::after{
               content: "";
               width: 12px;
               height: 18px;
               position: absolute;
               top: 50%;
               left: -6%;
               transform: translateY(-50%);
               background-image:
                  radial-gradient(#9a9a9a 1px, transparent 1px),
                  radial-gradient(#9a9a9a 1px, transparent 1px);

               background-size: 3px 3px;
               background-position: 0 0, 6px 6px;

               clip-path: polygon(0 0, 100% 50%, 0 100%);
            }
         }
         span{
            display: block;
            font-size: 14px;
            color: var(--txt_color_2);
            margin-bottom: -1.2rem;
            font-family: var(--font-sub);
            font-weight: 600;
            letter-spacing: 0.18rem;
         }
         .menu-list{
            width: 100%;
            display: flex;
            gap: 30px;
            padding-left: 9%;
            li{
               border-bottom: 0;
               padding: min(3vw,16px) 0 0;
            }
            a{
               font-size: 18px;
               white-space: nowrap;
               &::after{
                  display: none;
               }
            }
         }
      }
   }
   .nav-sp.is-active{
      transform:
         scaleY(1)
         translateY(0);
      opacity: 1;
      pointer-events: auto;
   }
   /* スクロール禁止 */
   body.is-fixed{
      position: fixed;
      width: 100%;
      height: 100%;
      overflow: hidden;
   }
   /* hamburger-menu */
   .hamburger_wrapper{
      display: block;
      border-left: 1px solid #505052;
      height: min(14vw,80px);
      display: flex;
      align-items: center;
      padding-left: min(4vw, 30px);
   }
   .hamburger{
      width: min(10vw,50px);
   }
   .hamburger .line{
      width: min(8vw,50px);
      height: 2px;
      background-color: #fff;
      display: block;
      margin: 8px auto;
      -webkit-transition: all 0.2s ease-in-out;
      -o-transition: all 0.2s ease-in-out;
      transition: all 0.2s ease-in-out;
      }

      .hamburger:hover{
      cursor: pointer;
   }
   #hamburger-12.is-active .line:nth-child(1){
      opacity: 0;
      -webkit-transform: translateX(-60%);
      -ms-transform: translateX(-60%);
      -o-transform: translateX(-60%);
      transform: translateX(-60%);
      }

      #hamburger-12.is-active .line:nth-child(3){
      opacity: 0;
      -webkit-transform: translateX(60%);
      -ms-transform: translateX(60%);
      -o-transform: translateX(60%);
      transform: translateX(60%);
   }
   .share-area{
      background: url(../img/bg_share.webp) no-repeat top center/cover;
      width: 100%;
      height: 140px;
      display: flex;
      align-items: center;
      margin: min(10vw,50px) auto 0;
      justify-content: center;
      gap: 8px;
      p{
         font-family: var(--font-en);
         color: var(--txt_color);
         font-weight: 600;
         font-size: 22px;
         margin-right: 20px;
         letter-spacing: -0.02rem;
      }
      a{
         display: block;
         width: 40px;
         height: 8vw;
         &:first-of-type{
            width: 30px;
         }
      }
   }
}
/*------------------------------------------------------------------------------
 main
 -------------------------------------------------------------------------------*/
 main{
   width: 100%;
   position: relative;
   padding-top: 80px;
   /* background-color: #e3e2e2;
   background-image:
   url(../img/bg-pattern.webp),

   linear-gradient(#f9f9f9 1px, transparent 1px),
   linear-gradient(90deg, #f9f9f9 1px, transparent 1px);

   background-size:
   160px 150px,

   110px 100px,
   110px 100px;

   background-repeat:
   repeat,

   repeat,
   repeat; */

   &::before{
   content:"";
   position:fixed;
   inset:0;
   display: block;
   z-index: -1;

   background-image:
      url(../img/bg-object01.webp),
      url(../img/bg-object02.webp);

   background-repeat:
      no-repeat,
      no-repeat;

   background-size:
      263px 93px,
      118px 447px;

   background-position:
      left 3vw top 80px,
      right 3vw top -10px;
   }
   &::after{
   content:"";
   position: absolute;
   background: url(../img/bg-object03.webp) no-repeat center center / contain;
   width:90%;
   max-width:1120px;
   height: 34px;
   bottom: 10.27vw;
   left: 50%;
   transform: translateX(-50%);
   z-index: -1;
   }
 }
 .container{
   max-width: 1200px;
   box-sizing: content-box;
   margin: 0 auto;
   padding: 120px min(1.66vw,30px) 0;
   position: relative;
   overflow: visible;
 }
 h2{
   font-family: var(--font-en);
   font-size: 70px;
   line-height: 1.3;
   letter-spacing: -0.2rem;
   .official-store , .heading_sub{
      display: block;
   }
   .official-store{
      position: relative;
      padding-left: 14px;
      font-size: 18px;
      letter-spacing: -0.06rem;
      &::after{
         content: "";
         background: url(../img/arrow-bottom-right.webp) no-repeat center center/9px;
         width: 9px;
         height: 9px;
         position: absolute;
         top: 50%;
         left: 0;
         transform: translateY(-50%);
      }
   }
   .heading_sub{
      font-family: var(--font-sub);
      letter-spacing: 0.2rem;
      font-size: 20px;
      margin-left: 0.4rem;
   }
 }
h2{
   opacity: 0;
}
.font-loaded h2{
   opacity: 1;
}

/* フェードアニメーションここから */
.js_fade , .js_fade--txt {
  opacity: 0;
  transition: opacity 0.8s ease, transform 0.8s ease;

  transition-delay: 0.8s; 
}
.js_fade--txt{
   transition-delay: 1.2s; 
}
.js_fade.endFade , .js_fade--txt.endFade {
  opacity: 1;
}
/* フェードアニメーションここまで */

/* 背景色アニメーションここから */
 .bgextend{
	animation-name:bgextendAnimeBase;
	animation-duration:0.8s;
	animation-fill-mode:forwards;
	position: relative;
	overflow: hidden;/*　はみ出た色要素を隠す　*/
	opacity:0;
}
@keyframes bgextendAnimeBase{
  from {
    opacity:0;
  }

  to {
    opacity:1;  
}
}
/*中の要素*/
.bgappear{
	animation-name:bgextendAnimeSecond;
	animation-duration:1s;
	animation-delay: 0.6s;
	animation-fill-mode:forwards;
	opacity: 0;
}
@keyframes bgextendAnimeSecond{
	0% {
	opacity: 0;
	}
	100% {
	opacity: 1;
}
}
/*左から右*/
.bgLRextend{
   width: fit-content;
}
.bgLRextend::before{
	animation-name:bgLRextendAnime;
	animation-duration:1s;
	animation-fill-mode:forwards;
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #666;/*伸びる背景色の設定*/
}
@keyframes bgLRextendAnime{
	0% {
		transform-origin:left;
		transform:scaleX(0);
	}
	50% {
		transform-origin:left;
		transform:scaleX(1);
	}
	50.001% {
		transform-origin:right;
	}
	100% {
		transform-origin:right;
		transform:scaleX(0);
	}
}
/* スクロールをしたら出現する要素にはじめに透過0を指定　*/
.bgappearTrigger,
.bgLRextendTrigger{
    opacity: 0;
}
/* 背景色アニメーションここまで*/

 @media all and (max-width:768px) {
   main{
      padding-top: min(14vw, 80px);
      &::before{
      background-size:
         35.06vw 13.06vw,
         15.6vw 59.46vw;

      background-position:
         left -2vw top min(14vw,80px),
         right -2vw top min(4vw,80px);
      }
      &::after{
      background: url(../img/bg-object03-sp.webp) no-repeat center center / contain;
      width:80%;
      max-width:600px;
      height: 7vw;
      bottom: 20vw;
      }
   }
   .container{
         padding: 18.93vw 3.5vw 0;
      }
   h2{
      .official-store{
      font-size: 16px;
      }
      .heading_sub{
         font-size: 18px;
         margin-top: -6px;
      }
   }
 }

/* storage-page */
 .strage {
   .container{
      padding-bottom: min(18.33vw,332px);
   }
   &::after{
      bottom: min(9vw,170px);
   }
 }
 .strage-list , .new-release--container , .news-item{
   background-color: #fff;

   background-image:
   radial-gradient(#f4f4f4 1.6px, transparent 1.6px),
   radial-gradient(#f4f4f4 1.6px, transparent 1.6px);

   background-size: 8px 8px;
   background-position: 0 0, 4px 4px;

 }
 .strage-list{
   width: 100%;
   display: flex;
   list-style: none;
   border-top: 1px solid #ababab;
   border-bottom: 1px solid #ababab;
   
   position: relative;
   z-index: 1;
   padding: 28px 24px;
   font-size: 16px;
   margin: 100px 0 50px;
   li{
      &:last-of-type a::after{
         display: none;
      }
   }
   a{
      color: var(--txt_color);
      font-weight: 600;
      text-decoration: none;
      margin-left: 4px;
      font-family: var(--font-sub);
      font-size: 20px;
      letter-spacing: 0.2rem;
      &::after{
         content: "/";
         margin-left: 4px;
         font-weight: 400;
      }
      &.selected {
         color: var(--txt_color_2);
      }
      &.selected::after {
      color: var(--txt_color);
      }
   }
 }
 .category_ttl , .pickup_ttl{
   font-size: 46px;
   font-family: var(--font-en);
   line-height: 1.3;
   span{
      font-size: 16px;
      display: block;
      font-family: var(--font-sub);
      letter-spacing: 0.16rem;
      margin-left: 0.16rem;
   }
 }
 .new-release--container , .news-item{
   border: 1px solid #ababab;
   padding: 56px 60px;
   margin: 36px 0 100px;
   .new-release , .news-item__head{
      display: flex;
      font-size: 16px;
      font-weight: 600;
      align-items: end;
      line-height: 1;
      gap: 20px;
      padding-bottom: 20px;
      position: relative;
      margin-bottom: 40px;
      img{
         width: 235px;
      }
      &::after{
         content: "";
         background: url(../img/new-release-line.webp) no-repeat center right / 100%;
         width: 100%;
         height: 5px;
         position: absolute;
         bottom: 0;
         left: 0;
      }
   }
   .new-release--subttle{
      font-family: var(--font-sub);
      font-weight: 500;
      font-size: 18px;
      letter-spacing: 0.16rem;
   }
   .new-release--box{
      display: flex;
      gap: 40px;
      .item-img{
         padding: 12px 5px 10px;
         width: 260px;
         height: 380px;
         &::before{
            height: 7px;
            top: 5px;
         }
         &::after{
            bottom: 5px;
         }
      }
      .item-img.adjust-height{
         height: 360px;
      }
      .new-release--txt{
         width: calc(100% - 300px);
         h4{
            font-size: 24px;
            letter-spacing: 0;
            margin: -5px 0 4px;
         }
         .release-date{
            font-size: 14px;
            color: #928e8e;
            display: block;
            margin-bottom: 10px;
         }
         .book_summary{
            line-height: 1.8;
            margin-bottom: 40px;
         }
      }
      .new-release--btn-list{
         list-style: none;
         display: flex;
         gap: 2%;
         .-sample , .-buy{
            max-width: 300px;
         }
         .-bonus{
            max-width: 130px;
            margin-left: 1%;
         }
      }
   }
 }
 .item-img{
   position: relative;
   border: 1px solid #ababab;
   img{
      padding-top: 5px;
      display: block;
   }
   &::before{
      content: "";
      background: url(../img/book_deco.webp) no-repeat center center / 100%;
      width: calc(100% - 10px);
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
   }
   &::after{
      content: "";
      border-bottom: 1px solid #ababab;
      width: calc(100% - 10px);
      height: 1px;
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
   }
 }
 .category_sub_ttl{
   font-size: 20px;
   color: #fff;
   width: 100%;
   position: relative;
   span{
      display: block;
      width: fit-content;
      padding: 4px 26px 4px 10px;
      background-color: var(--txt_color);
      clip-path: polygon(0 0, 100% 0, 100% calc(100% - 50px), calc(100% - 20px) 100%, 0 100%);
      font-family: var(--font-sub);
      font-weight: 500;
      font-size: 22px;
      letter-spacing: 0.22rem;
   }
   &::after{
      content: "";
      border-top: 1px solid var(--txt_color);
      width: 100%;
      height: 1px;
      position: absolute;
      top: 0;
      left: 0;
   }
 }
.category_sub_ttl.chara-name--wrapper span{
   letter-spacing: 0.1rem;
   padding: 8px 36px 8px 20px;
}
 @media all and (max-width:768px) {
   .category_sub_ttl.chara-name--wrapper span{
      padding: 4px 26px 4px 10px;
      letter-spacing: 0.1rem;
   }
 }
 .item_list{
   display: flex;
   gap: min(4vw,60px) 3%;
   flex-wrap: wrap;
   list-style: none;
   padding-bottom: 100px;
   margin-top: 40px;
   &:last-of-type{
      padding-bottom: 0;
   }
   .item{
      width: 17.6%;
      .card{
         display: grid;
         height: 100%;
         grid-template-rows:
         auto
         auto
         1fr
         auto
         auto;
      }
      .item-img{
         padding: 4% 2.2%;
         &::before{
            height: 6px;
            top: 1.2%;
         }
         &::after{
            bottom: 1.2%;
         }
      }
      .store_bonus , .store_bonus2{
         width: 110px;
         height: auto;
         margin-bottom: 2%;
      }
      .store_bonus2{
         width: 150px;
      }
      h4.card_title{
         line-height: 1.4;
         margin-bottom: 3%;
      }
      .release-date{
         font-size: 12px;
         color: #928e8e;
         display: block;
         margin-bottom: 12%;
      }
      .action{
         list-style: none;
         display: grid;
         grid-template-rows: repeat(2, min(4vw,50px));
         gap: min(0.6vw,8px);
         li{
            width: 100%;
         }
         a{
            display: block;
            height: min(4vw,50px);
         }
         .btn01{
            grid-row: 1;
         }
         .btn02{
            grid-row: 2;
         }
      }
   }
   .item.is-no-bonus .card{
      grid-template-rows: auto 1fr auto auto;
   }
   .item.-goods .action{
      grid-template-rows: repeat(1, min(4vw,50px));
   }
 }          
  .-book .item_list .item .card{
   grid-template-rows: min(25.66vw, 318px) auto 1fr auto auto;
  }
  .item_list.--guid-kit .item.is-no-bonus .card , .-book .item_list .item.is-no-bonus .card{
      grid-template-rows: min(25.66vw, 318px) 1fr auto auto;
   }

 @media all and (max-width:999px) {
    .new-release--container{
      .new-release--box{
         .new-release--btn-list{
            flex-direction: column;
            width: 300px;
            align-items: center;
            gap: 0.4vw;
            .-bonus{
               margin-left: 0;
               margin-top: 1%;
            }
         } 
      }
   }
   .item_list{
      .item{
          width: 22.75%;
         .action{
            grid-template-rows: repeat(2, min(5.20vw, 52px));
            a{
               height: min(5.20vw, 52px);
            }
         }
      }
      .item.-goods .action {
         grid-template-rows: repeat(1, min(5.20vw, 52px));
      }
   }
   .-book .item_list .item .card{
      grid-template-rows: min(34.03vw, 330px) auto 1fr auto auto;
   }
   .item_list.--guid-kit .item.is-no-bonus .card , .-book .item_list .item.is-no-bonus .card{
      grid-template-rows: min(34.03vw, 330px) 1fr auto auto;
   }
 }

 @media all and (max-width:768px) {
   .strage{
      .container{
         padding-bottom: 42.66vw;
      }
      &::after{
         bottom: 20vw;
      }
   }
   .strage-list{
      width: 100vw;
      margin-left: calc(50% - 50vw);
      padding: 4vw 6.13vw;
      margin-top: 13.06vw;
      margin-bottom: 9.33vw;
      letter-spacing: -0.1rem;
   }
   h3{
      letter-spacing: -0.1rem;
   }
   .new-release--container , .news-item{
      border: 0.8vw solid #cccccc;
      padding: 10.13vw 8vw;
      margin: 10.13vw 0 14.66vw;
      .new-release , .news-item__head{
         flex-direction: column;
         align-items: center;
         gap: 2vw;
         font-size: clamp(13px,3.2vw,16px);
         margin-bottom: 5.33vw;
         padding-bottom: min(3.38vw,20px);
         img{
            width: 50vw;
         }
         &::after{
            background-image: url(../img/new-release-line-sp.webp);
            width: 100%;
            height: 1.33vw;
            bottom: min(0vw,6px);
         }
      }
      .new-release--subttle{
         font-size: clamp(14px,3.38vw,18px);
      }
      .new-release--box{
         flex-direction: column;
         gap: 5.33vw;
         .item-img{
            max-width: 420px;
            width: 100%;
            height: auto;
            padding: 12px 2vw 10px;
            margin: 0 auto;
         }
         .item-img.adjust-height{
            height: 100%;
         }
         .new-release--txt{
            width: 100%;
            h4{
               font-size: clamp(20px,4.83vw,24px);
               margin: -1vw 0 0.2vw;
            }
            .release-date{
               margin-bottom: 4vw;
            }
            .book_summary{
               margin-bottom: 9.33vw;
            }
         }
         .new-release--btn-list{
            width: 100%;
            gap: 2vw;
            .-sample, .-buy {
               width: 100%;
               max-width: 400px;
            }
            .-bonus{
               max-width: 140px;
               width: 30vw;
            }
         }
      }
   }
   .category_sub_ttl{
      width: 100vw;
      margin-left: calc(50% - 50vw);
      font-size: clamp(18px,4.34vw,20px);
      span{
         font-size: 20px;
         letter-spacing: 0.2rem;
      }
   }
   .item_list{
      width: 90%;
      margin: 0 auto;
      gap: 8vw 6%;
      padding-bottom: 13.33vw;
      margin-top: 6.4vw;
      .item{
         width: 47%;
         .store_bonus , .store_bonus2{
            width: min(27.73vw,160px);
            margin-bottom: 0;
         }
         .store_bonus2{
            width: min(36vw,230px);
         }
         h4.card_title{
            font-size: clamp(16px,3.86vw,20px);
         }
         .release-date{
            font-size: clamp(12px,2.89vw,14px);
         }
         .action{
            grid-template-rows: repeat(2, min(9.33vw, 70px));
            gap: min(1vw, 8px);
            a{
               height: min(9.33vw, 70px);
            }
         }
      }
      .item.-goods .action {
        grid-template-rows: repeat(1, min(9.33vw, 70px));
      }
   }
   /* 高さ指定必要なリスト（TOPページリスト（書籍・グッズ混合並びのため）、書籍リスト（カバーイラスト・書影サイズ異なるため）） */
   .-book .item_list .item .card{
      grid-template-rows: min(58.66vw, 440px) auto 1fr auto auto;
   }
   .item_list.--guid-kit .item.is-no-bonus .card , .-book .item_list .item.is-no-bonus .card{
      grid-template-rows: min(58.66vw, 440px) 1fr auto auto;
   }
   /* TOPページリストSP版最後の行のアイテム高さツメる（余分な余白トル） */
   .item_list.--guid-kit .item.-is-auto-height-sp .card{
      grid-template-rows: auto auto 1fr auto auto;
   }
   .item_list.--guid-kit .item.is-no-bonus.-is-auto-height-sp .card{
      grid-template-rows: auto 1fr auto auto;
   }
 }

/* character-page */
.character{
   .container{
      padding-bottom: min(19.11vw,336px);
      .light-blue{
         display: inline-block;
         color: var(--txt_color_2);
      }
      .chara-name{
         background-color: initial;
         clip-path: none;
         padding: 0;
      }
   }
   &::after{
      bottom: min(10.27vw,180px);
   }
}
.character-lead{
   margin: 40px 0 64px;
}
.guild{
   font-family: var(--font-en);
   font-size: 18px;
   width: 100%;
   border-bottom: 1px solid var(--txt_color);
   margin-bottom: 10px;
   span{
      display: inline-block;
      position: relative;
      padding-right: 16px;
      padding-bottom: 4px;
   }
   span::after{
      content: "";
      background-color: var(--txt_color_2);
      width: 100%;
      height: 4px;
      border-bottom: 2px solid var(--txt_color_2);
      position: absolute;
      bottom: 0;
      left: 0;
      clip-path: polygon(0 0,calc(100% - 20px) 0,100% 20px,100% 100%,0 100%);
   }
}
.character-name{
   font-size: 48px;
   margin-bottom: 6px;
   font-family: var(--font-sub);
   letter-spacing: 0.2rem;
   span{
      font-size: 20px;
      padding-left: 10px;
      font-family: var(--font-en);
      letter-spacing: 0.02rem;
   }
}
.character-profile{
   display: flex;
   border: 1px solid var(--txt_color);
   align-items: center;
   margin-bottom: 50px;
   font-family: var(--font-sub);
   font-weight: 500;
   font-size: 20px;
   letter-spacing: 0.18rem;
   dt{
      padding: 8px 10px 8px 20px;
   }
   dd{
      border-right: 1px solid var(--txt_color);
      padding: 8px 20px 8px 10px;
      &:last-of-type{
         border-right: 0;
      }
   }
}
.character_detail{
   display: flex;
   gap: 36px;
   align-items: start;
   margin-bottom: min(4.44vw,80px);
   .character-img{
      max-width: 400px;
      width: 34%;
   }
   .character-txt{
      width: calc(66% - 36px);
      p{
         font-size: 18px;
         line-height: 1.8;
         margin-bottom: min(2.77vw,50px);
      }
      .chara-lead{
         margin-bottom: min(1vw,18px);
      }
      .marker{
         font-size: clamp(50px,6vw,60px);
         font-family: var(--font-sub);
         letter-spacing: 0.16rem;
         /* background-color: #fff; */
         font-weight: bold;
         padding:0 1% 0.2%;
         line-height: 1.2;
         box-decoration-break: clone;
	      -webkit-box-decoration-break: clone;
      }
      picture{
         display: block;
      }
   }
   .chara-color01{
      color: #004ea1;
   }
   .chara-color02{
      color: #ffa300;
   }
   .chara-color03{
      color: #d875b7;
   }
   .chara-color04{
      color: #92969c;
   }
   .chara-color05{
      color: #5860a9;
   }
}
/* キャラリードアニメーションここから*/
.bgextend{
   opacity: 1;
   animation: none;
}
.chara-lead .bgLRextend::before{
   animation: none;
    background-color: transparent;
}
.chara-lead .bgLRextend {
  display: inline;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;

  background-image: linear-gradient(#fff, #fff); 
  background-repeat: no-repeat;
  
  background-position: left center;
  background-size: 0% 100%; 

  /* アニメーションの設定 */
  animation-name: bgLRextendAnime--chara-lead;
  animation-duration: 1s;
  animation-delay: 1.5s;
  animation-fill-mode: forwards; 
}

@keyframes bgLRextendAnime--chara-lead {
   0% {
      background-size: 0% 100%; 
   }
   100% {
      background-size: 100% 100%;
   }
}
@media all and (max-width:768px) {
   .chara-lead .bgLRextend{
      animation-delay: 0.5s;
   }
}
/* .chara-lead .bgLRextend::before{
	content: "";
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   z-index: -1; 
   background-color: transparent;

   アニメーションの設定
   animation-name: bgLRextendAnime--chara-lead;
   animation-duration: 1s;
   animation-delay: 1.5s;
   animation-fill-mode: forwards; 
}
@keyframes bgLRextendAnime--chara-lead{
	0% {
      transform-origin: left;
      transform: scaleX(0);
      background-color: transparent; 
   }
   1% {
      background-color: #fff; 
   }
   100% {
      transform-origin: left;
      transform: scaleX(1);
      background-color: #fff;
   }
}
@media all and (max-width:768px) {
   .chara-lead .bgLRextend::before{
      animation-delay: 0.5s;
   }
} */
/* キャラリードアニメーションここまで*/
.item_list.--character{
   .item{
      .card{
         grid-template-rows: auto auto;
      }
      .item-img{
         border: 0;
         width: 90%;
         margin: 0 auto 2%;
         &::before{
            display: none;
         }
         &::after{
            display: none;
         }
      }
   }
   .item.-goods .item-img{
      width: 100%;
   }
}
.pagination{
   margin-top: 100px;
   display: flex;
   justify-content: space-between;
   font-family: var(--font-en);
   font-weight: bold;
   font-size: 18px;
   border-top: 1px solid var(--txt_color);
   color: #444444;
   a{
      color: #444444;
      text-decoration: none;
      border: 1px solid var(--txt_color);
      border-top: 0;
      padding: 10px 30px 10px 22px;
      height: fit-content;
      &:first-of-type{
         padding: 10px 22px 10px 30px;
      }
   }
   .member-number{
      text-align: center;
      display: block;
      line-height: 1;
      margin-top: 10px;
      span:first-of-type{
         font-size: 12px;
         font-weight: 500;
      }
      span:last-of-type{
         font-size: 50px;
         font-weight: 600;
         letter-spacing: -0.2rem;
      }
   }
   .pagination_prev , .pagination_next{
      position: relative;
   }
   .pagination_prev::after , .pagination_next::after{
      content: "";
      width: 10px;
      height: 16px;
      position: absolute;
      top: 50%;
      right: 6px;
      transform: translateY(-50%);
      background-image: radial-gradient(#444444 1px, transparent 1px), radial-gradient(#444444 1px, transparent 1px);
      background-size: 3px 3px;
      background-position: 0 0, 6px 6px;
      clip-path: polygon(0 0, 100% 50%, 0 100%);
   }
   .pagination_prev::after{
      transform: rotate(180deg) translateY(-1px);
      top: 15px;
      left: 6px;
   }
   .is-disabled{
      pointer-events: none;
	   color: #44444460;
      /* &::after{
         background-image: radial-gradient(#44444460 1px, transparent 1px), radial-gradient(#44444460 1px, transparent 1px);
      } */
   }
}
@media all and (max-width:768px) {
   .character{
      .container{
         padding-bottom: 39.73vw;
      }
      &::after{
         bottom: 20vw;
      }
   }
   .character .container h2{
      font-size: clamp(54px,13.52vw,70px);
   }
   .character-lead{
      margin: min(6.66vw,50px) 0 min(16.8vw,126px);
   }
   .guild{
      margin-bottom: 1vw;
      width: 100vw;
      margin-left: calc(50% - 50vw);
      span{
         margin-left: 3.5vw;
      }
   }
   .character-name{
      font-size: clamp(42px,12.14vw,48px);
      margin-bottom: 1vw;
   }
   .character-profile{
      display: grid;
	   grid-template-columns: auto 1fr;
      border: 0;
      width: 100vw;
      margin-left: calc(50% - 50vw);
      margin-bottom: min(8vw,40px);
      font-size: 18px;
      dt{
      border-bottom: 1px solid var(--txt_color);
      padding: min(2.6vw,10px) min(2vw,10px) min(2.6vw,10px) min(3.33vw,20px);
      
      &:first-of-type{
         border-top: 1px solid var(--txt_color);
         }
      }
      dd{
         border-right: none;
         border-bottom: 1px solid var(--txt_color);
         padding: min(2.6vw,10px) min(3.33vw,20px) min(2.6vw,10px) min(2vw,10px);
         &:first-of-type{
            border-top: 1px solid var(--txt_color);
         }
      }
   }
   .character_detail{
      flex-direction: column;
      gap: min(9.33vw,30px);
      margin-bottom: min(12vw, 60px);
      .character-img{
         width: 100%;
         margin: 0 auto;
      }
      .character-txt{
         max-width: 400px;
         width: 95%;
         margin: 0 auto;
         .marker{
            font-size: clamp(36px,10vw,40px);
         }
         .chara-lead{
            margin-bottom: min(3vw,12px);
         }
         p{
            font-size: 16px;
            margin-bottom: min(8.79vw,34px);
         }
         picture{
            max-width: 400px;
            margin: 0 auto;
         }
      }
   }
   .item_list.--character.is-single{
      justify-content: center;
      .item{
         max-width: 350px;
         width: 70%;
         .action{
            grid-template-rows: repeat(2, min(13.6vw, 82px));
            gap: min(1.6vw,16px);
            a{
               height: max-content;
            }
         }
      }
   }
   .pagination{
      width: 100vw;
      margin-left: calc(50% - 50vw);
      margin-top: min(14.13vw,106px);
      a{
         padding: min(3.2vw,8px) min(5.33vw,30px) min(3.2vw,8px) min(2.66vw,22px);
         font-size: clamp(14px,3.86vw,18px);
         &:first-of-type{
            padding: min(3.2vw,8px) min(2.66vw,22px) min(3.2vw,8px) min(5.33vw,30px);
         }
      }
      .member-number{
         margin-top: 1vw;
         span:first-of-type{
            font-size: clamp(8px,2.41vw,12px);
         }
         span:last-of-type{
            font-size: clamp(38px,9.66vw,50px);
         }
      }
      .pagination_prev{
         border-left: 0;
      }
      .pagination_next{
         border-right: 0;
      }
      .pagination_prev::after , .pagination_next::after{
         width: min(1.93vw,10px);
         height: min(3.38vw,16px);
      }
      .pagination_prev::after{
         top: min(3vw,14px);
      }
   }
}

/* top-page */
/* main.index{
   &::before{
      background: initial;
   }
   &::after{
      background: initial;
   }
} */
.hero_mainvisual{
   width: 100%;
   position: relative;
}
.hero_mainvisual_bg{
   background: url(../img/hero.webp) no-repeat center center/100%;
   width: 100%;
   aspect-ratio: 225 / 169;
}
.anime_lead{
   background: url(../img/anime_lead.webp) no-repeat right center/contain;
   width: 26%;
   height: 64%;
   position: absolute;
   bottom: 4%;
   right: 3%;
}
.hero_badge{
   background: url(../img/hero_badge.png) no-repeat center center/contain;
   width: 18%;
   height: 18%;
   position: absolute;
   top: 6%;
   right: 2.8%;
}
.container.-index{
   padding: min(2.88vw,50px) min(1.66vw, 30px) 0;
}
.pickup_ttl{
   position: relative;
   padding-left: 30px;
   margin-bottom: min(1.66vw,30px);
   font-size: clamp(36px,2.55vw,46px);
   letter-spacing: -0.04rem;
   &::after{
      content: "";
      background: url(../img/arrow-bottom-right.webp) no-repeat center center / 20px;
      width: 20px;
      height: 20px;
      position: absolute;
      top: 50%;
      left: 0;
      transform: translateY(-50%);
   }
}
.pick-up .item-img{
   &::before{
      height: 4px;
      top: 1.2%;
   }
   &::after{
      bottom: 1.4%;
   }
   img{
      padding: 3% 1% 2%;
   }
}
.splide{
   max-width: 1200px;
   margin: 0 auto 255px;
   position: relative;
   &::after{
	content: "";
	position: absolute;
	left: 0;
	bottom: -120px;

	width: 100vw;
   margin-left: calc(50% - 50vw);
	height: 14px;

	background:
		repeating-linear-gradient(
			-60deg,
			#c0c0c0 0 1px,
			transparent 1px 4px
		);
   }  
}
@media all and (max-width:999px) {
   .splide{
      margin-bottom: 20vw;
      &::after{
         bottom: -10vw;
      }
   }
}
.splide__track{
   margin: 0 auto;
   max-width: 1074px;
   width: 90%;
}
.splide__arrow svg{
   display: none;
}
.splide__arrow{
   background: url(../img/arrow--pick-up.png) no-repeat center center/contain;
   width: min(3.6vw,42px);
   height: min(3.6vw,42px);
   position: absolute;
   top: 50%;
   transform: translateY(-50%);
   left: 0;   
   border: 0;
   cursor: pointer;
}
.splide__arrow--prev{
   transform: rotate(180deg) translateY(50%);
   right: 0;
   left: initial;
}
.splide__pagination{
	display: flex !important;
   gap: min(1.2vw,12px);
   padding-top: 10px;
}
.splide__pagination__page{
	width: min(1.2vw,12px);
	height: min(1.2vw,12px);
   flex-shrink: 0;
	margin: 0;
	border-radius: 50%;
	background: #cccccc;
	opacity: 1;
	transition: .3s;
   border: 0;
   display: block;
   padding: 0 !important;
}
.splide__pagination__page.is-active{
	background: #a7a7a7;
	transform: none;
}
.guid-kit--lead , .top-character--lead , .storage--lead{
   margin: 44px 0 62px;
}
@media all and (max-width:768px) {
   .hero_mainvisual_bg{
      background: url(../img/hero-sp.webp) no-repeat center center/100%;
      aspect-ratio: 750 / 1100;
   }
   .anime_lead{
      background: url(../img/anime_lead.webp) no-repeat right center/contain;
      width: 47%;
      height: 64%;
      bottom: -1%;
      right: 0;
   }
   .hero_badge{
      background: url(../img/hero_badge.png) no-repeat center center/contain;
      width: 28%;
      height: 28%;
      top: 0;
      right: 67%;
   }
   .container.-index{
      padding: min(20vw,150px) min(5.33vw, 40px) 0;
   }
   .pickup_ttl{
      font-size: clamp(26px, 6.76vw, 46px);
      padding-left: min(5.28vw,30px);
          &::after {
         content: "";
         background: url(../img/arrow-bottom-right.webp) no-repeat center center / contain;
         width: min(3.38vw,20px);
         height: min(3.38vw,20px);
         position: absolute;
         top: 50%;
         left: 0;
         transform: translateY(-50%);
      }
   }
   .pick-up .item-img{
      &::before{
         height: 1.04vw;
      }
   }
   .splide{
      margin: 0 auto min(38vw, 240px);
      &::after{
         bottom: -20vw;
      }
   }
   .splide__track{
      width: 100vw;
      margin-left: calc(50% - 50vw);
   }
   .splide__pagination{
      gap: min(1.4vw, 12px);
      padding-top: 3%;
   }
   .splide__pagination__page{
      width: min(2.2vw, 18px);
      height: min(2.2vw, 18px);
   }
   .container.-index{
      #guid-kit h2{
         font-size: clamp(58px,14.49vw,70px);
      }
      #character h2{
         font-size: clamp(54px, 13.52vw, 70px);;
      }
   }
}

/* guid-kit */
.item_list.--guid-kit{
   margin-bottom: 242px;
   .item{
      .card{
         grid-template-rows: min(25.66vw,318px) auto 1fr auto auto;
      }
      .action{
         grid-template-rows: repeat(3, min(4vw, 50px));
         .btn03{
            grid-row: 3;
         }
         .-bonus{
            width: min(11.20vw,112px);
            margin: -10px auto 0;
         }
      }
   }
}
@media all and (max-width:999px) {
   .item_list.--guid-kit{
      .item{
         .card{
            grid-template-rows: min(34.03vw,330px) auto 1fr auto auto;
         }
         .action{
            grid-template-rows: repeat(3, min(5.20vw, 52px));
         }
      }
   }
}
@media all and (max-width:768px) {
   .item_list.--guid-kit{
      /* margin-bottom: min(22.66vw,170px); */
      margin-bottom: 10vw;
      gap: 2vw 6%;
      .item{
         .card{
            grid-template-rows: min(58.66vw,440px) auto 1fr auto auto;
         }
         .action{
            grid-template-rows: repeat(3, min(9.33vw, 70px));
            .-bonus{
               width: min(22.53vw,184px);
               margin: -2vw auto 0;
            }
         }
      }
   }
   .guid-kit--lead{
      margin: min(8vw,60px) 0 min(12vw,90px);
   }
   .top-character--lead{
      margin: min(13.33vw,100px) 0 min(8.53vw,64px);
   }
   .storage--lead{
      margin: min(13.33vw,50px) 0 min(16vw,50px);
   }
}

/* news */
#news {
   position: relative;
   z-index: 0;
   padding: 140px 0 300px;
   &::before{
      content: "";
      background: url(../img/news_bg.webp) no-repeat top center / cover;
      width: 100vw;
      height: 1000px;
      position: absolute;
      top: 0;
      left: 0;
      margin-left: calc(50% - 50vw);
      z-index: -1;
   }
   h2{
      color: var(--txt_color_2);
      .official-store , .heading_sub{
         color: var(--txt_color);
      }
      .heading_sub{
         display: inline-block;
         margin-left: 20px;
      }
   }
}
.top-news--lead{
   margin: 10px 0 70px;
}
.top-news-list{
   width: 100%;
   list-style: none;
   li{
      border-bottom: 1px solid #d7d7d7;
      padding-bottom: 40px;
      margin-bottom: 40px;
      a{
         text-decoration: none;
         color: var(--txt_color);
      }
      .top-news-date{
         color: var(--txt_color_2);
         font-family: var(--font-en);
         margin-bottom: 2px;
         display: block;
         letter-spacing: -0.02rem;
      }
      .top-news-text{
         font-size: 18px;
      }
   }
}
.btn-news{
   display: block;
   width: 286px;
   height: auto;
   margin: 70px auto 0;
}
@media all and (max-width:768px) {
   #news h2 .heading_sub{
      display: block;
      margin-left: 0.8%;
      margin-top: -2%;
   }
   .top-news--lead{
      margin: 6vw 0 8vw;
   }
   .top-news-list {
      li{
         width: 100vw;
         margin-left: calc(50% - 50vw);
         padding: min(8vw,30px) min(6.4vw,48px);
         margin-bottom: 0;
         &:first-of-type{
            border-top: 1px solid #d7d7d7;
         }
         .top-news-text{
            font-size: 16px;
         }
      }
   }
   .btn-news{
      margin-top: min(15vw,60px);
   }

}
@media all and (max-width:470px) {
   #news{
      padding: 30vw 0 50vw;
      &::before{
         background: url(../img/news_bg-sp.webp) no-repeat center center / cover;
      }
   }
}

/* character */
.chara-grid{
   display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 16px;
   position: relative;
   margin-bottom: 300px;
   a{
      display: block;
   }
   &::after{
      content: "";
      position: absolute;
      background: url(../img/bg-object03.webp) no-repeat center center / contain;
      width: 95%;
      max-width: 1120px;
      height: 34px;
      bottom: -120px;
      left: 50%;
      transform: translateX(-50%);
   }
}
.chara-grid-sub{
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px;
}

/* 画像アニメーションここから */
.chara-grid .bgLRextend::before , .top-storage-list .bgLRextend::before , .card .bgLRextend::before{
	animation-name:bgLRextendAnime--img;
	animation-duration:1s;
   animation-delay: 0.8s;
	animation-fill-mode:forwards;
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #ffffff88;/*伸びる背景色の設定*/
}
.card .bgLRextend::before{
   z-index: 1;
   animation-delay: 0.3s;
}
.card .bgLRextend{
   justify-self: end; 
   align-self: end;
   margin-bottom: 6%;
}
@keyframes bgLRextendAnime--img{
	0% {
      transform-origin: right;
      transform: scaleX(1);
   }
   100% {
      transform-origin: right;
      transform: scaleX(0); 
   }
}
/* 画像アニメーションここまで*/

@media all and (max-width:768px) {
   .chara-grid{
		grid-template-columns: 1fr;
      margin-bottom: min(32.53vw,244px);
      gap: min(1vw,10px);
      &::after{
         background: url(../img/bg-object03-sp.webp) no-repeat center center / contain;
         bottom: -7%;
      }
	}
   .chara-grid-sub{
      gap: min(0.53vw,4px) min(1.6vw,12px);
   }
}

/* play-log */
#play-log {
   position: relative;
   z-index: 0;
   padding: 85px 0;
   margin-bottom: 160px;
   &::before{
      content: "";
      background: url(../img/log_bg.webp) no-repeat top center / cover;
      width: 100vw;
      height: 680px;
      position: absolute;
      top: 0;
      left: 0;
      margin-left: calc(50% - 50vw);
      z-index: -1;
   }
}
.marquee{
   overflow: hidden;
   width: 100vw;
   height: 144px;
   margin-left: calc(50% - 50vw);
   margin-bottom: 30px;
   &:last-of-type{
      margin-bottom: 0;
   }
}
.marquee-track{
   display: flex;
   width: max-content;
   animation: none;
   img{
      height: 144px;
      display: block;
   }
}
.marquee-right .marquee-track{
   mix-blend-mode: difference;
}

.marquee-left .marquee-track.is-start{
	animation: marquee-left 40s linear infinite;
}

.marquee-right .marquee-track.is-start{
	animation: marquee-right 40s linear infinite;
}


@keyframes marquee-left{
	from{
		transform: translateX(0);
	}
	to{
		transform: translateX(-50%);
	}
}

@keyframes marquee-right{
	from{
		transform: translateX(-50%);
	}
	to{
		transform: translateX(0);
	}
}
@media all and (max-width:768px) {
   #play-log{
      padding: 10.93vw 0;
      margin-bottom: 17.33vw;
      &::before{
         background: url(../img/log_bg-sp.webp) no-repeat center center / contain;
         height: 77.33vw;
      }
   }
   .marquee{
      height: 16.53vw;
      margin-bottom: 3.2vw;
   }
   .marquee-track{
      img{
         height: 16.53vw;
      }
   }
}

/* storage */
#storage{
   margin-bottom: 180px;
}
.top-category_ttl{
   margin-bottom: 70px;
   &:first-of-type{
      display: block;
      background: url(../img/top-storage-subtitle01.webp) no-repeat center center/100%;
      max-width: 520px;
      height: 140px;
   }
   &:last-of-type{
      display: block;
      background: url(../img/top-storage-subtitle02.webp) no-repeat center center/100%;
      max-width: 580px;
      height: 140px;
   }
}
.top-storage-list{
   display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: min(2.66vw,48px);
   margin-bottom: 90px;
}
.top-storage-item{
   display: block;
}
.btn-store{
   display: block;
   width: min(46.44vw,476px);
   height: auto;
   margin:  0 auto;
}
@media all and (max-width:768px) {
   #storage{
      margin-bottom: 23.20vw;
   }
	.top-storage-list{
		grid-template-columns: 1fr;
      width: 95%;
      margin: 0 auto;
	}
   .top-category_ttl{
      margin-bottom: min(5.33vw,40px);
      &:first-of-type{
         width: 90%;
         height: auto;
         aspect-ratio: 572 / 148;
      }
      &:last-of-type{
         max-width: 580px;
         width: 90%;
         height: auto;
         aspect-ratio: 640 / 142;
      }
   }
   .top-storage-list{
      width: 100%;
      gap: min(4vw, 30px);
      margin-bottom: min(16vw,120px);
      &:nth-of-type(2){
         margin-bottom: min(8.79vw,66px);
      }
   }
   .btn-store{
      width: min(79.46vw, 596px);
   }
}

/* bn_area */
#bn_area{
   padding: 150px 0 120px;
   position: relative;
   z-index: 0;
   &::before{
      content: "";
      background: url(../img/bn_bg.webp) no-repeat top center / cover;
      width: 100vw;
      height: 540px;
      position: absolute;
      top: 0;
      left: 0;
      margin-left: calc(50% - 50vw);
      z-index: -1;
   }
}
.top-bn-list{
   display: grid;
	grid-template-columns: repeat(2, 374px);
	gap: min(1.66vw,30px);
   justify-content: center;
}
.top-bn-item{
   display: block;
}
@media all and (max-width:768px) {
   #bn_area{
      padding: 26.13vw 0;
      &::before{
         background: url(../img/bn_bg-sp.webp) no-repeat top center / cover;
         height: min(160vw,1190px);
      }
   }
	.top-bn-list{
		grid-template-columns: 1fr;
      width: 95%;
      margin: 0 auto;
      gap: min(5.33vw,40px);
	}
}

/* news page */
main.news{
   .container{
     padding-bottom: 360px; 
   }
   &::after{
      bottom: 180px;
   }
}
.news-item {
   margin: 50px 0 0;
   &:first-of-type{
      margin-top: 100px;
   }
   .news-item__head {
      display: block;
      line-height: 1;
      margin-bottom: 30px;
      .news-item__title{
         font-size: 26px;
         letter-spacing: 0.02rem;
         line-height: 1.4;
      }
   }
   .news-item__date{
      display: block;
      font-family: var(--font-en);
      color: var(--txt_color_2);
      font-size: 18px;
      margin-bottom: 16px;
      letter-spacing: -0.02rem;
   }
   .news-item__img{
      max-width: 580px;
      height: auto;
      margin-bottom: 30px;
   }
   .news-item__img.is-book , .news-item__img.is-goods{
      max-width: 380px;
   }
   .news-item__text{
      line-height: 1.8;
      margin-bottom: 30px;
      &:last-of-type{
         margin-bottom: 0;
      }
      a{
         color: var(--txt_color_2);
         text-decoration: none;
      }
   }
   .news-item__text.img_title{
      margin-bottom: 20px;
   }
}
 @media all and (max-width:768px) {
   main.news{
      .container{
      padding-bottom: 36vw; 
      }
      &::after{
         bottom: 16vw;
      }
   }
   .news-item {
      margin: min(5.33vw,40px) 0 0;
      &:first-of-type{
         margin-top: min(8vw,60px);
      }
      .news-item__head {
         margin-bottom: min(4vw,30px);
         padding-bottom: min(3.86vw,20px);
         .news-item__title{
            font-size: clamp(20px,4.83vw,26px);
         }
         &::after{
            background: url(../img/new-release-line.webp) no-repeat center right /cover;
            height: min(1.33vw,8px);
         }
      }
      .news-item__date{
         font-size: clamp(16px,3.86vw,18px);
         margin-bottom: min(1.44vw,6px);
      }
      .news-item__img , .news-item__img--book{
         width: 100%;
         margin-bottom: min(6.66vw,50px);
      }
      .news-item__text{
         line-height: 1.6;
         margin-bottom: min(6.66vw,50px);
      }
      .news-item__text.img_title{
         margin-bottom: min(2.66vw,20px);
      }
   }
 }

/*------------------------------------------------------------------------------
 footer
 -------------------------------------------------------------------------------*/
 footer{
   width: 100%;
   height: 800px;
   background: url(../img/f-bg.webp) no-repeat top center/cover;
   /* margin-top: -10px; */
 }
 .footer-flex-1 , .footer-flex-2{
   display: flex;
   max-width: 1200px;
   margin: 0 auto;
   justify-content: space-between;
   padding: 0 20px;
 }
 .footer-flex-1{
   padding-top: 114px;
   align-items: start;
   margin-bottom: 140px;
 }
 .footer-flex-2{
   align-items: end;
 }
 .nav-footer{
   ul{
      li{
         line-height: 1;
         margin-bottom: 22px;
      }
      a{
         font-family: var(--font-en);
         color: #fff;
         font-weight: 600;
         font-size: 34px;
         letter-spacing: -0.02rem;
      }
   }
 }
 .nav-footer .menu-list{
   display: flex;
   padding-top: 8px;
   gap: 28px;
   li{
      margin-bottom: 0;
   }
   a{
      font-size: 14px;
   }
 }
 .f-shere_area_sp{
   display: none;
 }
 .f-shere_area_pc{
   display: flex;
   gap: 14px;
   align-items: center;
   p{
      font-family: var(--font-en);
      font-size: 14px;
      color: #fff;
      margin-right: 10px;
   }
   a{
      width: 32px;
      height: 32px;
      &:first-of-type{
         width: 30px;
         height: 30px;
      }
   }
 }
 .f-logo{
   width: 380px;
   height: 80px;
 }
 .footer-brand{
   display: flex;
   flex-direction: column;
   align-items: end;
   gap: 14px;
   a{
      display: block;
      width: 130px;
      height: auto;
   }
   p{
      font-family: var(--font-en);
      font-size: 11px;
      color: #fff;
   }
 }

 @media all and (max-width:768px) {
   footer{
      height: min(222.53vw,1300px);
      background: url(../img/f-bg-sp.webp) no-repeat top center/cover;
      z-index: 0;
      position: relative;
   }
   .footer-flex-1 , .footer-flex-2{
      max-width: 100%;
      flex-direction: column;
      padding: 0 8vw;
   }
   .footer-flex-1{
      padding-top: 24vw;
      margin-bottom: 18.66vw;
   }
   .footer-flex-2{
      align-items: start;
   }
   .nav-footer{
      a{
         font-size: 32px;
      }
   }
   .f-shere_area_pc{
      display: none;
   }
   .f-shere_area_sp{
      display: flex;
      gap: 14px;
      align-items: center;
      margin-bottom: 8.79vw;
      p{
         font-family: var(--font-en);
         font-size: 14px;
         color: #fff;
         margin-right: 10px;
      }
      a{
         width: 32px;
         height: 32px;
         &:first-of-type{
            width: 30px;
            height: 30px;
         }
      }
   }
   .f-logo{
      width: 88.4vw;
      height: 18.53vw;
      margin-bottom: 23.73vw;
      margin-left: calc(42vw - 44.2vw);
   }
   .footer-brand{
      align-items: start;
      gap: 3vw;
   }
 }