/* ==============================
   英語版 固定ページ用CSS
   p-sticky 系 幅自動調整 + レスポンシブ
   ============================== */
.page-content {
  --content-width: 95%;
  --content-max: 1400px;

  --content-text-offset: 20px;      /* 本文テキスト全体 */
  --dotlist-offset: 40px;           /* 本文内通常ドットリスト */
  --checklist-offset: 26px;         /* 本文内✔リスト */
  --checklist-column-offset: 26px;  /* カラム内✔リスト */
  --ol-column-offset: 20px;         /* カラム内数字付きリスト */

  --nested-indent: 12px;            /* ネストリスト追加インデント */
}
   
/* -------------------------
   H3（付箋見出し）
------------------------- */
.page-content h3.p-sticky,
.page-content h3.p-sticky_1,
.page-content h3.p-sticky_2, 
.page-content h3.p-sticky_3,
.page-content h3.p-sticky_4,
.page-content h3.p-sticky_5,
.page-content h3.p-sticky_6 {
  position: relative;
  display: block;
  width: var(--content-width);
  max-width: var(--content-max);
  margin: 30px auto 40px auto;
  text-align: left;
  background: transparent;
  box-shadow: none;
  box-sizing: border-box;
}

.page-content h3.p-sticky2,
.page-content h3.p-sticky2_1 {
  position: relative;
  display: block;
  width: var(--content-width);
  max-width: var(--content-max);
  margin: 30px auto 20px auto;
  text-align: left;
  background: transparent;
  box-shadow: none;
  box-sizing: border-box;
}

.page-content h3.p-sticky3 {
  position: relative;
  display: block;
  width: var(--content-width);
  max-width: var(--content-max);
  margin: 60px auto 0px auto;
  text-align: left;
  background: transparent;
  box-shadow: none;
  box-sizing: border-box;
}

.page-content h3.p-sticky4 {
  position: relative;
  display: block;
  width: var(--content-width);
  max-width: var(--content-max);
  margin: 0px auto 30px auto;
  text-align: left;
  background: transparent;
  box-shadow: none;
  box-sizing: border-box;
}

.page-content h3.p-sticky5,
.page-content h3.p-sticky5_1 {
  position: relative;
  display: block;
  width: var(--content-width);
  max-width: var(--content-max);
  margin: 20px auto 0px auto;
  text-align: left;
  background: transparent;
  box-shadow: none;
  box-sizing: border-box;
}

.page-content h3.p-sticky > .p-sticky__label,
.page-content h3.p-sticky2 > .p-sticky__label,
.page-content h3.p-sticky3 > .p-sticky__label,
.page-content h3.p-sticky4 > .p-sticky__label,
.page-content h3.p-sticky5 > .p-sticky__label{
  position: relative;
  display: inline-block;
  padding: 12px 20px 12px var(--content-text-offset);
  background: #d4f5f9;
  color: #000;
  font-size: 22px;
  font-weight: bold;
  box-shadow: 8px 8px 0px rgba(0,0,0,0.2);
  min-width: 300px;   /* 最小幅を広げる */
  width: 30%;         /* パーセントを増やす */
  max-width: 300px;   /* 最大幅を大きくする */
  white-space: nowrap;
  box-sizing: border-box;
}

.page-content h3.p-sticky_1 > .p-sticky__label{
  position: relative;
  display: inline-block;
  padding: 12px 20px 12px var(--content-text-offset);
  background: #d4f5f9;
  color: #000;
  font-size: 22px;
  font-weight: bold;
  box-shadow: 8px 8px 0px rgba(0,0,0,0.2);
  min-width: 360px;   /* 最小幅を広げる */
  width: 30%;         /* パーセントを増やす */
  max-width: 360px;   /* 最大幅を大きくする */
  white-space: nowrap;
  box-sizing: border-box;
}

.page-content h3.p-sticky_2 > .p-sticky__label{
  position: relative;
  display: inline-block;
  padding: 12px 20px 12px var(--content-text-offset);
  background: #d4f5f9;
  color: #000;
  font-size: 22px;
  font-weight: bold;
  box-shadow: 8px 8px 0px rgba(0,0,0,0.2);
  min-width: 400px;   /* 最小幅を広げる */
  width: 30%;         /* パーセントを増やす */
  max-width: 420px;   /* 最大幅を大きくする */
  white-space: nowrap;
  box-sizing: border-box;
}

