/* カラートークン */
:root{
  --tab-active: #fff;        /* アクティブ */
  --tab-inactive: #8b6ea9;   /* 藤色 */
  --tab-border: #cfc7da;
  --tab-bg: #333;
  --tab-bg-inactive: #f7f4fb;
}

.lastUp {
float:right;
white-space:nowrap;
font-size:.875rem;
}

#pageBody h2 {
margin-top:0;
}

#pageBody h2.top {
margin-top:2rem;
}

#pageBody h3 {
margin-top:2rem;
}

/* デフォルト消す */
#pageBody p {
  margin: 0;
}
#pageBody p.note {
  margin: 1rem auto;
}

/* 行間 */
.text-block > * + * {
  margin-top: .5rem;
}

/* 余白 */
.text-block {
  padding-inline: 16px;
margin-bottom:1.5rem;
}

/* ブロック間 */
.text-block + .text-block {
  margin-top: 1.5rem;
}

.pseudo-tabs{
  display:grid;
  grid-auto-flow: column;          /* 横並び */
  grid-auto-columns: 1fr;          /* 各タブを等分 */
  gap: .5rem;
  background: #fff;
}

.pseudo-tab{
  display:block;
  text-align:center;               /* 50%時に中央寄せ */
  padding: .6rem .9rem;
  border: 1px solid var(--tab-border);
  border-bottom: 0;                /* タブ感 */
  border-radius: .65rem .65rem 0 0;
  background: var(--tab-bg-inactive);
  color: var(--tab-inactive);      /* 非アクティブ＝藤色 */
  text-decoration: none;
  line-height: 1.2;
}

.pseudo-tab:hover{
  text-decoration: underline;
}

.pseudo-tab:focus-visible{
  outline: 2px solid currentColor;
  outline-offset: 3px;
}

/* アクティブ（現在ページ） */
.pseudo-tab[aria-current="page"],
.pseudo-tab.is-current{
  background: var(--tab-bg);
  color: var(--tab-active);        /* アクティブ＝#333 */
  border-color: #999;
  position: relative;
  top: 1px;                     /* 下の境界に馴染ませる */
}
.pseudo-tab.is-current a{
  color: var(--tab-active); 
}

.head3-note {
font-size:.75rem;
margin-left:1.5rem;
}

.screenshot{
width: 90%;
margin:0 auto;
border-radius: 6px;     /* 角丸 */
margin-bottom:5rem;
}

.screenshot-crop{
width: 90%;
margin:0 auto;
height: 450px;      /* 表示したい高さに調整 */
overflow: hidden;   /*はみ出した下側を隠す*/
border: 1px solid #bbb; /* 枠 */
border-radius: 6px;     /* 角丸*/
margin-bottom:5rem;
}

.screenshot-crop img{
display: block;
width: 100%;
height: auto;       /* 画像の縦横比保持 */
}



/* ヘッダー分だけ下にずらして見せる（値は画像ごとに調整） */
.screenshot-crop.is-skip-header img{
  transform: translateY(-52px); /* ヘッダー高 */
}
@media (max-width: 1200px){
  .screenshot-crop{
    height: 450px;  /* 1200未満は少しだけ低 */
  }
.screenshot-crop.is-skip-header img{
  transform: translateY(-60px); /* ヘッダー高 */
}
}
@media (max-width: 980px){
  .screenshot-crop{
    height: 420px;  /* 980未満は低 */
  }
.screenshot-crop.is-skip-header img{
  transform: translateY(-50px); /* ヘッダー高 */
}
}

@media (max-width: 775px){
  .screenshot-crop{
    height: 420px;  /* 775未満は低 */
  }
.screenshot-crop.is-skip-header img{
  transform: translateY(-40px); /* ヘッダー高 */
}
}

@media (max-width: 768px){
  .screenshot{
width: 100%;
  }
  .screenshot-crop{
width: 100%;
height: 380px;  /* スマホはさらに低く */
  }
.screenshot-crop.is-skip-header img{
  transform: translateY(-40px); /* ヘッダー高 */
}
}
@media (max-width: 650px){
  .screenshot{
width: 100%;
  }
  .screenshot-crop{
width: 100%;
height: 350px;  /* スマホはさらに低く */
  }
.screenshot-crop.is-skip-header img{
  transform: translateY(-32px); /* ヘッダー高 */
}
}