@charset "utf-8";
/* すべてのWebページに適応される　*/


@import url('https://fonts.googleapis.com/css?family=Cinzel');
@import url('https://fonts.googleapis.com/css2?family=Kaisei+Decol&family=Kiwi+Maru:wght@500&display=swap');

body{
      font-size: 16px;
    font-family:'Kiwi Maru','Lato', 'Hiragino Kaku Gothic Pro', 'ヒラギノ角ゴ Pro W3', Meiryo, メイリオ, Osaka, 'MS PGothic', arial, helvetica, sans-serif;


    margin: 0;




}


.warning-track {
  display: flex;
  width: fit-content; /* ← max-content → これに変更 */
  animation: scroll linear infinite;
  animation-duration: 18s;

}

.warning-track img {
  width: 256px;
  height: 32px;
  flex-shrink: 0;
}

@keyframes scroll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(calc(-1 * var(--scroll-width)));
  }
}


@media (max-width: 1700px) {
  .side .sumaho-waku {
    display: none;
  }
}

.wrapper{

      
      background: radial-gradient(#f2fffa, #82abb6 16%, #2f546d 38%, #172c3b 61%, #06172e),url("../images/wallpaper-whitemasu.png");
        /* 2. 画像のみリピートさせ、グラデーションはリピートしない設定 */
  background-repeat: no-repeat, repeat; /* 順序：グラデーション, 画像 */
  
  /* 3. 合成モード（乗算） */
  background-blend-mode: multiply;
  
  /* 必要に応じてサイズ調整 */
  background-size: cover,  50px 50px; /* グラデーションはカバー、画像は元サイズ(リピート用) */



}




.link-title {
  font-size: 18px;
      font-family: "Makinas",sans-serif; /*上で設定したフォントファミリー名*/
    font-weight: bold;
    font-style: italic;
    margin-bottom: -10px;

}

}

/* ステッカーによる横幅のスクロールバー禁止 */
html, body {
  overflow-x: hidden;
}


p{
              font-size: 16px;
    font-family:'Kiwi Maru','Lato', 'Hiragino Kaku Gothic Pro', 'ヒラギノ角ゴ Pro W3', Meiryo, メイリオ, Osaka, 'MS PGothic', arial, helvetica, sans-serif;

  font-style: normal;

}




@media(max-width:750px){
    #main .inner {
      padding: 40px 8%;
  }
}
@media(min-width:751px){
    #main .inner {
      padding: 40px;
  }
}
@media(max-width:750px){
    #main-pixel-visual img {
    object-fit: cover;
    object-position: center;
    width: 80%;
    height: 80%;

    margin-top: 20px;
    margin-bottom: 10px;
}

}
@media(min-width:751px){
    #main-pixel-visual img {
    object-fit: cover;
    object-position: center;
    width: 20%;
    height: 20%;

    margin-top: 20px;
    margin-bottom: 6px;
}

}


#footer {
    bottom: 0; /* 下に固定 */
    background-image: url('../images/parts-deco-pattern.png'); /* 絶対パスで確認 */
    background-size: 128px 145px;
    background-repeat: repeat;
    text-align: center;
    height: 100px;
     position: sticky;
     top: 100vh;
  width: 100%;


    background-size: 100px;


}




/*トップコンテンツの画像*/


.content-img{
  display: flex;
  flex-wrap: wrap;






}

.content-img ul {
    display: flex;/*サムネを横並びにするための記述*/
flex-wrap: wrap;
align-items: center; /* 垂直中心 */
  justify-content: center; /* 水平中心 */
  

}

.content-img li {
  list-style: none;/*追加*/
  margin: auto;/*追加。これはサムネイル群全体の余白設定。*/
position: relative;

}



@media(max-width:750px){
    .content-img li img{

    object-fit: cover;/*アスペクト比維持のための記述*/
  object-position: center;
   width: 100%; /* bodyの幅に対する割合 */
   transition: transform 0.5s cubic-bezier(0.25, 0.1, 0.25, 1.5); /* カスタムイージング */
 }
}

@media(min-width:751px){
    .content-img li img{

    object-fit: cover;/*アスペクト比維持のための記述*/
  object-position: center;
   width: 300px; /* bodyの幅に対する割合 */
   transition: transform 0.5s cubic-bezier(0.25, 0.1, 0.25, 1.5); /* カスタムイージング */
 }
}




