*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  font-family: system-ui, sans-serif;
  line-height: 1.5;
}

img,
video,
svg {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}

.n {
  padding: 0 !important;
}

body,
p,
table,
td {
  font-size: clamp(16px, 1rem, 32px) !important
}

@media (min-width: 1200px) {

  /* 1200px以上の画面で、文字サイズを動的に調整 */
  body,
  p,
  table,
  td {
    font-size: calc(1rem + (100vw - 1200px) * 0.005) !important;
  }
}

.j-hgrid {
  margin: 2vw auto !important;
}


.contain {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1rem;
}

.text-center {
  text-align: center;
}

.mt-4 {
  margin-top: 1rem;
}

.mt-8 {
  margin-top: 2rem;
}

.p-4 {
  padding: 1rem;
}

.p-8 {
  padding: 2rem;
}

.w100 {
  width: calc(80% + (100% - 80%) * (100vw - 1200px) / (1400px - 1200px));
  margin: 0 auto;
}

@media (min-width: 768px) {
  .md\\:flex {
    display: flex;
  }

  .md\\:grid-cols-2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
  }
}

a:link,
a:visited {
  color: #FFFFFF !important;
  text-decoration: none !important;
}

.j-cart-wrapper-link {
  display: none !important;
}

#cc-m-12300567294,
#cc-m-12307471794 {
  max-width: 1200px;
  margin: 0 auto;
}

h1 {
  width: 100%;
  font-size: 23px;
}

dl {
  display: flex;
  row-gap: 4px;
  flex-wrap: wrap;
}

dt {
  font-weight: bold;
  margin: 0;
  width: 50%;
}

dd {
  margin-left: 0 !important;
  width: 65%;
}

.pc {
  display: none;
}

@media (min-width: 768px) {
  .pc {
    display: block;
  }
}

#about {
  /* 本体のスタイル：背景とくり抜きは適用しない */
  background-color: transparent;
  /* 背景色は疑似要素に移動 */
  position: relative;
  /* 疑似要素の基準点となる */
  z-index: 1;
  /* コンテンツを疑似要素の上に表示 */
  padding: 2rem 1rem;
  display: flex;
  justify-content: center;
  align-items: center;
  /* レスポンシブな高さを確保 */
  min-height: calc(100vw * 767.22 / 1280);
  /* ビューポートの幅を基準にアスペクト比を計算 */
  width: 100vw;
  background-color: #0066b4;
  overflow: hidden;
}

#about_box {
  background: #ffffff;
  position: absolute;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 2rem;
  box-sizing: border-box;
  z-index: 999;
  bottom: 29vh;
  left: 50%;
  /* 必要に応じて調整 */
  transform: translate(-50%, -50%);
  /* 中心に配置 */
  top: 50%;
}

@media (min-width: 768px) {
  #about_box {
    width: 400px;
    height: 400px;
    padding: 3rem;
  }
}

#about_box h1 {
  line-height: 1.5rem;
  margin: -14px 0 8px 0;
  font: normal normal bold 16px/100% Raleway, cursive;
  font-size: clamp(16px, 1.3rem, 32px) !important;
  font-Weight: blod;
}

#top_sd {
  width: 30%;
  position: absolute;
  right: 12px;
  bottom: -12vh;
  animation: tilt-bounce 2s ease-in-out infinite;
  transform-origin: center center;
  /* 画像の中心を起点 */
  z-index: 999;
}

@media (min-width: 1024px) {
  #top_sd {
    bottom: -13vh;
    right: 24px;
    width: 24vw;
  }
}

@media (min-width: 800px) and (max-width: 1023px) {
  #top_sd {
    bottom: -17vh;
  }
}

@keyframes tilt-bounce {
  0% {
    transform: rotate(0deg);
  }

  10% {
    transform: rotate(-8deg);
    /* 左に傾く */
  }

  20% {
    transform: rotate(0deg);
  }

  30% {
    transform: rotate(8deg);
    /* 右に傾く */
  }

  40% {
    transform: rotate(0deg);
  }

  50% {
    transform: rotate(-6deg);
    /* 少し左に傾く */
  }

  60% {
    transform: rotate(0deg);
  }

  70% {
    transform: rotate(6deg);
    /* 少し右に傾く */
  }

  80% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(0deg);
  }
}

