.info_qr_area {
  width:100%;
  height:auto;
  display:flex;
  flex-warp:warp;
}
.info_qr_area #dl_area{
display:flex;
align-items: center;
  margin-left:30px;
}
.info_qr_area #qr {
margin-left:20px;
  margin-top:-10px;
}
.info_qr_area #icon {
  margin:0;
}

/* pc 822px以上 */
@media only screen and (min-width: 822px), print {
.info_img01{
  width: 600px;
  height: auto;
  margin:0 20px;
  text-align:center;
  }
}

/* スマホ 821px以下 */
@media only screen and (max-width: 821px){
.info_qr_area #icon,.info_qr_area #qr {margin:0;}

.info_img01{
  width: 100%;
  height: auto;
  }
  
}

/* スマホ 639px以下 */
@media only screen and (max-width: 639px){
.info_qr_area #dl_area {margin-left:10px;flex-wrap:wrap;justify-content:center;}
}
/* スマホ 320px以下 */
@media only screen and (max-width: 320px){
.info_qr_area #thumb{width:40%;}
.info_qr_area #dl_area{width:60%;}
.info_qr_area #thumb img,
.info_qr_area #icon img{width:100%;}
}

p {
  margin: 0.6em 0px;
}


.txt_background {
  background: linear-gradient(to right, #9000bf, #7ee7fd);
  /* border-bottom: solid 2px gray;b */
  /*余白をつけておきます*/
  line-height: 20px;  /* 行の高さを同じにして縦中央に */
  padding: 4px;
  color: #fff; /* ← 文字色を白にする */
  font-size: 1.1rem; /* ← 文字を少し大きく */
}
          
.button-2 {
  justify-content: center;
  align-items: center;
  width: auto;
  margin:0 auto;
  border: none;
  border-radius: 3px;
  background-color: #2589d0;
  color: #fff;
  font-weight: 600;
}

.button-2:hover {
  background-color: #90f2e5;
}


/* 字下げ用 */
.indent-1{
  text-indent: 1em;
}
  
.indent-2{
  text-indent: 2em;
}
  
.indent-4{
  text-indent: 4em;
}

/* 「メンテナンス」表用 */
.table-mnt {
  border-collapse: collapse;
  width: 100%;
  max-width: 700px;
}
.table-mnt th,
.table-mnt td {
  border: 2px solid #fff;
  background-color: #CAEDFB;  /* 左側のセル色 */
  padding: 1em;
}
.table-mnt th {
  background-color: #0C769E;  /* 右側のセル色 */
  color: #fff;
  font-weight: bold;
  text-align: center;
  width: 30%;
  min-width: 4em;
}

/* 「オーナー情報(馬券)」表用 */
.table-bkn {
  border-collapse: collapse;
  width: 100%;
  max-width: 960px;
}
.table-bkn th,
.table-bkn td {
  border: 2px solid #fff;
  background-color: #FFCC99;  /* 右側のセル色 */
  padding: 1em;
}
.table-bkn th {
  background-color: #FF6600;  /* 左側のセル色 */
  color: #fff;
  font-weight: bold;
  text-align: center;
  width: 30%;
  min-width: 4em;
}

/* 「オーナー情報(育成)」表用 */
.table-iks {
  border-collapse: collapse;
  width: 100%;
  max-width: 960px;
}
.table-iks th,
.table-iks td {
  border: 2px solid #fff;
  background-color: #f0fbfe;    /* 右側のセル色 */
  padding: 1em;
}
.table-iks th {
  background-color: #009cbe;    /* 左側のセル色 */
  color: #fff;
  font-weight: bold;
  text-align: center;
  width: 30%;
  min-width: 4em;
}




/* 「共有できるアイテム」表用 */
.table-itm {
  border-collapse: collapse;
  width: 70%;
  position: relative;     /* z-indexを有効にするため */
  z-index: 1;             /* 画像の下 */
}
.table-itm th,
.table-itm td {
  border: 2px solid #9000bf;
  background-color: #ffffff;    /* 右側のセル色 */
  padding: 1em;
}
.table-itm th {
  background-color: #fffff;    /* 左側のセル色 */
  color: #000000;
  font-weight: bold;
  text-align: left;
  width: 35%;
  min-width: 4em;
}

/* ラッパー：重ね合わせの基準 */
.table-image-wrap {
  position: relative;
  max-width: 960px;   /* 任意（コンテナ幅） */
  margin: 0 auto;
  /* オーバーレイで右にせり出しても横スクロールさせない場合は↓ */
  overflow: hidden;
}

/* 画像：右端固定で35%幅、テーブルに5%重なる */
.overlay-img {
  position: absolute;
  bottom: 5%;
  right: 0;               /* 右端から配置 */
  width: 32%;
  height: auto;
  z-index: 2;             /* テーブルより前に置く（後ろにしたい場合は1未満に） */
  pointer-events: none;   /* 画像をクリック不可にして、下のテーブル操作を通す */
  object-fit: cover;      /* 必要に応じて */
}

/* 画像の縦位置をテーブルヘッダと揃える等、細かい調整例 */
/* .overlay-img { top: 8px; } */


/* ------------------------------------------------------------
   スマホ(横幅 <= 821px)でのレイアウト調整
------------------------------------------------------------ */
/* --- スマホ：重なり解除＋縦積み（表の下に画像） --- */
@media (max-width: 821px) {
  .table-image-wrap {
    /* HTML順が「画像→表」でも、並び順を制御できるように */
    display: flex;
    flex-direction: column;
  }
  .table-itm {
    width: 100%;
    order: 1;  /* 先に表を表示 */
    z-index: auto;
  }
  .overlay-img {
    position: static;   /* 通常フローに戻す（重なり解除） */
    width: 45%;
    display: block;
    margin-left: auto;
    order: 2;           /* 表の下に表示 */
    pointer-events: auto;   /* 必要に応じてクリック可に戻す */
    /* 見た目調整 */
    margin-top: 12px;
  }
}




/* 「共有できるキャラクター」表用 */
.table-chr {
  border-collapse: collapse;
  width: 100%;
}

/* セル共通 */
.table-chr th,
.table-chr td {
  border: 2px solid #9000bf;
  background-color: #ffffff;
  padding: 1em;
  vertical-align: middle; /* セル内要素の縦位置を中央に */
}

/* ヘッダーセル */
.table-chr th {
  background-color: #ffffff; /* ← #fffff のタイポ修正 */
  color: #000000;
  font-weight: bold;
  text-align: left;
  width: 40%;
  min-width: 4em;
}

/* セル内の横並び用ラッパー */
.cell-inline {
  display: inline-flex;     /* セル内で自然に横並び */
  align-items: center;      /* テキストとアイコンを上下中央揃え */
  gap: 12px;                /* 文字とアイコン（群）の間隔 */
  min-width: 0;             /* 長文のオーバーフロー対策（任意） */
}

/* 長いテキストは省略（任意） */
.cell-inline .label {
  display: inline-block;
  max-width: 16em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.2;         /* 行ボックスをタイトにしてズレ防止 */
}

/* アイコンは“要素単体”なので block 化してベースライン影響を断つ */
.cell-inline .icon {
  width: 64px;
  height: 64px;
  display: block;           /* ← これが最重要。ベースライン揃えを回避 */
  flex: 0 0 auto;           /* 伸縮させない */
}

/* アイコンが複数ある場合はラッパーで間隔を個別指定（任意） */
.cell-inline .icons {
  display: inline-flex;
  align-items: center;
  gap: 6px;                 /* アイコン同士の間隔 */
}

/* 高解像度(2x)ビットマップの場合のにじみ対策（任意） */
.cell-inline .icon[src$=".png"],
.cell-inline .icon[src$=".jpg"] {
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
}



/* テーブル直下の注記ブロック（ベタ付け） */
.table-chr + .table-note {
  margin-top: 0; /* テーブルにベタ付け */
}

/* 注記ブロック */
.table-note {
  padding: 0.5rem 0;                /* 上下だけ余白、左右は揃える */
  border-top: 1px solid rgba(0,0,0,0.15); /* 上だけ区切り線 */
  color: #444;
  font-size: 0.92em;
  line-height: 1.6;
}


/* ------------------------------------------------------------
   スマホ(横幅 <= 640px)でのレイアウト調整
------------------------------------------------------------ */
@media (max-width: 639px) {

  /* テーブルの列幅：thを50%、tdを50%（PCは40:60のまま） */
  .table-chr {
    table-layout: fixed;       /* 幅割りを安定させる */
    width: 100%;
  }
  .table-chr th {
    width: 50%;
    min-width: 0;              /* スマホでの窮屈さを回避 */
    padding-right: 0.75em;     /* 余白をややタイトに */
  }
  .table-chr td {
    width: 50%;
    min-width: 0;
    padding-left: 0.75em;
  }

  /* セルの内側：縦積み（テキスト→アイコン） */
  .cell-inline {
    display: flex;             /* inline-flex -> flex（折返しをコントロールしやすく） */
    flex-direction: column;    /* ← テキストの下にアイコンを置く */
    align-items: flex-start;    /* 左揃え（中央にしたい場合は center） */
    gap: 8px;                  /* テキストとアイコン群の間隔を少し狭める */
  }

  /* テキストは折り返し前提に（PCでは省略記号でもOK） */
  .cell-inline .label {
    max-width: none;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    line-height: 1.4;
  }

  /* アイコン群：2列グリッドで並べる */
  .cell-inline .icons {
    display: grid;                       /* ← 横並びからグリッドへ */
    grid-template-columns: repeat(2, auto); /* 2列 */
    gap: 8px 10px;                       /* 行間 / 列間 */
    align-items: center;
    justify-items: start;                /* 左寄せ（中央なら center） */
  }

  /* もし icons ラッパーを使わず、.cell-inline 直下に .icon を並べている場合の保険 */
  .cell-inline > .icon {
    /* icons ラッパーが無い場合でも2列にしたいとき */
    /* コメントアウト：必要なら有効化してください
    display: inline-block;
    */
  }
  
}