.content-img li:hover img,
.content-img li:active img {
  transform: translateY(-6px); /* 跳ねる効果 */
}





.content-img h4{
  position: absolute;
    display: flex;
  align-items: center; /* 垂直中心 */
  justify-content: center; /* 水平中心 */
   top: 50%;
  left: 50%;
  -ms-transform: translate(-50%,-50%);
  -webkit-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);
  margin:0;
  padding:0;
  color: white;
  font-family: 'Kaisei Decol', cursive;
  font-size: 30px;
text-shadow: 0 2px 3px rgba(0, 0, 0, 0.3);
}






.window-content ul {
  list-style: none;
}

.window-content li {
  padding: 2px;
  margin-bottom: 2px;
  position: relative;
}

.red-line{  
  font-family: "Makinas",sans-serif; /*上で設定したフォントファミリー名*/
  position: relative;
    
    color: red;
    font-weight: bold;
    
  }

.text-line{  
  font-family: "Makinas",sans-serif; /*上で設定したフォントファミリー名*/
  position: relative;
    
    color: #05a0c2;/* メインカラー濃いピンク#a83264 */
    font-weight: bold;
    
  }
.text-line:hover{
    color: #09c2ea;
}


.pink-window .window-content {
    background-image: url('../images/wallpaper-white.png'); /* 絶対パスで確認 */
    
}

.dark-window .window-content {
  background: #000;
  color: #dde1e2;
}

.gray-window .window-content {
background: #7c8490;
}

.blue-window .window-content {
background: #051d2e;
color: #dde1e2;
}

.youtube {
  width: 100%;
  aspect-ratio: 560 / 315;
}

.youtube iframe {
  width: 100%;
  height: 100%;
}



@media(max-width:750px){
    #main-mygame {

    display: flex;
    justify-content: center;
    align-items: center;  



    margin-top: -320px;
    position: relative;
    background-color: black;
}
}
@media(min-width:751px){
    #main-mygame {
    display: flex;
    justify-content: center;
    align-items: center;
      position: relative;
    background-color: black;

}
}


#main-mygame{

  position: relative; /* ← これ必須 */
    object-fit: cover;
    object-position: center;
    width: 100%;
    height: 100%;

}


/* 枠専用レイヤー */
#main-mygame iframe{
  animation: squiggle 0.8s infinite;
}


/* 重ねるGIF */
.gif-overlay {
  position: absolute;
  inset: 0;
  background-image: url("../images/pon.gif"); /* 128×128のGIF */
  background-repeat: repeat;
  background-size: 128px 128px;
  mix-blend-mode: multiply;

  pointer-events: none;   /* ← これが最重要 */
}





/* CRTフィルターのオーバーレイ */
.crt-filter,
.crt-filter::before,
.crt-filter::after {
  position: absolute;
  inset: 0;
  pointer-events: none; /* クリックを素通りさせる */
  z-index: 0;
  margin: 0 auto; 
  
}

/* スキャンライン + カラーノイズ */
.crt-filter::before {
  content: "";
  background:
    linear-gradient(rgba(18,16,16,0) 50%, rgba(0,0,0,0.25) 50%),
    linear-gradient(90deg, rgba(255,0,0,0.06), rgba(0,255,0,0.02), rgba(0,0,255,0.06));
  background-size: 100% 2px, 3px 100%;
}

/* フリッカー（ちらつき） */
@keyframes crt-flicker {
  0% { opacity: 0.28; }
  5% { opacity: 0.35; }
  10% { opacity: 0.24; }
  15% { opacity: 0.90; }
  20% { opacity: 0.18; }
  25% { opacity: 0.84; }
  30% { opacity: 0.65; }
  35% { opacity: 0.68; }
  40% { opacity: 0.26; }
  100% { opacity: 0.24; }
}
.crt-filter::after {
  content: "";
  background: rgba(18, 16, 16, 0.1);
  animation: crt-flicker 0.15s infinite;
}
}





.fit-slider {
  position: absolute;
  inset: 0;
  overflow: hidden;
  contain: layout paint;
}