#about_box img {
  margin-top: -28px;
}

#kb img {
  margin: 0 auto;
}

#kb_box {
  background-image: url(https://u.jimcdn.com/cms/o/s92a3ab782589b8ac/userlayout/img/cloud.png?t=1757925626), url(https://u.jimcdn.com/cms/o/s92a3ab782589b8ac/userlayout/img/bg.png);
  background-size: cover, 80px 80px;
  background-repeat: no-repeat, repeat;
  width: 100%;
  padding: 100px 0 80px 0;
}

.btn {
  margin: 0 auto 32px auto;
  width: 80%;
}

@media (max-width: 320px) {
.btn {width: 98%;}
}

.btn a {
  color: #FFFFFF;
  padding: 16px 0;
  background: #c1272d;
  border-radius: 8px;
  border: #FFFFFF 4px solid;
  text-align: center;
  font-weight: bold;
  display: block;
  position: relative;
}

/* 黒の半透明の円 */
.btn a::after {
  content: '';
  position: absolute;
  right: 16px;
  /* ボタン右端からの距離 */
  top: 50%;
  transform: translateY(-50%);
  width: 28px;
  /* 円のサイズ */
  height: 28px;
  background: rgba(0, 0, 0, 0.8);
  /* 透過80%の黒 */
  border-radius: 50%;
}

/* 白い右向き三角形（円の中央） */
.btn a::before {
  content: '';
  position: absolute;
  right: 30px;
  top: 50%;
  transform: translateY(-50%) translateX(6px);
  /* 三角を円の中心へ微調整 */
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 4px 0 4px 8px;
  /* 三角形のサイズ */
  border-color: transparent transparent transparent #fff;
  pointer-events: none;
  z-index: 1;
}

#ky_iyona {
  position: relative;
  width: 100%;
}

.ky_logo {
  width: 50%;
  position: relative;
  top: -13rem;
}

@media (min-width: 800px) and (max-width: 1023px) {
  .ky_logo {
    top: -27rem;
  }
}

.ky_ria_logo {
  width: 50%;
  position: relative;
  top: -40rem;
  left: 11rem;
}

@media (min-width: 800px) and (max-width: 1023px) {
  .ky_ria_logo {
    top: -225vh;
    left: 58vh;
  }
}

#ky_ria {
  position: relative;
  top: -30rem;
  width: 100%;
}

@media (min-width: 800px) and (max-width: 1023px) {
  #ky_ria {
    top: -176vh;
  }
}