.page-content h3.p-sticky_3 > .p-sticky__label,
.page-content h3.p-sticky2_1 > .p-sticky__label {
  position: relative;
  display: inline-block;
  padding: 12px 20px 12px var(--content-text-offset);
  background: #d4f5f9;
  color: #000;
  font-size: 22px;
  font-weight: bold;
  box-shadow: 8px 8px 0px rgba(0,0,0,0.2);
  min-width: 400px;   /* 最小幅を広げる */
  width: 30%;         /* パーセントを増やす */
  max-width: 460px;   /* 最大幅を大きくする */
  white-space: nowrap;
  box-sizing: border-box;
}

.page-content h3.p-sticky_4 > .p-sticky__label {
  position: relative;
  display: inline-block;
  padding: 12px 20px 12px var(--content-text-offset);
  background: #d4f5f9;
  color: #000;
  font-size: 22px;
  font-weight: bold;
  box-shadow: 8px 8px 0px rgba(0,0,0,0.2);
  min-width: 500px;   /* 最小幅を広げる */
  width: 33%;         /* パーセントを増やす */
  max-width: 500px;   /* 最大幅を大きくする */
  white-space: nowrap;
  box-sizing: border-box;
}

.page-content h3.p-sticky_5 > .p-sticky__label,
.page-content h3.p-sticky5_1 > .p-sticky__label {
  position: relative;
  display: inline-block;
  padding: 12px 20px 12px var(--content-text-offset);
  background: #d4f5f9;
  color: #000;
  font-size: 22px;
  font-weight: bold;
  box-shadow: 8px 8px 0px rgba(0,0,0,0.2);
  min-width: 600px;   /* 最小幅を広げる */
  width: 36%;         /* パーセントを増やす */
  max-width: 600px;   /* 最大幅を大きくする */
  white-space: nowrap;
  box-sizing: border-box;
}

.page-content h3.p-sticky_6 > .p-sticky__label {
  position: relative;
  display: inline-block;
  padding: 12px 20px 12px var(--content-text-offset);
  background: #d4f5f9;
  color: #000;
  font-size: 22px;
  font-weight: bold;
  box-shadow: 8px 8px 0px rgba(0,0,0,0.2);
  min-width: 600px;   /* 最小幅を広げる */
  width: 40%;         /* パーセントを増やす */
  max-width: 600px;   /* 最大幅を大きくする */
  white-space: nowrap;
  box-sizing: border-box;
}

.page-content h3.p-sticky > .p-sticky__label::before,
.page-content h3.p-sticky_1 > .p-sticky__label::before,
.page-content h3.p-sticky_2 > .p-sticky__label::before,
.page-content h3.p-sticky_3 > .p-sticky__label::before,
.page-content h3.p-sticky_4 > .p-sticky__label::before,
.page-content h3.p-sticky_5 > .p-sticky__label::before,
.page-content h3.p-sticky_6 > .p-sticky__label::before,
.page-content h3.p-sticky2 > .p-sticky__label::before,
.page-content h3.p-sticky2_1 > .p-sticky__label::before,
.page-content h3.p-sticky3 > .p-sticky__label::before,
.page-content h3.p-sticky4 > .p-sticky__label::before, 
.page-content h3.p-sticky5 > .p-sticky__label::before,
.page-content h3.p-sticky5_1 > .p-sticky__label::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 8px;
  height: 100%;
  background: #a8d08d;
}