.wrapper {
  display: grid;
  grid-template-columns: 
    minmax(200px, 1fr)
    min(1200px, 100%)
    minmax(200px, 1fr);
  gap: 20px;
      padding: 10px;
      padding-bottom: 20px;


}





.container {
  max-width: 1700px;
  margin: 0 auto;
  padding: 0 10px;
}

@media (max-width: 768px) {
  .container {
    padding: 0 12px; /* スマホでは余白を少し狭く */
  }
}

.container {
  grid-column: 2;
}



/* レスポンシブ */
@media (max-width: 1700px) {
  .wrapper {
    grid-template-columns: 1fr;
  }

  .side {
    grid-column: 1;
  }

  .container {
    grid-column: 1;
  }

  .side:first-child { order: 2; }
.side:last-child  { order: 3; }
.container        { order: 1; }
}



.container {
  display: grid;
  gap: 10px;
  grid-template-columns: 3fr 3fr 1fr 1fr;
  grid-template-rows: 150px 150px 150px auto;
}


.item {
  position: relative; /* ← これ必須 */
  overflow: visible; /* ← ここ重要 */
/*  background: #ddd;  調整用 */
  padding: 0; /* ←これおすすめ */
  min-height: 0; /* ← これ超重要（ないと溢れる） */
  border-radius: 8px;
/*   border: 3px solid #ccc; 調整用 */
  overflow: visible;
}
.box-big1 {
  grid-column: 1 / 5;
  background: #1C1F23;
    position: relative;

  /*  background: #fc2;
  border-color: #fa0; ← マーキーテスト用 */
  height: 32px;



}


@media(min-width:751px){
    .box-big2 {
          margin-left: 100px;
          margin-right: 100px;

}
}
.box-big2 {
  grid-column:  5;
  grid-row: 1;
  /*background: #0bd;*/

padding-top: 30px;

}
.box-big3 {  /*更新履歴*/
    grid-column:  1 / 2;
  grid-row: 1 / 3;


}

.box-big4 {/*アバウト*/
  grid-column: 2 / 3;
  grid-row: 1 / 3;

}

.box-big5 {
  grid-column: 3 / 6;
    grid-row: 1 / 2;




}



.box-big6 {
    grid-column: 3 / 6;
      grid-row: 2 / 3;
  



}

.box-big7 {
  

    grid-column:  1 / 7;
  grid-row: 3;




}

.box-top {
  margin-left: 20px;
  margin-right: 20px;


  grid-column: 1 / 5;
  grid-row: 2;


}

/* Responsive */
@media (max-width: 1700px){
  .container {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
  }
  .box-big1,
  .box-big2,
  .box-big3,
  .box-big4,
  .box-big5,
  .box-big6,
  .box-big7 {
    grid-column: 1;
    grid-row: auto;
  }
}




.marquee {
  overflow: hidden;
  width: 100%;
  height: 100%;
}
 
.scroll-parent {
  overflow: hidden;
  position: relative;
  width: 100%;
  height: inherit;
}
 
.scroll-child {
  display: flex;
  align-items: center;
  justify-content: space-around;
  position: absolute;
  left: 0%;
  top: 0%;
  width: inherit;
  height: inherit;
  animation-duration: 15s;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}


.scroll-child:nth-child(1) {
  animation-name: first;
}
 
.scroll-child:nth-child(2) {
  animation-name: second;
}
 
@keyframes first {
  from {
    left: 0%;
  }
  to {
    left: -100%;
  }
}
 
@keyframes second {
  from {
    left: 100%;
  }
  to {
    left: 0%;
  }
}

/* 画像だけを制御 */
.fit-box {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;

  overflow: hidden; /* ← 画像だけクリップ */
}

.fit-box img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}



.window {
    height: 100%;          /* ← これに変更 */
  display: flex;         /* ← 追加 */
  flex-direction: column;
  background: #c0c0c0;
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 4px 10px rgba(0,0,0,0.5);
    border-radius: 56px 12px 225px 16px / 14px 224px 13px 253px;
  border: 3px solid rgba(119,14,95,1);
    outline: 2px solid #410630;

      position: relative;
  z-index: 0;
}