.finder {
  background-image: url(https://u.jimcdn.com/cms/o/s92a3ab782589b8ac/userlayout/img/frame-l.png?t=1757923963);
  background-repeat: no-repeat;
  background-size: contain;
  display: flex;
  padding: 24px 8px;
  font-size: 10px;
  width: 98%;
  margin: 16px auto;
  justify-content: center;
}

@media (min-width: 1024px) {
  .finder {  font-size: 12px;
    background-image: url(https://u.jimcdn.com/cms/o/s92a3ab782589b8ac/userlayout/img/frame-s.png?t=1757923958);
  }
}

@media (min-width: 800px) and (max-width: 1023px) {
  .finder {
    background-size: cover;
    height: 46.9vh;
    padding: 48px 32px 24px 32px;
    font-size: clamp(16px, 2.5vw, 32px) !important;
  }
}

@media (min-width: 1200px) {
  .finder {
    width: 100%;
  }
}

@media (max-width: 320px) {
  .finder {  font-size: 8px;}
}


.finder dl {
  width: 47%;
  margin-top: 2vw;
}
@media (max-width: 320px) {
.finder dl {margin-top: 0vw;}
}

@media (min-width: 800px) and (max-width: 1023px) {
  .finder dl {
    margin-top: 39px;
  }
}

@media (min-width: 1200px) {
  .finder dl {
    width: 47%;
    margin-top: 5vw;
  }
}

.finder dt {
  width: 43%;
  font-size: clamp(10px, 2vw, 32px) !important;
  margin-bottom: 1.4vw;
}
@media (min-width: 1024px) {
.finder dt {
font-size: clamp(16px, 2vw, 32px) !important;
  width: 47%;}}
@media (max-width: 360px) {
.finder dt {width: 40%;
margin-bottom: 0;}}
@media (max-width: 360px) {
.finder dt {
font-size: clamp(8px, 2vw, 32px) !important;}
}

@media (min-width: 800px) and (max-width: 1023px) {
  .finder dt,
  .finder dd {
    font-size: clamp(16px, 2.5vw, 32px) !important;
    height: 2rem;
  }
}

.finder dd {
  width: 50%;
}

@media (min-width: 1200px) {
  .finder dd {
    width: 52%;
  }
}

@media (max-width: 360px) {
.finder dd {width: 55%;}}

@media (max-width: 384px) {
.finder dd {width: 51%;}}

@media (max-width: 375px) {
.finder dd {width: 52%;}}

.finder a {
  color: #0066b4 !important;
  text-decoration: underline !important;
}

.img_wrap {
  width: 98%;
  margin: 0 auto;
  ;
}

#iyona_ria {
  background: url(https://u.jimcdn.com/cms/o/s92a3ab782589b8ac/userlayout/img/bg-dotto.png?t=1757906807);
  background-size: 32px;
  padding-top: 40px;
  position: relative;
  z-index: 1;
  margin-top: 28px;
}

#iyona_ria::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 18vh;
  background: url(https://u.jimcdn.com/cms/o/s92a3ab782589b8ac/userlayout/img/round-mask.png?t=1757924106);
  background-size: cover;
  z-index: 2;
}

@media (min-width: 1024px) {
  #iyona_ria::before {
    height: 537px;
  }
}

#iyona_ria::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 50px;
  z-index: 0;
  background: #FFFFFF;
}

#iyona_ria a {
  color: #fcee21 !important;
  border-bottom: #fcee21 solid 1px;
}

#menu {
  display: flex;
  position: relative;
  z-index: 3;
}

.icon_catch {
  position: relative;
}

.icon_catch img:first-child {
  position: relative;
  width: 30%;
  left: 18px;
  z-index: 2;
}

.icon_catch img:last-child {
  position: absolute;
  width: 80%;
  left: 46px;
  top: 24px;
  z-index: 1;
}

@media (min-width: 800px) and (max-width: 1023px) {
  .icon_catch img:last-child {
    left: 50%;
    transform: translate(-50%, -50%);
    top: 20vh;
  }
}

#iyona {
  position: relative;
}

#iyona img:first-child {
  position: relative;
  width: 35%;
  z-index: 99;
}

#iyona img:last-child {
  position: absolute;
  width: 80%;
  right: 0px;
  top: 0;
}

#ria {
  position: relative;
}

#ria img:first-child {
  position: relative;
  width: 40%;
  z-index: 99;
  left: 60%;
}

#ria img:last-child {
  position: absolute;
  width: 70%;
  left: 0px;
  top: 0;
}

.profile_box {
  background-color: #0066b4;
  position: relative;
  top: -50px;
  padding: 48px 8px;
}

@media (min-width: 768px) {
  .profile_box {
    top: -130px;
  }
}