@media (max-width: 767px) {
  /* H3 個別マージンをモバイルで統一 */
  .page-content h3.p-sticky,
  .page-content h3.p-sticky2,
  .page-content h3.p-sticky3,
  .page-content h3.p-sticky4,
  .page-content h3.p-sticky5 {
    margin: 20px auto 20px auto !important; /* 上下安全マージン */
  }

  /* 必要に応じてフォントサイズも調整 */
  .page-content h3.p-sticky,
  .page-content h3.p-sticky2,
  .page-content h3.p-sticky3,
  .page-content h3.p-sticky4,
  .page-content h3.p-sticky5 {
    font-size: 16px !important;
    line-height: 1.5 !important;
  }

  /* p-stickyラベルのモバイル対応 */
  .page-content h3.p-sticky > .p-sticky__label,
  .page-content h3.p-sticky_1 > .p-sticky__label,
  .page-content h3.p-sticky_2 > .p-sticky__label,
  .page-content h3.p-sticky_3 > .p-sticky__label,
  .page-content h3.p-sticky_4 > .p-sticky__label,
  .page-content h3.p-sticky_5 > .p-sticky__label,
  .page-content h3.p-sticky_6 > .p-sticky__label,
  .page-content h3.p-sticky2 > .p-sticky__label,
  .page-content h3.p-sticky2_1 > .p-sticky__label,
  .page-content h3.p-sticky3 > .p-sticky__label,
  .page-content h3.p-sticky4 > .p-sticky__label,
  .page-content h3.p-sticky5 > .p-sticky__label,
  .page-content h3.p-sticky5_1 > .p-sticky__label {
    width: 100% !important;        /* 幅を全幅に */
    max-width: 100% !important;
    min-width: auto;               /* 最小幅制限を解除 */
    padding: 8px 12px;             /* モバイル向けパディング */
    font-size: 16px !important;    /* 文字サイズ調整 */
    white-space: normal;           /* 折り返しを許可 */
    box-shadow: 4px 4px 0px rgba(0,0,0,0.2); /* シャドウを少し縮小 */
  }

  /* ラベルの三角や色帯も位置調整 */
  .page-content h3.p-sticky > .p-sticky__label::before,
  .page-content h3.p-sticky_1 > .p-sticky__label::before,
  .page-content h3.p-sticky_2 > .p-sticky__label::before,
  .page-content h3.p-sticky_3 > .p-sticky__label::before,
  .page-content h3.p-sticky_4 > .p-sticky__label::before,
  .page-content h3.p-sticky_5 > .p-sticky__label::before,
  .page-content h3.p-sticky_6 > .p-sticky__label::before,
  .page-content h3.p-sticky2 > .p-sticky__label::before,
  .page-content h3.p-sticky2_1 > .p-sticky__label::before,
  .page-content h3.p-sticky3 > .p-sticky__label::before,
  .page-content h3.p-sticky4 > .p-sticky__label::before,
  .page-content h3.p-sticky5 > .p-sticky__label::before,
  .page-content h3.p-sticky5_1 > .p-sticky__label::before {
    width: 6px; /* 縮小 */
  }
}


/* レスポンシブ：画面幅が768px以下 */
@media (max-width: 768px) {
	.p-sticky > .p-sticky__label,
	.p-sticky_1 > .p-sticky__label,
	.p-sticky_2 > .p-sticky__label,
	.p-sticky_3 > .p-sticky__label,
	.p-sticky_4 > .p-sticky__label,
	.p-sticky_5 > .p-sticky__label,
	.p-sticky_6 > .p-sticky__label,
	.p-sticky2 > .p-sticky__label,
	.p-sticky2_1 > .p-sticky__label,
	.p-sticky3 > .p-sticky__label,
	.p-sticky4 > .p-sticky__label,
	.p-sticky5 > .p-sticky__label,
	.p-sticky5_1 > .p-sticky__label {
		font-size: 90%;       /* 文字を少し縮小 */
		padding-right: 10px;  /* 余白も少し縮小 */
	}
}

/* レスポンシブ：画面幅が480px以下 */
@media (max-width: 480px) {
	.p-sticky > .p-sticky__label,
	.p-sticky_1 > .p-sticky__label,
	.p-sticky_2 > .p-sticky__label,
	.p-sticky_3 > .p-sticky__label,
	.p-sticky_4 > .p-sticky__label,
	.p-sticky_5 > .p-sticky__label,
	.p-sticky_6 > .p-sticky__label,
	.p-sticky2 > .p-sticky__label,
	.p-sticky2_1 > .p-sticky__label,
	.p-sticky3 > .p-sticky__label,
	.p-sticky4 > .p-sticky__label,
	.p-sticky5 > .p-sticky__label,
	.p-sticky5_1 > .p-sticky__label {
		font-size: 80%;       /* より縮小 */
		padding-right: 5px;
	}
}