@media (max-width: 600px) {
  .window {
      width: 100%;
    max-height: 60vh; /* 画面の50% */
  }
}



/* 枠専用レイヤー */
.window::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;

  /* 枠だけコピー */
  border: 3px solid rgba(119,14,95,1);
  outline: 2px solid #410630;
  pointer-events: none;

  /* 背景は透明 */
  background: transparent;

  /* ←ここにSquiggle適用 */
  animation: squiggle 0.3s infinite;
}

/* アニメーション */
@keyframes squiggle {
  0% { filter: url(#squiggle1); }
  33% { filter: url(#squiggle2); }
  66% { filter: url(#squiggle3); }
  100% { filter: url(#squiggle1); }
}


.title-bar {
  animation: squiggle 0.5s infinite;
}






/* タイトルバー */
.title-bar {

  display: flex;
  justify-content: space-between;
  align-items: center;
  /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#991e7a+0,770e5f+2,750052+8,491b46+12,491b46+12,770e5f+100 */
background: linear-gradient(
  to bottom, 
  rgba(153,30,122,1) 0%,
  rgba(119,14,95,1) 2%,
  rgba(117,0,82,1) 8%,
  rgba(73,27,70,1) 12%,
  rgba(73,27,70,1) 12%,
  rgba(119,14,95,1) 100%
); 
/* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  color: white;
  padding: 4px 8px;
  font-size: 14px;
}

/* ボタン */

.buttons {
  display: flex;
  gap: 6px;
}



.buttons button {
  width: 14px;
  height: 14px;
  border: none;
  padding: 0;
  background-size: cover;
  background-repeat: no-repeat;
  cursor: pointer;
}
button:focus {
  outline: none;
}
button:active {
  transform: translateY(1px);
}

/* --- 最小化 --- */

.min {
  background-image: url("../player/min_sprite.png");
  background-size: 42px 14px;
}

.min:hover {
  background-position: -14px 0;
}

.min:active {
  background-position: -28px 0;
}

/* --- 最大化 --- */
.max {
  background-image: url("../player/max_sprite.png");
  background-size: 42px 14px;
}

.max:hover {
  background-position: -14px 0;
}

.max:active {
  background-position: -28px 0;
}


/* --- 閉じる --- */
.close {
  background-image: url("../player/close_sprite.png");
  background-size: 42px 14px;
}

.close:hover {
  background-position: -14px 0;
}

.close:active {
  background-position: -28px 0;
}











/* 中身 */
.window-content {
  padding: 10px;
  background: black;
    flex: 1;               /* ← これが超重要 */
  min-height: 0;         /* ← これも重要 */
}



/* スクロール用 */
.window-content.scroll {
  overflow-y: auto;
}

.window-content.scroll::-webkit-scrollbar {
  width: 10px;
}

.window-content.scroll::-webkit-scrollbar-thumb {
    background-color: #97A435;/* メインカラー黄緑#97A435 */
  border: 2px solid #677116;/* メインカラー濃い緑#677116 */;
}

/* フィット用 */
.window-content.fit {
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

.window-content.fit img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

/* ステッカー */
.sticker {
  position: absolute;   /* ← これが無いのが最大の原因 */
  z-index: 4;          /* windowより上に出す */
  pointer-events: none;
  filter: drop-shadow(0 4px 4px rgba(0,0,0,0.4));
    overflow-x: hidden;

}

.sticker-a {

  left: -0px;   /* ← 今度はちゃんと効く */
  bottom: -70px;
  width: 250px;

  transform: rotate(15deg);

}

.sticker-b {
  left: -20px;   /* ← 今度はちゃんと効く */
  top: -10px;
  width: 200px;

  transform: rotate(-20deg);


}

.sticker-e {
  right: -40px;   /* ← 今度はちゃんと効く */
  bottom: -30px;
  width: 80px;

  transform: rotate(15deg);

}



.sticker-f {
  bottom: -30px;
  left: -30px;
    width: 48px;

  transform: rotate(-10deg);
}







.card-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px; /* カードとボタンの間隔 */
}


/* ボタン */
.select-btn {
  padding: 6px 14px;
  font-size: 14px;

  background: #2e3034;
  color: #fff;
  border: none;
  border-radius: 6px;
  cursor: pointer;
      font-family: "Makinas",sans-serif; /*上で設定したフォントファミリー名*/

  font-weight: normal;
  font-style: italic;
}

.select-btn:hover {
  background: #444;
}

.card {

    position: relative;
  width: 100%;
  border-radius: 12px;
  overflow: hidden;
  isolation: isolate; /* ← 超重要 */
}



.card img {
  display: block;
  width: 100%;
  height: auto;
}


/* ホログラム層 */
.holo {


  position: absolute;
  inset: 0;
  pointer-events: none;

  background:
    radial-gradient(
      circle at var(--x, 50%) var(--y, 50%),
      rgba(255,255,255,0.25),
      transparent 50%
    ),
    linear-gradient(
      120deg,
      rgba(255,0,255,0.25),
      rgba(0,255,255,0.25),
      rgba(255,255,0,0.25),
      rgba(255,0,255,0.25)
    );

  mix-blend-mode: color-dodge;
  opacity: 0.9;

  animation: holoShift 3s linear infinite;
}

@keyframes holoShift {
  0% { filter: hue-rotate(0deg); }
  100% { filter: hue-rotate(360deg); }
}



.holo::before {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    45deg,
    rgba(255,255,255,0.1) 0px,
    rgba(255,255,255,0.1) 2px,
    transparent 2px,
    transparent 4px
  );
  mix-blend-mode: overlay;
}





.footer-001 {
    display: flex;
    align-items: center;
    flex-direction: column;
    padding: 25px 10px 10px;
    background-color: #1C1F23;
}

.footer-001__logo {
    width: 130px;
    height: 30px;
}

.footer-001__list {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0 1.5em;
    list-style-type: none;
    margin: 0 0 .5em;
    padding: .5em;
}

.footer-001__link {
    font-family: "Makinas",sans-serif; /*上で設定したフォントファミリー名*/
    color: #05a0c2;
    font-weight: 200;
    text-decoration: none;
}


.footer-001__link:hover{
    color: #09c2ea;
}


.footer-001__list li:not(:last-of-type) .footer-001__link::after {
    margin-left: 1em;
    content: "/";
}

.footer-001__copyright {
    margin: 0;
    color: #ffffffb3;
    font-weight: 200;
    font-size: .8em;
}













.player {
    background: #7c8490;
  position:relative;
  align-items: center;


      padding: 10px;


      z-index: 0;
    }



@media(max-width:750px){
    .controls{



 }
}

@media(min-width:751px){

    .controls{



 }
}



.btn {
  width: 32px;
  height: 32px;
  cursor: pointer;

  image-rendering: pixelated;
}

/* ▼ prev */
.prev {
  background: url("../player/player-prev.png") no-repeat;
  background-size: 96px 32px;
}
.prev:hover {
  background-position: -32px 0;
}
.prev:active {
  background-position: -64px 0;
}

/* ▼ play */
.play {
  background: url("../player/player-play.png") no-repeat;
  background-size: 96px 32px;
}
.play:hover {
  background-position: -32px 0;
}
.play:active {
  background-position: -64px 0;
}

/* ▼ next */
.next {
  background: url("../player/player-next.png") no-repeat;
  background-size: 96px 32px;
}
.next:hover {
  background-position: -32px 0;
}
.next:active {
  background-position: -64px 0;
}


.pause {
  background: url("../player/player-pause.png") no-repeat;
  background-size: 96px 32px;
}
.pause:hover {
  background-position: -32px 0;
}
.pause:active {
  background-position: -64px 0;
}


    .controls, .options {
      padding-left: 50px;
      padding-right: 50px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin: 10px;

    }
    .controls img, .options img {
      width: 32px;
      height: 32px;

      /* ドット絵表示 */
      image-rendering: pixelated;
  image-rendering: -webkit-crisp-edges;
  image-rendering: -moz-crisp-edges;
  -ms-interpolation-mode: nearest-neighbor;

      cursor: pointer;
    }


.title {
  overflow: hidden;
  white-space: nowrap;
  background-color: #2e3034;
  color: #eee;
  border-radius: 8px;
}

.title-track {
  display: inline-flex;
  will-change: transform;
}

.title-text {
  padding-right: 80px; /* ← ここが「スペース」 */
}


    .title {
  font-family: "Makinas",'Kaisei Decol';
  font-weight: bold;
  background-color: #2e3034;
  color: #eee;
  text-align: center;
  border-radius: 8px;

  overflow: hidden;      /* ←重要：はみ出し隠す */
  white-space: nowrap;   /* ←改行禁止 */
  position: relative;
}



    #seekBar {
      width: 80%;
      margin: 6px auto 0;
      margin-bottom: 10px;
      display: block;
      -webkit-appearance: none;

      border-radius: 3px;
      background: #c1c1c1;
      outline: none;
    }
    /* Chrome, Safari 用 */
    #seekBar::-webkit-slider-runnable-track {

      background: #c1c1c1;
      border-radius: 3px;
    }
    #seekBar::-webkit-slider-thumb {
      -webkit-appearance: none;
      width: 12px;
      height: 12px;
      border-radius: 50%;
      background: #2e3034;/* メインカラー黄緑#97A435 */
      cursor: pointer;
    }
    /* Firefox 用 */
    #seekBar::-moz-range-track {

      background: #c1c1c1;
      border-radius: 3px;
    }
    #seekBar::-moz-range-thumb {
      width: 12px;
      height: 12px;
      border-radius: 50%;
      background: #2e3034;/* メインカラー黄緑#97A435 */
      cursor: pointer;
    }
    /* Edge 用 */
    #seekBar::-ms-track {
      height: 6px;
      background: #c1c1c1;
      border-radius: 3px;
      border: none;
      color: transparent;
    }
    #ytPlayer {
      display: none;
    }

    }