.profile_box::before {
  position: absolute;
  top: -0.9rem;
  left: 0;
  width: 100%;
  height: 1rem;
  content: '';
  width: 100%;
  background-image: url(https://u.jimcdn.com/cms/o/s92a3ab782589b8ac/userlayout/img/decoration.png?t=1757923953);
  background-size: contain;
  background-repeat: repeat;
}

@media (min-width: 1024px) {
  .profile_box::before {
    top: -1vw;
  }
}

@media (min-width: 1200px) {
  .profile_box::before {
    top: -0.5vw;
  }
}

@media (max-width: 360px) {
  .profile_box::before {
    top: -0.9rem;
  }
}

@media (max-width: 320px) {
  .profile_box::before {
    top: -0.7rem;
  }
}

.profile_box::after {
  position: absolute;
  bottom: -0.9rem;
  left: 0;
  width: 100%;
  height: 1rem;
  content: '';
  width: 100%;
  background-image: url(https://u.jimcdn.com/cms/o/s92a3ab782589b8ac/userlayout/img/decoration.png?t=1757923953);
  background-size: contain;
  transform: scaleY(-1);
  z-index: 1;
  background-repeat: repeat;
}

@media (min-width: 1024px) {
  .profile_box::after {
    bottom: -1vw;
  }
}

@media (min-width: 1200px) {
  .profile_box::after {
    bottom: -0.5vw;
  }
}

@media (max-width: 360px) {
  .profile_box::after {
    bottom: -0.9rem;
  }
}

@media (max-width: 320px) {
  .profile_box::after {
    bottom: -0.7rem;
  }
}

.name {
  width: 70%;
  position: absolute;
  right: 0;
  top: -58px;
}

@media (min-width: 1024px) {
  .name {
    top: -163px;
  }
}

.ria_name {
  width: 65%;
  position: absolute;
  left: 8px;
  top: -80px;
}

@media (min-width: 1024px) {
  .ria_name {
    top: -240px;
  }
}

@media (max-width: 320px) {
  .ria_name {
    top: -58px;
  }}

.profile_content {
  display: block;
  width: 100%;
  color: #FFFFFF;
  margin-top: 0;
}

@media (min-width: 768px) {
  .profile_content {
    display: flex;
    margin-top: 80px;
  }
}

.profile_content div:first-child {
  width: 100%;
}

@media (min-width: 1024px) {
  .profile_content div:first-child {
    width: 65%;
    padding: 0 24px;
  }
}

.profile_content div:last-child {
  width: 100%;
}

@media (min-width: 1024px) {
  .profile_content div:last-child {
    padding-right: 0;
  }
}

.profile_content dt {
  width: 32%;
}

@media (min-width: 1024px) {
  .profile_content dt {
    width: calc(80% + (100% - 80%) * (15w - 1200px) / (8w - 1200px));
  }
}

@media (max-width: 384px) {
.profile_content dt {
  width: 35%;
}}

@media (max-width: 320px) {
.profile_content dt {
  width: 37%;
}}

.profile_content dd {
  width: 68%;
}

@media (min-width: 1024px) {
  .profile_content dd {
    width: calc(80% + (100% - 80%) * (22w - 1200px) / (10w - 1200px));
  }
}
@media (max-width: 384px) {
.profile_content dd {
  width: 65%;
}}
@media (max-width: 320px) {
.profile_content dd {
  width: 63%;
}}


.prof_info {
  position: relative;
  width: 98%;
  z-index: 1;
  color: #0066b4;
  flex-wrap: wrap;
  margin: 0 auto 2rem auto;
}

.prof_info dt {
  width: 25%;
}
@media (max-width: 320px) {
.prof_info dt {
  width: 31%;
}}

@media (min-width: 1024px) {
  .prof_info dt {
    width: calc(80% + (100% - 80%) * (9w - 1200px) / (6w - 1200px));
  }
}

.prof_info dd {
  width: 75%;
}

@media (max-width: 320px) {
.prof_info dd {
  width: 69%;
}}

@media (min-width: 1024px) {
  .prof_info dd {
    width: 70%;
  }
}

/* dtとddのスタイルを調整 */
.prof_info dt,
.prof_info dd {
  position: relative;
  z-index: 2;
  margin: 0;
  /* デフォルトマージンをリセット */
  padding: 1rem;
}

.prof_info dt {
  font-weight: bold;
}

/* dtの背景 */
.prof_info dt::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  background-color: #fff;
  background-image: linear-gradient(to right, #F8D984 0%, #F8D984 10px, transparent 10px);
  /* dtの右端は斜めにカットしない */
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
}

/* ddの背景 */
.prof_info dd::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  background-color: #fff;
  clip-path: polygon(0 0, 100% 0, 95% 100%, 0% 100%);
  /* 95%を調整して角度を変更 */
}

.hash {
  width: 98%;
  margin: 0 auto;
  color: #FFFFFF;
}

footer {
  background: #FFFFFF !important;
  color: #0066b4;
  position: relative;
}

/* パララックス */
.parallax {
  background-attachment: fixed;
  background-size: contain;
  /* 画像全体を表示 */
  background-position: center top !important;
  /* 画像を上部中央に配置 */
  aspect-ratio: 7 / 5;
  width: 100%;
  overflow: hidden;
  position: relative;
}

@media (min-width: 1024px) {
  .parallax {
    aspect-ratio: 16 / 9;
    position: relative;
    background-size: cover;
    background-position: center;
  }
}

@media (min-width: 800px) and (max-width: 1023px) {
  .parallax {
    /* この範囲のデバイスに最適なアスペクト比を試す */
    aspect-ratio: 4 / 3;
  }
}

.parallax img {
  margin: 0 auto;
  bottom: 0;
  position: absolute;
  object-fit: cover;
  height: 100%;
  left: 50%;
  /* 親要素の水平方向の中心に配置 */
  transform: translateX(-50%);
}

#movie {
  padding-top: 24px;
}

#movie .video-item,
#row_movie .video-item {
  width: 100%;
  max-width: 960px;
  /* 好みで 560px 等に変更可 */
  margin: 0 auto;
}

/* YouTube動画のレスポンシブ対応 */
.video-responsive {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 56.25%;
  /* 16:9 */
  overflow: hidden;
}

.video-item iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* 既存のiframeスタイルを更新 */
.first-stream iframe {
  width: 100%;
  height: auto;
  aspect-ratio: 16/9;
  border-radius: 15px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

.video-item iframe {
  width: 96%;
  height: auto;
  aspect-ratio: 16/9;
  border-radius: 10px;
  margin: 0 auto 8px auto;
}

.video-caption {
  margin: 0 0 24px;
  text-align: center;
  font-weight: bold;
  color: #0066b4;
}

/* フェードイン */
.fade-in {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

.fade-in.show {
  opacity: 1;
  transform: translateY(0);
}

/* PCサイズでのレスポンシブ対応 */
@media (min-width: 1024px) {

  /* #aboutセクションの調整 */
  #about {
    min-height: 400px;
    padding: 3rem 2rem;
    height: 25vw;
  }

  #about_box {
    width: 30vw;
    height: 30vw;
    padding: 3rem;
  }

  /* キャラクター紹介部分の調整 */
  #kb {
    padding: 2rem;
  }

  .ky_logo {
    width: 40%;
    top: -600px;
  }

  .ky_ria_logo {
    width: 40%;
    top: -1945px;
    left: 625px;
  }

  #ky_ria {
    top: -1400px;
  }

  /* 情報ボックスの調整 */
  .finder {
    padding: 5vw 16px;
    font-size: clamp(16px, 2vw, 32px) !important;
    background-position: center;
    width: 80%;
  }

  /* 動画セクションの調整 */
  #movie .video-item,
  #row_movie .video-item {
    max-width: 800px;
  }

  /* キャラクター詳細セクションの調整 */
  #iyona_ria {
    padding: 60px 40px 40px;
  }

  .icon_catch {
    width: calc(80% + (100% - 80%) * (19w - 1200px) / (10w - 1200px));
  }


  .icon_catch img:first-child {
    width: 25%;
    left: 76px;
  }

  .icon_catch img:last-child {
    width: 80%;
    left: 120px;
  }


  .prof_info dl {
    gap: 12px;
  }

  /* ボタンの調整 */
  .btn {
    width: 60%;
  }

  .btn a {
    padding: 24px;
    font-size: 24px;
  }

  /* 画像の調整 */
  .img_wrap {
    width: 80%;
  }
}

/*  Navigation
----------------------------------------------- */

ul.mainNav1,
ul.mainNav2 {
  margin: 0;
  padding: 0;
}


ul.mainNav1 li,
ul.mainNav2 li {
  display: inline;
  margin: 0;
  padding: 0;
}


ul.mainNav1 li a,
ul.mainNav2 li a {
  font: normal 11px/140% Verdana, Geneva, Arial, Helvetica, sans-serif;
  text-decoration: none;
  display: block;
  color: #333;
  border-bottom: 1px solid #CCC;
}


ul.mainNav1 li a {
  padding: 4px 4px 4px 4px;
}