.topics {
      margin-top: 10px;
  margin-left: 14px;/* 全体の左右余白。 */
  margin-right: 14px;/* 全体の左右余白。 */

  overflow-y: auto;
  width: auto;
  padding-right: 4px;  /* スクロールバーとの最低距離 */

}

.topics-inner {
  padding-right: 20px; /* ←ここで中身だけ右に余白 */
  padding-left: 0;     /* 左はそのまま or 微調整 */
}






.topics::-webkit-scrollbar {
  background: #000;
}
.topics::-webkit-scrollbar-thumb {
  background-color: #97A435;/* メインカラー黄緑#97A435 */
  border: 2px solid #677116;/* メインカラー濃い緑#677116 */;
}
.topics::-webkit-scrollbar-thumb:hover {
  background-color: #677116;/* メインカラー濃い緑#677116 */
}







.topics dl {

  font-family:'Kiwi Maru','Lato', 'Hiragino Kaku Gothic Pro', 'ヒラギノ角ゴ Pro W3', Meiryo, メイリオ, Osaka, 'MS PGothic', arial, helvetica, sans-serif;
    color:  #360229;
    font-size: 18px;
padding: 5px 0;

}

.topics dt {
padding-bottom: 5px;
margin-bottom: -2%;/* 日付と更新内容の上下距離。 */
}

@media screen and (min-width: 768px) {
.topics dt {
clear: left;
float: left;
width: 10%;
}
.topics dd {
margin-left: 120px;/* 日付と更新内容の左右距離。 */
}
}






















/* モーダルCSS */
.modalArea {
  display: none;
  position: fixed;
  z-index: 10; /*サイトによってここの数値は調整 */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;

  font-family:'Kiwi Maru','Lato', 'Hiragino Kaku Gothic Pro', 'ヒラギノ角ゴ Pro W3', Meiryo, メイリオ, Osaka, 'MS PGothic', arial, helvetica, sans-serif;
    color:  #360229;
    font-size: 18px;
}


.modalBg {
  width: 100%;
  height: 100%;
  background-color: rgba(30,30,30,0.9);
}

.modalWrapper {
  position: absolute;
  top: 50%;
  left: 50%;
  transform:translate(-50%,-50%);
  width: 70%;
  max-width: 500px;
  padding: 10px 30px;
  background-image: url('../images/wallpaper-white.png'); /* 絶対パスで確認 */
}

.closeModal {
  position: absolute;
  top: 0.5rem;
  right: 1rem;
  cursor: pointer;
}




.fit-slider {
  position: absolute;
  inset: 0;
  overflow: hidden;
  contain: layout paint;
}