ul.mainNav2 li a {
  padding: 4px 4px 4px 14px;
}

ul.mainNav3 li a {
  padding: 4px 4px 4px 24px;
}


ul.mainNav1 a:hover {
  background: #EEE;
  color: black;
}

ul.mainNav1 a.current {
  font-weight: bold;
}

/* ローディング画面 */
#loading {
  width: 100vw;
  height: 100vh;
  transition: all 1s;
  display: grid;
  place-items: center;
  /* 水平・垂直中央 */
  background: #3cc8f0;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
}

#loading img {
  max-width: 90vw;
  max-height: 90svh;
  /* 余白を残して縮小 */
  height: auto;
  width: auto;
}

.loaded {
  opacity: 0;
  visibility: hidden;
}

/* クリップパスの定義（SVGで形状を定義） */
.svg-clip-path {
  position: absolute;
  width: 0;
  height: 0;
}

/* 回転するSVGの共通スタイル */
.rotating-svg {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  /* 中央配置 */
  width: 100%;
  height: 100%;
  z-index: 0;
  /* #about::before よりは上、コンテンツよりは下に配置 */
}

/* アニメーションの定義 */
@keyframes rotate-slow {
  from {
    transform: translate(-50%, -50%) rotate(0deg);
  }

  to {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

@keyframes rotate-medium {
  from {
    transform: translate(-50%, -50%) rotate(0deg);
  }

  to {
    transform: translate(-50%, -50%) rotate(-360deg);
  }
}

@keyframes rotate-fast {
  from {
    transform: translate(-50%, -50%) rotate(0deg);
  }

  to {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

.svg-inner,
.svg-middle,
.svg-outer {
  /* 各SVGを親コンテナの中心に正確に配置 */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* 各SVGへのアニメーション適用 */
#outer-svg {
  animation: rotate-slow 60s linear infinite;
  width: 200%;
  height: 200%;
}

#middle-svg {
  animation: rotate-medium 45s linear infinite;
  width: 167%;
  height: 167%;
}

#inner-svg {
  animation: rotate-fast 30s linear infinite;
  width: 140%;
  height: 140%;
}

.pico {
  animation: tilt-bounce 2s ease-in-out infinite;
  transform-origin: center center;
  /* 画像の中心を起点 */
}

@keyframes tilt-bounce {
  0% {
    transform: rotate(0deg);
  }

  10% {
    transform: rotate(-8deg);
    /* 左に傾く */
  }

  20% {
    transform: rotate(0deg);
  }

  30% {
    transform: rotate(8deg);
    /* 右に傾く */
  }

  40% {
    transform: rotate(0deg);
  }

  50% {
    transform: rotate(-6deg);
    /* 少し左に傾く */
  }

  60% {
    transform: rotate(0deg);
  }

  70% {
    transform: rotate(6deg);
    /* 少し右に傾く */
  }

  80% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(0deg);
  }
}

.thum {
  display: block;
  gap: 0;
  margin-top: 24px;
  width: 100% !important;
}

.thum img {
  margin-bottom: 16px;
}

#iyona_ria .thum a {
  border-bottom: none;
}

@media (min-width: 1024px) {
  .thum {
    display: flex;
    gap: 16px;
    justify-content: space-between;
    align-items: center;
    width: 90% !important;
  }

  .thum img {
    display: block;
    margin-bottom: 16px;
  }
}

#auth-overlay {
  position: fixed;
  inset: 0;
  background: #000;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
  flex-direction: column;
}

#auth-overlay button {
  background: #fff;
  color: #000;
  border: none;
  padding: 0.5em 1em;
  cursor: pointer;
  font-size: 1em;
  margin-top: 0.5em;
}

#auth-pass {
  color: #000 !important;
  /* 文字色を黒に設定 */
  background-color: #fff !important;
  /* 背景色を白に設定 */
  border: 1px solid #ccc !important;
  /* 枠線を薄いグレーに設定 */
}

/* Chromeのオートフィル時の背景色を白にする */
#auth-pass:-webkit-autofill {
  -webkit-box-shadow: 0 0 0px 1000px #fff inset !important;
  -webkit-text-fill-color: #000 !important;
}